Loop through every item in Typescript

Question

Loop through every item in Typescript

I am currently working with the following data structure:

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 have been attempting to iterate through each object inside `additionalDetails`, but for some reason, it is not working as expected. Here is my code snippet:

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

Unfortunately, this code snippet does not seem to be functioning correctly. Can anyone help point out what I might be missing or doing wrong?

javascript arrays typescript object foreach

Answer 1

Answer №1

There are two errors to correct:

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

and

additionalDetail.content[1] does not exist (since 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
});

Answer 2

There are two errors to correct:

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

and

additionalDetail.content[1] does not exist (since 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
});

Answer 3

Answer №2

Loop through the attributes within additionalDetails using either Object.keys, Object.values, or Object.entries.

const item = {
  id: "id2",
  name: "ItemName 2",
  additionalDetails: {
    a1: {
      id: "aa1",
      description: "Description",
      specifications: [{
        id: "s1",
        feature: "Feature 1"
      }]
    },
    a2: {
      id: "aa2",
      description: "Description 2",
      specifications: [{
        id: "s2",
        feature: "Feature 2"
      }]
    }
  }
}

for (const [key, value] of Object.entries(item.additionalDetails)) {
  console.log(`Detail ${key} has description ${value.description}`);
}

Answer 4

Loop through the attributes within additionalDetails using either Object.keys, Object.values, or Object.entries.

const item = {
  id: "id2",
  name: "ItemName 2",
  additionalDetails: {
    a1: {
      id: "aa1",
      description: "Description",
      specifications: [{
        id: "s1",
        feature: "Feature 1"
      }]
    },
    a2: {
      id: "aa2",
      description: "Description 2",
      specifications: [{
        id: "s2",
        feature: "Feature 2"
      }]
    }
  }
}

for (const [key, value] of Object.entries(item.additionalDetails)) {
  console.log(`Detail ${key} has description ${value.description}`);
}

Answer 5

Answer №3

If you want to retrieve the id of an array item, follow these steps:

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

To access the content id, use the following code:

First, specify the index of the array containing the object with the content id:

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

Make sure to define additionalDetails using const as well.

Answer 6

If you want to retrieve the id of an array item, follow these steps:

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

To access the content id, use the following code:

First, specify the index of the array containing the object with the content id:

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

Make sure to define additionalDetails using const as well.

Loop through every item in Typescript

Answer №1

Answer №2

Answer №3

Similar questions

Passing data back from an asynchronous function to its parent function in Node.js

What is the method for determining the number of unique tags on a webpage using JavaScript?

Is it possible to use a server action in Next.js to both retrieve data and refresh the page?

Creating an AJAX data form in a JSP scenario

Is there a way to implement multiple "read more" and "read less" buttons on a single page?

The JavaScript confirm function will provide a false return value

How to optimize the utilization of Javascript variables within a Jquery function?

Combining two items from separate arrays

Query regarding timing in JavaScript

Error in React Native Navigation: Passing parameters is not functioning properly

Tips for accessing the return value from a method outside of its containing function

Tips for refining TypeScript discriminated unions by using discriminators that are only partially known?

Tips for concealing the URL in the address bar while using `<a href>` links

Exploring the power of Vue.js reactivity using Object.defineProperty in a TypeScript environment

Combine iron-page and bind them together

How to dynamically add events to a JQuery FullCalendar using a loop

JavaScript OOP Function call not functioning in IE9

Activate a particular panel within the leftPanel using PDFNet Webviewer

Is it possible to include additional transformations to a div element?

Encountering a 'DiscordAPIError: Unknown interaction' error while attempting to share details about a command