CODEWITHSUNDEEP
javascriptarrays
Cemmallow
Cemmallow

Reputation: 1

Map through nested array objects

I have an array which returns these values:

0: {Carat: '7,02', Clarity: 'VS1', Color: 'E', Crwn angle: '34,50', Crwn depth%: '15,00', …}
1: {Carat: '5,33', Clarity: 'VS1', Color: 'G', Crwn angle: '35,80', Crwn depth%: '15,50', …}
2: {Carat: '4,52', Clarity: 'VVS2', Color: 'D', Crwn angle: '0,00', Crwn depth%: '0,00', …}

I am trying to map through these objects to display the properties i.e. Carat:

{Array.map((diamond) => (
   <div
    key={diamond.carat}
    className="relative flex flex-col overflow-hidden bg-white border border-gray-200 rounded-lg hover:shadow-sm group"
    >

Unfortunately, my screen stays empty. What am I doing wrong?

Upvotes: 0

Views: 47

Answers (3)

A1exandr Belan
A1exandr Belan

Reputation: 4780

For example, if you have an array of data, like this:

dataArr = [
  {Carat: '7,02', Clarity: 'VS1', Color: 'E', "Crwn angle": '34,50', "Crwn depth%": '15,00'},
  {Carat: '5,33', Clarity: 'VS1', Color: 'G', "Crwn angle": '35,80', "Crwn depth%": '15,50'},
  {Carat: '4,52', Clarity: 'VVS2', Color: 'D', "Crwn angle": '0,00', "Crwn depth%": '0,00'},
];

You can map Carat to caratList:

const caratList = dataArr.map(({ Carat }) =>
  <li>{Carat}</li>
);

And render it in browser:

<ul>{caratList}</ul>

Upvotes: 0

Joshua Mark Furtado
Joshua Mark Furtado

Reputation: 201

You should check for diamond.Carat or diamond['Carat'] instead of diamond.carat.

Note that in your object example, all the key names start with a capital letter, but in your snippet, the 'c' is lowercase.

Always check your variable cases. ;)

Upvotes: 1

conradQQ
conradQQ

Reputation: 86

Not sure exactly what you're trying to do, if you elaborate further maybe I could help. If you just want to print out the property names and their values you could do something like this...

const testObj = {
 Carat: '7,02', 
 Clarity: 'VS1', 
 Color: 'E', 
 Crwnangle: '34,50', 
 Crwndepth: '15,00'
}

const items = Object.entries(testObj);

for (item of items) {
 console.log(item);
}

If you post the complete JS file I'll have more context and will probably be able to produce a more useful solution.

Upvotes: 1

Related Questions