how can i map through this array object properly in reactjs?

Question

const demo = [
  {
    a: "message",
    b: "another message",
    c: [{ ab: "inner message", cd: "another inner message" }, { ab: "inner message" ,cd: "another inner message" }],
  },
];

const maping = demo.map((i) => {
  return i.c.map((j)=>{return j.ab});
});
console.log(maping);

All I want to get an array object like this:

[ {ab: "inner message"},{ab: "inner message" } ],

Instead I'm getting:

[ [ {ab: "inner message"},{ab: "inner message" } ] ]

Answer 1

There is some way to get the structure you want:

 const demo = [ { a: "message", b: "another message", c: [{ ab: "inner message", cd: "another inner message" }, { ab: "inner message",cd: "another inner message" }], }, ]; const mapping1 = demo.map(i => { return i.c.map(j => ({ab: j.ab})); }).flat(); console.log("mapping1", mapping1); const mapping2 = demo.reduce((r, i) => { return r.concat(i.c.map(j => ({ab: j.ab}))) }, []); console.log("mapping2", mapping2);

ref:

• Array.prototype.flat()
• Array.prototype.reduce()