如何迭代一个对象内的对象并打印键，然后再迭代值（该值是一个数组）？

huangapple
go评论104阅读模式
英文:

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

问题

{
"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 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.

  1. {
  2. "Product Details": [
  3.     {
  4.         "attribute_code": "type2",
  5.         "label": "Variant / Model",
  6.         "value": "100 4jet Vario"
  7.     }
  8. ],
  9. "_General": [
  10.     {
  11.         "attribute_code": "designer",
  12.         "label": "Design by",
  13.         "value": "Hansgrohe"
  14.     },
  15.     {
  16.         "attribute_code": "delivery_time",
  17.         "label": "Delivery Time",
  18.         "value": "on stock"
  19.     }
  20. ],
  21. "_Characteristics": [
  22.     {
  23.         "attribute_code": "shape_outside",
  24.         "label": "Shape",
  25.         "value": "round"
  26.     },
  27.     {
  28.         "attribute_code": "water_heater",
  29.         "label": "Water heater",
  30.         "value": "suitable for instantaneous water heaters"
  31.     }
  32. ],
  33. "_Color-Material-Surface": [
  34.     {
  35.         "attribute_code": "material",
  36.         "label": "Material",
  37.         "value": "metal / plastic"
  38.     }
  39. ]

}

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.
如何迭代一个对象内的对象并打印键，然后再迭代值（该值是一个数组）？

答案1

得分: 2

你可以使用 Object.entries() 来迭代对象，它会返回 键-值 对的数组。根据你的 JSON 数据，你可以创建如下组件：

  1. import React, { useState } from 'react';
  3. const Accordion = ({ title, data }) => {
  4.   const [isExpanded, setExpanded] = useState(false);
  6.   const onClickHeading = () => setExpanded(!isExpanded);
  8.   return (
  9.     <div>
  10.       <h6 onClick={onClickHeading}>{title}</h6>
  11.       {isExpanded && (
  12.         <div>
  13.           <ul>
  14.             {data.map((item, index) => (
  15.               <li key={'accordion-body-' + index}>
  16.                 {item.attribute_code} - {item.label} - {item.value}
  17.               </li>
  18.             ))}
  19.           </ul>
  20.         </div>
  21.       )}
  22.     </div>
  23.   );
  24. };
  26. const App = () => {
  27.   const accordionData = {
  28.     'Product Details': [
  29.       { attribute_code: 'type2', label: 'Variant / Model', value: '100 4jet Vario' },
  30.     ],
  31.     '_General': [
  32.       { attribute_code: 'designer', label: 'Design by', value: 'Hansgrohe' },
  33.       { attribute_code: 'delivery_time', label: 'Delivery Time', value: 'on stock' },
  34.     ],
  35.     '_Characteristics': [
  36.       { attribute_code: 'shape_outside', label: 'Shape', value: 'round' },
  37.       {
  38.         attribute_code: 'water_heater',
  39.         label: 'Water heater',
  40.         value: 'suitable for instantaneous water heaters',
  41.       },
  42.     ],
  43.     '_Color-Material-Surface': [
  44.       { attribute_code: 'material', label: 'Material', value: 'metal / plastic' },
  45.     ],
  46.   };
  48.   return (
  49.     <div>
  50.       {Object.entries(accordionData).map(([title, data], index) => (
  51.         <Accordion key={'accordion-' + index} title={title} data={data} />
  52.       ))}
  53.     </div>
  54.   );
  55. };
  57. export default App;
英文:

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:

  1. import React, { useState } from &#39;react&#39;;
  2. const Accordion = ({ title, data }) =&gt; {
  3. const [isExpanded, setExpanded] = useState(false);
  4. const onClickHeading = () =&gt; setExpanded(!isExpanded);
  5. return (
  6. &lt;div&gt;
  7. &lt;h6 onClick={onClickHeading}&gt;{title}&lt;/h6&gt;
  8. {isExpanded &amp;&amp; (
  9. &lt;div&gt;
  10. &lt;ul&gt;
  11. {data.map((item, index) =&gt; (
  12. &lt;li key={&#39;accordion-body-&#39; + index}&gt;
  13. {item.attribute_code} - {item.label} - {item.value}
  14. &lt;/li&gt;
  15. ))}
  16. &lt;/ul&gt;
  17. &lt;/div&gt;
  18. )}
  19. &lt;/div&gt;
  20. );
  21. };
  22. const App = () =&gt; {
  23. const accordionData = {
  24. &#39;Product Details&#39;: [
  25. { attribute_code: &#39;type2&#39;, label: &#39;Variant / Model&#39;, value: &#39;100 4jet Vario&#39; },
  26. ],
  27. &#39;_General&#39;: [
  28. { attribute_code: &#39;designer&#39;, label: &#39;Design by&#39;, value: &#39;Hansgrohe&#39; },
  29. { attribute_code: &#39;delivery_time&#39;, label: &#39;Delivery Time&#39;, value: &#39;on stock&#39; },
  30. ],
  31. &#39;_Characteristics&#39;: [
  32. { attribute_code: &#39;shape_outside&#39;, label: &#39;Shape&#39;, value: &#39;round&#39; },
  33. {
  34. attribute_code: &#39;water_heater&#39;,
  35. label: &#39;Water heater&#39;,
  36. value: &#39;suitable for instantaneous water heaters&#39;,
  37. },
  38. ],
  39. &#39;_Color-Material-Surface&#39;: [
  40. { attribute_code: &#39;material&#39;, label: &#39;Material&#39;, value: &#39;metal / plastic&#39; },
  41. ],
  42. };
  43. return (
  44. &lt;div&gt;
  45. {Object.entries(accordionData).map(([title, data], index) =&gt; (
  46. &lt;Accordion key={&#39;accordion-&#39; + index} title={title} data={data} /&gt;
  47. ))}
  48. &lt;/div&gt;
  49. );
  50. };
  51. export default App;

huangapple
  • 本文由 发表于 2023年7月6日 13:47:20
  • 转载请务必保留本文链接：https://go.coder-hub.com/76625839.html
  • javascript
  • json
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定