Printing values from a deeply nested object as an array using 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 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);