时间戳

首页 > 解决方案 > 从 React 中的父 JSON 数据中获取所有子节点

javascript - 从 React 中的父 JSON 数据中获取所有子节点

问题描述

这是我的 json 数据的示例

[
   {
      "Id":"114",
      "Padre":"CRM",
      "Hijo":"Argumentarios"
   },
   {
      "Id":"115",
      "Padre":"CRM",
      "Hijo":"Argumentarios"
   },
      "Id":"44",
      "Padre":"Permisos",
      "Hijo":"root"
   },
   {
      "Id":"45",
      "Padre":"Permisos",
      "Hijo":"root"
   },
   {
      "Id":"50",
      "Padre":"Telefonia",
      "Hijo":"Audio"
   },
   {
      "Id":"52",
      "Padre":"Telefonia",
      "Hijo":"Configuracion"
   },
   {
      "Id":"70",
      "Padre":"Telefonia",
      "Hijo":"Rutas"
   }
]

到目前为止，我已经在console.log中获得了以下数据：

(3) [{…}, {…}, {…}]
0: {Padre: "CRM", Hijo: "Argumentarios", Description: "SALUD NORMAL", Id: "114"}
1: {Padre: "Permisos", Hijo: "root", Description: "Usuarios", Id: "44"}
2: {Padre: "Telefonia", Hijo: "Audio", Description: "Locuciones", Id: "50"}

我需要显示每个父元素的所有子元素。我正在创建一个菜单，我希望出现与每个父级关联的子菜单。我希望孩子们不要重复出现。在我的 json 父母中，它是 Padre，而 Child 是 Hijo（西班牙语）。这是我的原始代码：

    componentWillMount(){
        fetch('fake-son.php')
        .then(response => response.json())
        .then(menuSubmenu =>{

            const result = [];
            const map = new Map();
            for (const item of menuSubmenu) {
                if(!map.has(item.Padre)){
                    map.set(item.Padre, true);    // set any value to Map

                    result.push({
                        Padre: item.Padre,
                        Hijo: item.Hijo,
                        Description: item.Description,
                        Id:item.Id
                    });
                }
            }
                this.setState({ 
                    menuSubmenu:this.state.menuSubmenu.concat(result)
                })

            console.log(result);         

        })
    }

你能帮我向所有的孩子展示他们的父亲吗？非常感谢

标签： javascriptjsonreactjs

解决方案

您可以使用 array.reduce 来创建这样的关系，

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      parentList: []
    };
  }

  componentDidMount() {
    //call your rest api here...
    const list = [{
        "Id": "114",
        "Padre": "CRM",
        "Hijo": "Argumentarios"
      },
      {
        "Id": "115",
        "Padre": "CRM",
        "Hijo": "Argumentarios"
      },
      {
        "Id": "44",
        "Padre": "Permisos",
        "Hijo": "root"
      },
      {
        "Id": "45",
        "Padre": "Permisos",
        "Hijo": "root"
      },
      {
        "Id": "50",
        "Padre": "Telefonia",
        "Hijo": "Audio"
      },
      {
        "Id": "52",
        "Padre": "Telefonia",
        "Hijo": "Configuracion"
      },
      {
        "Id": "70",
        "Padre": "Telefonia",
        "Hijo": "Rutas"
      }
    ];
    
    const PadreMap = list.reduce((acc, obj) => {
      if (!acc[obj.Padre]) {
        acc[obj.Padre] = {
          ...obj,
          Hijo: [obj.Hijo]
        };
      } else {
        !acc[obj.Padre].Hijo.includes(obj.Hijo) && acc[obj.Padre].Hijo.push(obj.Hijo)
      }
      return acc;
    }, {});
    
    this.setState({parentList: Object.keys(PadreMap).map((padre) => ({
      name: padre,
      children: PadreMap[padre].Hijo
    }))})
  }

  render() {
    return <div >{
      this.state.parentList.map(parent => <ul>{parent.name}:
      {parent.children.map(hijo => <li>{hijo}</li>)}
      </ul>)
    }< /div>
  }
}

ReactDOM.render( < Demo / > , document.getElementById('app'));
li{
  margin-left: 30px
}
<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="app"></div>

推荐阅读