Итерация через вложенный объект в Reactjs?

Question

Я - нуб Reactjs, и у меня есть объект со структурой ниже. В моем функциональном компоненте я хотел бы использовать самый современный подход для перебора ключей на верхнем уровне в иерархии объектов (т. Е. A, B, C) и отображать значение, связанное с ключами 'name'.

data. json

  {
  "A": {
    "name": "AA",
    "type": "AB",
    "values": [
      ["AC", "AD", "AE"],
      ["AF", "AG", "AH"]
    ]
  },
  "B": {
    "name": "BA",
    "type": "BB",
    "values": [
      ["BC", "BD", "BE"],
      ["BF", "BG", "BH"]
    ]
  },
  "C": {
    "name": "CA",
    "type": "CB",
    "values": [
      ["CC", "CD", "CE"],
      ["CF", "CG", "CH"]
    ]
  }
}

Мой желаемый результат - отобразить на экране следующее:

A - AA
B - BA
C - CA

Я пытался сделать это используя функцию карты, но позже я прочитал, что карта работает только с массивами, а не с объектами? Я также попробовал этот ответ: { ссылка }, но осознавая, что (а) я не смог заставить его работать в моем случае, возможно, потому что мой объект немного сложнее, и я ' Я новичок в этом, и (б) было несколько обновлений, которые заставляют меня задуматься, есть ли сейчас еще лучший подход?

Вот упрощенная версия моего функционального компонента.

FunctionalComponent. js

import React from 'react';
import Data from './data.json'; //See above for content of this json file
const data= Data; //not sure if this is necessary?!

    function Loop(){
    <form>
        return(
        //This is where I want to start my loop and dynamically populate
            <div>{data.A.name} - {data.A.name}</div>
        //This is where I want to end the loop
        );
        </form>
    }
    export default Loop;

Любая помощь в достижении желаемого результата будет высоко ценится.

Большое спасибо,

Kat ie

Answer 1

Смотрите это ..

Все объекты в JavaScript, очень хорошо могут рассматриваться как массивы. В вашем случае, когда вы используете Object.keys () или Object.values ​​() , он будет возвращать только ключи или значения ... но не оба ..

Поэтому используйте Object.entries ()

https://codesandbox.io/s/object-represented-as-array-zgiob

Answer 2

Попробуйте это-

    class TestApp extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            items: {
                "A": {
                    "name": "AA",
                    "type": "AB",
                    "values": [
                        ["AC", "AD", "AE"],
                        ["AF", "AG", "AH"]
                    ]
                },
                "B": {
                    "name": "BA",
                    "type": "BB",
                    "values": [
                        ["BC", "BD", "BE"],
                        ["BF", "BG", "BH"]
                    ]
                },
                "C": {
                    "name": "CA",
                    "type": "CB",
                    "values": [
                        ["CC", "CD", "CE"],
                        ["CF", "CG", "CH"]
                    ]
                }
            }
        }
    }

    render() {
        return (
            <React.Fragment>
                {this.state.items
                    && Object.keys(this.state.items).map((key, i) =>
                        <div>{key}-{this.state.items[key].name}</div>
                    )}
            </React.Fragment>
        )
    }
}

ReactDOM.render(<TestApp />, document.querySelector("#app"))

https://jsfiddle.net/anupdg/0kv5erqd/7/