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

Jest testing in a Vue child component is failing due to the presence of lodash

Error in Jquery click function not being triggered

Ways to adjust .keyup based on the presence of a variable

Using Express in Node.js to send a GET request to a different server from a Node route

Execute Cheerio selector once the page has finished loading

Is there a way to assign API data as inner HTML using Lit?

Displaying the loading image only on the first result within a while loop

Managing the challenges of handling numerous AJAX post errors stemming from multiple form submissions

"Unexpected Type Inference Issue: A variable initially defined as a string inexplicably transforms into 'undefined'

A guide on utilizing Socket.io to efficiently transfer data to a specific client within a designated chat room

A guide to building your own live HTML editing tool

Skipping certain key-value pairs during the conversion from JSON to Excel Worksheet using the XLSX library in JavaScript

Can jQuery be used to change the functionality of a submit button, such as toggling between show, hide, and submit options?

Discover the process for simulating a browser zoom using JavaScript

Label dynamically generated from user input for radio button option

Encountered an error message stating 'Unexpected Token <' while attempting to launch the node server

Angular: No routes found that match the URL segment

What is the correct way to integrate a HTML/CSS/JS theme into a Vue project effectively?

Deactivating and activating an HTML input button

Receive a response in fragments from express on the browser