How to iterate an object of objects and print key and again iterate the value which is an array?

I have an object which I need to iterate and print the keys and again iterate the values which is an array. Below is the sample object.

{
"Product Details": [
    {
        "attribute_code": "type2",
        "label": "Variant / Model",
        "value": "100 4jet Vario"
    }
],
"_General": [
    {
        "attribute_code": "designer",
        "label": "Design by",
        "value": "Hansgrohe"
    },
    {
        "attribute_code": "delivery_time",
        "label": "Delivery Time",
        "value": "on stock"
    }
],
"_Characteristics": [
    {
        "attribute_code": "shape_outside",
        "label": "Shape",
        "value": "round"
    },
    {
        "attribute_code": "water_heater",
        "label": "Water heater",
        "value": "suitable for instantaneous water heaters"
    }
],
"_Color-Material-Surface": [
    {
        "attribute_code": "material",
        "label": "Material",
        "value": "metal / plastic"
    }
]

}

I am displaying the values in an accordion where the object key eg. "Product details" is accordion heading and inside the accordion the content is the value of the array which I need to map and display. Also these keys "Product details", "_General" are dynamic and will not be the same. Below is a screenshot how I want it to be displayed.

You can use Object.entries() to iterate the object, it returns array of key-value pairs. As per your json data you can create component like this:

import React, { useState } from 'react';
const Accordion = ({ title, data }) => {
const [isExpanded, setExpanded] = useState(false);
const onClickHeading = () => setExpanded(!isExpanded);
return (
<div>
<h6 onClick={onClickHeading}>{title}</h6>
{isExpanded && (
<div>
<ul>
{data.map((item, index) => (
<li key={'accordion-body-' + index}>
{item.attribute_code} - {item.label} - {item.value}
</li>
))}
</ul>
</div>
)}
</div>
);
};
const App = () => {
const accordionData = {
'Product Details': [
{ attribute_code: 'type2', label: 'Variant / Model', value: '100 4jet Vario' },
],
'_General': [
{ attribute_code: 'designer', label: 'Design by', value: 'Hansgrohe' },
{ attribute_code: 'delivery_time', label: 'Delivery Time', value: 'on stock' },
],
'_Characteristics': [
{ attribute_code: 'shape_outside', label: 'Shape', value: 'round' },
{
attribute_code: 'water_heater',
label: 'Water heater',
value: 'suitable for instantaneous water heaters',
},
],
'_Color-Material-Surface': [
{ attribute_code: 'material', label: 'Material', value: 'metal / plastic' },
],
};
return (
<div>
{Object.entries(accordionData).map(([title, data], index) => (
<Accordion key={'accordion-' + index} title={title} data={data} />
))}
</div>
);
};
export default App;