Question 231029 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – how to correctly get data from object

i have array with objects like this:

{
    tab: "Quality Assurance",
    value: "qa",
    titles: [
      "Web App Interfaces3",
      "Backend Application Development",
      "Single-page Apps",
      "Technical Backend Audit",
    ],
    content: [
      "3We build web apps and websites with clean architecture and user-friendly interfaces.",
      "We build web apps and websites with clean architecture and user-friendly interfaces.",
      "We build web apps and websites with clean architecture and user-friendly interfaces.",
      "We build web apps and websites with clean architecture and user-friendly interfaces.",
    ],
}

and i want to iterate through this array and get next output:

"Web App Interfaces3"
"3We build web apps and websites with clean architecture and user-friendly interfaces."

"Backend Application Development",
"We build web apps and websites with clean architecture and user-friendly interfaces."

i.e first element from titles and first element from content and so on

i tried this but it’s not what i need

{data.map((tab, index) => (
  {tab.titles.map((title) => {
    return <h4 key={index}>{title}</h4>;
  })}
  {tab.content.map((text) => {
    return <p key={index}>{text}</p>;  
  })}
))}
Tags:

2

Answers


  1. 0

    Try this

    {data.map((tab) => (
  tab.titles.map((title, index) => (
    <div key={index}>
      <h4>{title}</h4>
      <p>{tab.content[index]}</p>
    </div>
  ))
))}
    Login or Signup to reply.
  2. 0

    In a pure JavaScript way, you can simply achieve this via Array.forEach() method. I am assuming both titles and content array have same length.

    Live Demo :

    const arr = [{
    tab: "Quality Assurance",
    value: "qa",
    titles: [
      "Web App Interfaces3",
      "Backend Application Development",
      "Single-page Apps",
      "Technical Backend Audit",
    ],
    content: [
      "3We build web apps and websites with clean architecture and user-friendly interfaces.",
      "We build web apps and websites with clean architecture and user-friendly interfaces.",
      "We build web apps and websites with clean architecture and user-friendly interfaces.",
      "We build web apps and websites with clean architecture and user-friendly interfaces.",
    ]
}];

arr.forEach(({ titles, content }) => {
    if (titles.length !== content.length) {
    return;
  }
  titles.forEach((elem, index) => {
    console.log(`${elem} - ${content[index]}`)
  })
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search