Блог

https://codepen.io/itsjustcarlos/pen/OJNqWqv

Я пытаюсь отобразить объект JSON в <div> списке, json выглядит следующим образом:

 const build = {
"brand":[
  {"label":"brand","value":360000022888}
],
"status":[
  {"label":"New","value":"new"},
          {"label":"Open","value":"open"}
 ],
"assigned":[
  {"label":"assigned","value":true}
],
"language":[
  {"label":"English, American","value":"en"},
{"label":"Traditional Chinese","value":"zh-tw"}
],
"priority_level":[
  {"label":"Low","value":"low"}
]
}
  

Я пытаюсь использовать Object.entries для циклического их отображения, я могу утешить.регистрируйте значения, однако они не отображаются на странице

 return (
<div>
 {
   Object.entries(build).map((key, value) => { 
   {console.log(key[0])}
  <>
   <div className =''>{key[0]}</div>
   {
      
        value[1]?.map((row, i) => (
        <>
         <div className ='w-3/4 text-sm text-gray-600 bg-gray-900 border-b border-black '> 
            {row.label} 
         </div>
         ))
         </>
       }

 </>
})
} 
</div>
 )
  

Object.entries() возвращает пару [ключ, значение]. Используйте деструктурирование, чтобы получить их при отображении.

Пример:

 Object.entries(build).map(([key, values]) => ...)
  

 const F = React.Fragment // the snippet doesn't support <></>

const Demo = ({ build }) => (
  <div>
    {Object.entries(build)
      .map(([key, values]) => (
        <F>
          <div className="key">{key}</div>
          {values.map(row => (
            <div key={row.label}>{row.label}</div>
          ))}
        </F>
      ))
    }
  </div>
)


const build = {"brand":[{"label":"brand","value":360000022888}],"status":[{"label":"New","value":"new"},{"label":"Open","value":"open"}],"assigned":[{"label":"assigned","value":true}],"language":[{"label":"English, American","value":"en"},{"label":"Traditional Chinese","value":"zh-tw"}],"priority_level":[{"label":"Low","value":"low"}]}

ReactDOM.render(
  <Demo build={build} />,
  demo
)  

 .key {
  color: red;
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="demo"></div>  

Если вы проверите следующий результат на консоли, вы увидите, что он отображает все метки в Array string значениях:

 const build = {"brand":[{"label":"brand","value":360000022888}],"status":[{"label":"New","value":"new"},{"label":"Open","value":"open"}],"assigned":[{"label":"assigned","value":true}],"language":[{"label":"English, American","value":"en"},{"label":"Traditional Chinese","value":"zh-tw"}],"priority_level":[{"label":"Low","value":"low"}]}
const result = Object.entries(build)
                     .map((key, value) => key[0])

console.log(result);  

На основе этого вы можете использовать .map() для отображения элементов JSX в вашем компоненте:

 return <>
  <h1>Labels:</h1>
  <div>
    {
       result.map((label, index) => 
        <div key={index}> 
            {label} 
        </div>
       )
    }
  </div>
</>
  

В отображаемых <div> элементах вы можете видеть index атрибут, и его назначение — устранить предупреждение от React . Подробнее о списке и ключах читайте в документации.

использовал norbitrial в качестве отправной точки и понял это

 const values = Object.values(build)
                 .map((key, value) => key)


return (
  <div>

{ result.map((label, index) => 
    <div key={label}> 
        {label} 
    </div>)}
  
  { values.map((label, index) => 
  label.map((entry, i) => 
   <div>{entry.label}</div>
           
           )
  
           
           )}