Generate Children element based on number of keys in object

Question

I have my object that is stored in variable val.Main.widgets. I also have variable that functions as a data tree. What I need is to generate as many children elements as there are keys in my object that is stored in val.Main.widgets. If I console log this: console.log(Object.keys(val.Main.widgets).length;, it returns 8 so in this case I need to generate 8 children elements.

I am guessing I need some sort of cycle, but I really dont know where to start, hence why I am asking here.

Here is my object:

And here is my tree variable:

const tileTree = [
  {
    name: val.Main.name,
    children: [
      {
        name: val.Main.widgets['E1EV7'].name,
      },
      {
        name: val.Main.widgets['E70ZT'].name,
      },
    ],
  },
];

Thank you for any advice.

can you explain little more for better clarification, what exactly you want? — akhtarvahid, Oct 03 '19 at 12:46
@VahidAkhtar I want to generate number of children element based on the number of keys in my object. In this case, my object has 8 keys so I need to generate 8 chlidren elements. — AdamSulc, Oct 03 '19 at 12:47
To be more exact with the duplication: https://stackoverflow.com/a/5737136/572771 — Rafael Herscovici, Oct 03 '19 at 12:48
`const tree = { name: val.Main.name, children: val.Main.widgets.map(w => ({ name: w.name })) }` — Mulan, Oct 03 '19 at 12:50

Rodrigo Ehlers · Accepted Answer · 2019-10-03T12:58:20.653

2

You do not need lodash for this. You want to use Array.map on the result of Object.keys.

const content = val.Main.widgets;
const keys = Object.keys(content);
const children = keys.map(key => content[key]);

Then in your tileTree you simply set children to children.

const tileTree = [
  {
    name: val.Main.name,
    children,
  },
];

This will give you all the properties of the val.Main.widgets object. If you only want specific ones, you can destructure them in your map function.

...
// Suppose we only want 'name'.
const children = keys.map(key => {
  const { name } = content[key];
  return { name };
});
...

edited Oct 03 '19 at 12:58

answered Oct 03 '19 at 12:53

Rodrigo Ehlers

1,830
11
25

This solve my problem entirely, thank you very much. – AdamSulc Oct 03 '19 at 12:56
Very glad to hear that, would be great if you could mark my answer as correct for other people to find. @AdamSulc – Rodrigo Ehlers Oct 03 '19 at 12:58

score 0 · Answer 2 · answered Oct 03 '19 at 12:48

0

You can use

Object.keys(val.Main.widgets).map(widgetKey => {
   const widget = val.Main.widgets[widgetKey]

   return (
       <div key={widgetKey}>
          <h1>This is widget : {widget.name}</h1>
       </div>
   )
}

answered Oct 03 '19 at 12:48

Geoffrey H

1,280
2
10
33

score 0 · Answer 3 · 2019-10-09T13:53:07.587

Object.keys is a function that returns an array. The array has a foreach method

var lunch = {
    sandwich: 'ham',
    snack: 'chips',
    drink: 'soda',
    desert: 'cookie',
    guests: 3,
    alcohol: false,
};

Object.keys(lunch).forEach(function (item) {
    console.log(item); // key
    console.log(lunch[item]); // value
});

Other way is by using lodash module from npm or yarn. example where _ is the lodash module:

_.times(8, i => {
    schedule.push({
        date: moment()
            .add(i, "days")
            .format("YYYY-MM-DD"),
        times: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22]
    });
});

You can replace the 8 with your .length code.

`Object.keys` is a function that returns an array. The _array_ has a `.forEach` method... — Mulan, Oct 03 '19 at 12:52

score 0 · Answer 4 · answered Oct 03 '19 at 12:58

const tileTree = [
  {
    name: 'test',
    children: [
      {
        name: 'test1'
      },
      {
        name: 'test2'
      },
      {
        name: 'test3'
      },
            {
        name: 'test4'
      },
            {
        name: 'test5'
      },
            {
        name: 'test6'
      }
    ],
  },
];

    const createLi = (arr) => {
        for (let i = 0; i < arr[0].children.length; i += 1) {
        let li = document.createElement("li");
        let ol = document.getElementById('list');
        li.innerHTML = arr[0].children[i].name;
        ol.appendChild(li);
      }
    }

    createLi(tileTree);

https://jsfiddle.net/os20wdLh/

Generate Children element based on number of keys in object

4 Answers4