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.

Nick · Accepted Answer · 2020-09-25 00:13:08Z

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));

answered Sep 25, 2020 at 0:13

Nick

147k23 gold badges67 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tepe3 Over a year ago

wow, it amazes me how many functions are built it to turn a page of code into a line. I am going to play around with the map feature. Thanks for you help!

Nick Over a year ago

@Tepe3 indeed - the downside is that some of them can make your code almost unreadable! :-) but this particular case is clear and easy to see what is going on.

harishprodduturi · Accepted Answer · 2020-09-25 02:23:17Z

0

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);

answered Sep 25, 2020 at 2:23

harishprodduturi

462 bronze badges

1 Comment

Tepe3 Over a year ago

Thank you for the guidance. I see that there are many ways to apply the map feature. I will explore the nested data and see how else I can apply this technique in the future!

Collectives™ on Stack Overflow

Printing values from a deeply nested object as an array using JavaScript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related