CODEWITHSUNDEEP
javascriptarraysobject
Lewis
Lewis

Reputation: 175

Javascript - iterating thru object array

   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];
    // ...
}

Upvotes: 0

Views: 89

Answers (4)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27192

You can simply achieve that by getting the object keys with the help of Object.keys() method and then iterating these keys values with the help of Array.forEach() to get the id and title property values.

Live Demo :

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

Object.keys(module).forEach(key => {
    module[key].forEach(obj => {
    console.log('ID : ', obj.id);
    console.log('Title : ', obj.title);
  })
});

Upvotes: 1

Siva Kondapi Venkata
Siva Kondapi Venkata

Reputation: 11001

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);
  });
});

Upvotes: 1

PeterKA
PeterKA

Reputation: 24638

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 )
    );
}

Upvotes: 1

LazyJ
LazyJ

Reputation: 601

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
        });
    }

Upvotes: 1

Related Questions