JS transform deeply nested array of objects at the top level with renaming

Question

I would like to simplify this nested array of objects move some items at the top level with a new property name. Given this data:

let data = [
      {
        "id": 1001,
        "model": "Lemon",
        "length": "4",
        "details": [
          {
            "id": 38,
            "kind": "D",
            "color": "Gray",
            "specifics": {
              "id": 3
            }
          }
        ]
      },
      {
        "id": 1002,
        "model": "Botanica",
        "length": "2",
        "details": [
          {
            "id": 39,
            "kind": "A",
            "color": "Yellow",
            "specifics": {
              "id": 1
            }
          },
          {
            "id": 40,
            "kind": "B",
            "color": "Green",
            "specifics": {
              "id": 2
            }
          },
        ]
      }
    ];

My desired output:

    [
      {
        "id": 3,
        "model": "Lemon",
        "color": "Gray",
      },
      {
        "id": 1,
        "model": "Botanica",
        "color": "Yellow",
      },
      {
        "id": 2,
        "model": "Botanica",
        "color": "Green",
      }
    ]

Or much better to combine the model and color:

[
  {
    "id": 3,
    "model": "Lemon - Gray"
  },
  {
    "id": 1,
    "model": "Botanica - Yellow"
  },
  {
    "id": 2,
    "model": "Botanica - Green"
  }
]

If there are multiple specifics, it would also create a new object together with the model and color, then it would move at the top. Here's what I've tried so far:

const result = data.map(({ details, ...d }) => ({
  ...d,
  data: details.map(({ specifics, ...s }) => ({
    ...r,
    id: specifics.id
  }))
}));

But it seems that I can't get the right result. How to simplify this one? Thanks.

Answer 1

First, we need to loop through the data array. We can get the model from the data element namely item. Then we need to loop through that item.details array. From that we can get id, detail.color. Hers's the full code.

let data = [
      {
        "id": 1001,
        "model": "Lemon",
        "length": "4",
        "details": [
          {
            "id": 38,
            "kind": "D",
            "color": "Gray",
            "specifics": {
              "id": 3
            }
          }
        ]
      },
      {
        "id": 1002,
        "model": "Botanica",
        "length": "2",
        "details": [
          {
            "id": 39,
            "kind": "A",
            "color": "Yellow",
            "specifics": {
              "id": 1
            }
          },
          {
            "id": 40,
            "kind": "B",
            "color": "Green",
            "specifics": {
              "id": 2
            }
          },
        ]
      }
    ];

const result = data.reduce((result, item) => {
  return [...result, ...item.details.map((detail) => {
    return {
      id: detail.specifics.id,
      model: item.model + " - " + detail.color
    }
  } )]
}, []);

console.log(result);