Iterate through each object in Typescript

Question

I am having this object:

product: {
    id: "id1",
    title: "ProductName 1",
    additionalDetails: {
        o1: {
            id: "pp1", 
            label: "Text",
            content: [{ id: "ppp1", label: "Tetetet" }]
        },
        o2: {
            id: "pp2", 
            label: "Text2", 
            content: [{ id: "ppp2", label: "Tetetet2" }]
        } 
    }
}

I try to iterate to each object.additionalDetails.object but I cannot. My code:

Object.keys(product.additionalDetails).forEach((key: string) => {
  const additionalDetail = product[key];
  const idLabel: string = additionalDetail.id;
  const label: string = additionalDetail.label;
  const contentId: string = additionalDetail.content[0].id;
  const content = additionalDetail.content[1].label;
});

But it does not work. What am I missing?

`additionalDetail.content` is an array and you're trying to access its `id` property (`additionalDetail.content.id`), since it always seems to have only one element, you can use `additionalDetail.content[0].id` — Titus, Feb 07 '20 at 16:02
That doesn't look like correct syntax. Are you missing `{}` to wrap `o1` and `o2` in `product`? — zero298, Feb 07 '20 at 16:02
Hi Catherine: Your first code snippet is not syntactically valid TypeScript. Are you sure you have copied it correctly? — Ben Wainwright, Feb 07 '20 at 16:02
@BenWainwright It is just smr quick I did to present my product object. — Kathrine Hanson, Feb 07 '20 at 16:03
Secondly: "It doesn't work" isn't usually very helpful for those trying to help you. Please include an exact description of what exactly what happens including full error messages etc. — Ben Wainwright, Feb 07 '20 at 16:04
ok. But as @zero298 says - did you mean to wrap o1 and o2 in braces? — Ben Wainwright, Feb 07 '20 at 16:05
`additionalDetails` is an object, not an array. It's missing `{ }` for that matter. But anyway an object is not iterable with .forEach — Jeremy Thille, Feb 07 '20 at 16:06
@BenWainwright he is right but I again have a problem. I updated my post. See please. — Kathrine Hanson, Feb 07 '20 at 16:10
@zero298 you are right but I have again a problem. I updated my post. See please. — Kathrine Hanson, Feb 07 '20 at 16:11
Well you already know how to do it :) You're already using `Object.keys()` in your code. Also be aware of the existence of `Object.values()` — Jeremy Thille, Feb 07 '20 at 16:11
@KathrineHanson As I've already said once; "it does not work" will not help people help you. Please give specific details of what behaviour you are seeing. — Ben Wainwright, Feb 07 '20 at 16:12
@JeremyThille it does not even get to the loop. when I do console.log(product.additionalDetails); , I am getting o1 and o2. — Kathrine Hanson, Feb 07 '20 at 16:13
That is because you need to use `product.additionalDetails[key]` not just `product[key]`. — Titus, Feb 07 '20 at 16:16
@Titus thanks. if my content[] array is empty in some objects, would it be a problem? — Kathrine Hanson, Feb 07 '20 at 16:20
Yes, that will cause an error, you can prevent it using `const contentId: string = additionalDetail.content.length ? additionalDetail.content[0].id : undefined;`. — Titus, Feb 07 '20 at 16:21

score 2 · Accepted Answer · answered Feb 07 '20 at 16:24

Two errors :

Replace product[key] with product.additionalDetails[key]

and

additionalDetail.content[1] doesn't exist (content is an array with only one element inside)

product= {
  id: "id1",
  title: "ProductName 1",
  additionalDetails: {
    o1: {
      id: "pp1",
      label: "Text",
      content: [{
        id: "ppp1",
        label: "Tetetet"
      }]
    },
    o2: {
      id: "pp2",
      label: "Text2",
      content: [{
        id: "ppp2",
        label: "Tetetet2"
      }]
    }
  }
}

Object.keys(product.additionalDetails).forEach( key => {
  const additionalDetail = product.additionalDetails[key]; // <-- Here
  const idLabel = additionalDetail.id;
  const label= additionalDetail.label;
  const contentId = additionalDetail.content[0].id;
  // const content = additionalDetail.content[1].label;  // <-- content[1] Doesn't exist
});

I should write: const contentId = additionalDetail.content[0].id; AND const content = (additionalDetail.content) ? additionalDetail.content[0].label : undefined; RIGHT? — Kathrine Hanson, Feb 07 '20 at 16:28
Yes, or `const content = additionalDetail.content[1] && additionalDetail.content[1].label`, which ill check for the presence of `additionalDetail.content[1]` and if it exists, take the `.label` — Jeremy Thille, Feb 08 '20 at 04:52

score 1 · Answer 2 · answered Feb 07 '20 at 16:16

Iterate through the properties of additionalDetails by using any of Object.keys, Object.values, or Object.entries.

const product = {
  id: "id1",
  title: "ProductName 1",
  additionalDetails: {
    o1: {
      id: "pp1",
      label: "Text",
      content: [{
        id: "ppp1",
        label: "Tetetet"
      }]
    },
    o2: {
      id: "pp2",
      label: "Text2",
      content: [{
        id: "ppp2",
        label: "Tetetet2"
      }]
    }
  }
}

for (const [k, v] of Object.entries(product.additionalDetails)) {
  console.log(`Detail ${k} has label ${v.label}`);
}

score 0 · Answer 3 · answered Feb 07 '20 at 16:07

0

You are trying to get the id index of an array

o1: {id: "pp1", label: "Text", content: [{id: "ppp1", label: "Tetetet"}]},

const contentId: string = additionalDetail.content.id;

You need to select an index of the array to get to the object containg the content id:

const contentId: string = additionalDetail.content[0].id;

You should also initialize additionalDetails with const.

answered Feb 07 '20 at 16:07

Sondre Sørbye

529
1
7
15

I changed it and it does not work. U are right about it but smt else is also a problem. I updated my post. – Kathrine Hanson Feb 07 '20 at 16:09
You need to use 0 as the index since you just have one item in the array. It starts from 0 – Sondre Sørbye Feb 07 '20 at 16:10

Iterate through each object in Typescript

3 Answers3