Table header and field problem from JSON

[kilokalas]

I have a JSON file I need to put into a table. I have inserted the table body but the weird part is the title repeats more times instead of being one time.

0: {dogId: 100, dogBreed: 'Beagles' , dogCountry: 'USA'}

1: {dogId:200, dogBreed: 'GermanSheperd', dogCountry: 'Germany'}

2: {dogId:300, dogBreed:'Dalmation', dogCountry:'Russia'}

...it goes on until 100 index. My goal is to have dogId , dogBreed and dogCountry as headers/title for the table and fill their respective values from the JSON.

{dogData.map ((col,index)=>(

<Column
field = {Object.values(Object.keys(col)[index]}
header = {Object.keys(col)[index]}
></Column>

))}



But my code shows , using map function, I get the 3 headers and their values as row, but also another 97 headers with no values in the table. Is there any way to remove the other 97 undefined headers and empty fields from displaying in my table.

[Melloware]

I would not do what you are doing. Just follow the PrimeReact Showcase examples of how to build a table from JSON rows.