Map through nested array objects-CodePudding

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?

CodePudding user response：

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.

CodePudding user response：

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