Javascript - iterating thru object array-CodePudding

   const module = {
      video: [
         { id: 1, title: 'video', component: <Video />},
      ],
      condensed: [
         { id: 2, title: 'condensed', component: <Condensed /> },
      ],
      full: [
         { id: 3, title: 'full', component: <Full /> },
      ],
   };

Is there a way to loop through an object array in which the arrays are named? Hopefully I'm using the correct language to describe this. I'm looking to print out id and title for each array.

If the data looks like this, I believe I can use a for loop (but I realize that I can use forEach or map):

const module = {
      video: [
         { id: 1, title: 'video', component: <Video />},
         { id: 2, title: 'condensed', component: <Condensed /> },
      ],

for (var key in module.video) {
    var obj = module.video[key];
    // ...
}

CodePudding user response：

If you mean to iterate through the module object you can simply use for...in

for (var el in module) {
        // Whatever you want to do
    }

Where you will need to use module[el] to get the whole objects. If you want a way to iterate though all children of children you can simply use a for...in with a foreach inside

for (var el in module) {
        module[el].forEach((element) => {
            // Whatever you want to do
        });
    }

CodePudding user response：

You can use for-in with Array#each as follows:

const module = { video: [ { id: 1, title: 'video', component: '<Video />'}, ], condensed: [ { id: 2, title: 'condensed', component: '<Condensed />' }, ], full: [ { id: 3, title: 'full', component: '<Full />' }, ], };

for( const key in module ) {
    module[key].forEach(
        ({id,title}) => console.log( id, title )
    );
}

Alternatively ......

You can use for-of with Object.values and Array#forEach as follows:

const module = { video: [ { id: 1, title: 'video', component: '<Video />'}, ], condensed: [ { id: 2, title: 'condensed', component: '<Condensed />' }, ], full: [ { id: 3, title: 'full', component: '<Full />' }, ], };

for( const value of Object.values(module) ) {
    value.forEach(
        ({id,title}) => console.log( id, title )
    );
}

CodePudding user response：

forEach will be simplest for your use case

const module = {
  video: [
    { id: 1, title: "video" },
    { id: 2, title: "condensed" },
  ],
};

// option 1
module.video.forEach(({ id, title }) => {
  console.log(id, title);
});


// option 2
for (var key in module.video) {
  const { id, title } = module.video[key];
  console.log(id, title);
}

// option 3
for (const item of module.video) {
  const { id, title } = item;
  console.log(id, title);
}

If need to traverse the main object and inside arrays

const module = {
  video: [{ id: 1, title: "video", component: "" }],
  condensed: [{ id: 2, title: "condensed", component: "<Condensed />" }],
  full: [{ id: 3, title: "full", component: "<Full />" }],
};

Object.entries(module).forEach(([key, items]) => {
  console.log("-->", key);
  items.forEach(({ id, title }) => {
    console.log(id, title);
  });
});