使用 JavaScript 将深度嵌套对象中的值打印为数组

Question

I have the following object and I am trying to create a function that prints the result as an array that contains only the nested 'rgba' values as an array:

const colorObject = {
  "colors": [
    {
      "color": "black",
      "category": "hue",
      "type": "primary",
      "code": {
      "rgba": [255, 255, 255, 1]
    }
    },
    {
      "color": "white",
      "category": "value",
      "code": {
      "rgba": [0, 0, 0, 1]
    }
    },
    {
      "color": "red",
      "category": "hue",
      "type": "primary",
      "code": {
      "rgba": [255, 0, 0, 1]
    }
    },
    {
      "color": "blue",
      "category": "hue",
      "type": "primary",
      "code": {
      "rgba": [0, 0, 255, 1]
    }
    },
    {
      "color": "yellow",
      "category": "hue",
      "type": "primary",
      "code": {
      "rgba": [255, 255, 0, 1]
    }
    },
      {
        "color": "green",
        "category": "hue",
        "type": "secondary",
        "code": {
        "rgba": [0, 255, 0, 1]
      }
    },
  ]
}

So far, I have gone the long route and produced the result, but I know that there must be a more efficient way:

function dispArrayRgbaCode() {
  let arrayRgbaCode = [
    colorObject['colors'][0]['code']['rgba'], 
    colorObject['colors'][1]['code']['rgba'], 
    colorObject['colors'][2]['code']['rgba'], 
    colorObject['colors'][3]['code']['rgba'], 
    colorObject['colors'][4]['code']['rgba'], 
    colorObject['colors'][5]['code']['rgba'], 
  ]
  console.log(arrayRgbaCode)
}

dispArrayRgbaCode()

I am brand new and have checked out working with objects in the MDN docs. I figured that asking the community would behoove me so I can learn from peers as well. Any guidance would be greatly appreciated.

Answer 1

You can use Array.map to extract the rgba values from each object in the colorObject.colors array and return an array of them:

colorObject.colors.map(c => c.code.rgba)

Demo:

 const colorObject = { "colors": [{ "color": "black", "category": "hue", "type": "primary", "code": { "rgba": [255, 255, 255, 1] } }, { "color": "white", "category": "value", "code": { "rgba": [0, 0, 0, 1] } }, { "color": "red", "category": "hue", "type": "primary", "code": { "rgba": [255, 0, 0, 1] } }, { "color": "blue", "category": "hue", "type": "primary", "code": { "rgba": [0, 0, 255, 1] } }, { "color": "yellow", "category": "hue", "type": "primary", "code": { "rgba": [255, 255, 0, 1] } }, { "color": "green", "category": "hue", "type": "secondary", "code": { "rgba": [0, 255, 0, 1] } }, ] } console.log(colorObject.colors.map(c => c.code.rgba));

Answer 2

you can use Mapper and achieve this as below..

 const colorObject = { "colors": [{ "color": "black", "category": "hue", "type": "primary", "code": { "rgba": [255, 255, 255, 1] } }, { "color": "white", "category": "value", "code": { "rgba": [0, 0, 0, 1] } }, { "color": "red", "category": "hue", "type": "primary", "code": { "rgba": [255, 0, 0, 1] } }, { "color": "blue", "category": "hue", "type": "primary", "code": { "rgba": [0, 0, 255, 1] } }, { "color": "yellow", "category": "hue", "type": "primary", "code": { "rgba": [255, 255, 0, 1] } }, { "color": "green", "category": "hue", "type": "secondary", "code": { "rgba": [0, 255, 0, 1] } }, ] }; var newRgbaArray = colorObject.colors.map(function(rgbaItem) { return rgbaItem.code.rgba; }); console.log(newRgbaArray);