如何删除重复的值；从我的json中_Json_Reactjs_Reduce

如何删除重复的值；从我的json中

json reactjs

如何删除重复的值；从我的json中,json,reactjs,reduce,Json,Reactjs,Reduce,我正在用React开发一个应用程序，我遇到了一个问题。我已经从一个json获取了一个值，并且这些值被重复。我只希望每个值出现一次我希望它只返回“Padre”的每个元素一次：“CRM”、“Permisos”和“Telefonia”。“Hijo”也一样我试着将“.concat”改为“.reduce”，因为我读到它可以这样做，但不起作用。我看过一些例子，但是没有一个是关于“this.state”的，所以我不知道怎么做你能帮我找到正确的方法吗这是我的json文件的一部分 [ {

我正在用React开发一个应用程序，我遇到了一个问题。我已经从一个json获取了一个值，并且这些值被重复。我只希望每个值出现一次

我希望它只返回“Padre”的每个元素一次：“CRM”、“Permisos”和“Telefonia”。“Hijo”也一样

我试着将“.concat”改为“.reduce”，因为我读到它可以这样做，但不起作用。我看过一些例子，但是没有一个是关于“this.state”的，所以我不知道怎么做

你能帮我找到正确的方法吗

这是我的json文件的一部分

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

出于保密原因，我无法显示实际文件。在我的下一个代码中，我更改了假json url的获取

我用@Avanthika和@blaz代码编辑我的代码。目前代码正常，但只显示它找到的第一个值“父”和“子”。我只需要显示一次每个不同的值“父亲”和“儿子”。示例结果：父亲：客户关系管理佩尔米索斯儿子：辩论根

目前，在我的新代码中，我只看到了：CRM（Padre）和Argumentarios（Son）。其余元素未显示

import React, { Component } from 'react';

class Nav extends Component{
    constructor(props){
        super(props)
        this.state = {
            menuSubmenu:[]
        }
    }

    componentWillMount(){
        fetch('http://FAKE.php')
        .then(response => response.json())
        .then(menuSubmenu =>{

            menuSubmenu.forEach(datos => {
                let data = {
                    menu:datos.Padre,
                    submenu:datos.Hijo,
                    id:datos.Id
                }

                //console.log( data )
                //console.log (data.menu);
                this.setState({ 
                    menuSubmenu:this.state.menuSubmenu.concat([data])
                }) 
            })
        })
    }
    render() {
        const array = [...this.state.menuSubmenu];
        const distinctValues = array.filter(
            ({ Padre, Hijo }, index) => {
              return array.findIndex(item => item.Padre === Padre && item.Hijo === Hijo) === index;
          });
          //console.log(this.state.menuSubmenu);
          //console.log(distinctValues);

        if (distinctValues.length > 0) {
          return(
            <div>
              {distinctValues.map(datos => <Navegacion key={datos.id} menu={datos.menu} submenu={datos.submenu} />)}
            </div>
          );
        }
        return (<p>Cargando usuarios...</p>);
      }
}

class Navegacion extends Component{
    render(){
        return (
                     <ul className="list">
                        <li className="list__item">{this.props.menu}
                            <ul className="list">
                                <li className="list__item">
                                    <a href="#">{this.props.submenu}</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
        )
    }
}

export default Nav;

import React，{Component}来自'React'；
类Nav扩展组件{
建造师（道具）{
超级（道具）
此.state={
菜单菜单：[]
}
}
组件willmount（）{
取（'http://FAKE.php')
.then（response=>response.json（））
。然后（菜单菜单=>{
menusubmens.forEach（datos=>{
让数据={
菜单：datos.Padre，
子菜单：datos.Hijo，
id:datos.id
}
//console.log（数据）
//console.log（data.menu）；
这个.setState（{
menuSubmenu:this.state.menuSubmenu.concat（[数据]）
}) 
})
})
}
render（）{
常量数组=[…this.state.menusubmenus]；
常量distinctValues=array.filter(
（{Padre，Hijo}，index）=>{
返回array.findIndex（item=>item.Padre==Padre&&item.Hijo==Hijo）==index；
});
//console.log（this.state.menusubmenus）；
//console.log（distinctValue）；
如果（distinctValues.length>0）{
返回(
{distinctValues.map（datos=>）}
);
}
返回（Cargando usuarios…）；
}
}
类Navegacion扩展组件{
render（）{
返回(

{this.props.menu}






)
}
}
导出默认导航；

此图像是我的json的结果

我希望你能在“减少”功能方面帮助我。

“非常感谢

您好，您可以使用lodash和函数uniqBy

您可以通过Padre和Hijo使用新集合来唯一化数组列表

const数组=[{“Id”：“114”，“Padre”：“CRM”，“Hijo”：“Argumentarios”}，
{“Id”：“115”，“Padre”：“CRM”，“Hijo”：“Argumentarios”}，
{“Id”：“116”，“Padre”：“CRM”，“Hijo”：“Argumentarios”}，
{“Id”：“44”，“Padre”：“Permisos”，“Hijo”：“root”}，
{“Id”：“45”，“Padre”：“Permisos”，“Hijo”：“root”}，
{“Id”：“46”，“Padre”：“Permisos”，“Hijo”：“root”}，
{“Id”：“47”，“Padre”：“Permisos”，“Hijo”：“root”}，
{“Id”：“50”，“Padre”：“Telefonia”，“Hijo”：“Audio”}，
{“Id”：“51”，“Padre”：“Telefonia”，“Hijo”：“Audio”}，
{“Id”：“52”，“Padre”：“Telefonia”，“Hijo”：“Configuracion”}，
{“Id”：“70”，“Padre”：“Telefonia”，“Hijo”：“Rutas”}]；
const distinctValues=Array.from（新集合（Array.map（elem=>`${elem.Padre}-${elem.Hijo}'））.map（distinctVal=>{
常数[Padre，Hijo]=分离（“-”）；
返回({
Id:array.find（elem=>elem.Padre==Padre&&elem.Hijo==Hijo）.Id，
神父，
你好
});
});
console.log（distinctValue）
您可以通过Padre和Hijo使用新集合来唯一化数组列表

const数组=[{“Id”：“114”，“Padre”：“CRM”，“Hijo”：“Argumentarios”}，
{“Id”：“115”，“Padre”：“CRM”，“Hijo”：“Argumentarios”}，
{“Id”：“116”，“Padre”：“CRM”，“Hijo”：“Argumentarios”}，
{“Id”：“44”，“Padre”：“Permisos”，“Hijo”：“root”}，
{“Id”：“45”，“Padre”：“Permisos”，“Hijo”：“root”}，
{“Id”：“46”，“Padre”：“Permisos”，“Hijo”：“root”}，
{“Id”：“47”，“Padre”：“Permisos”，“Hijo”：“root”}，
{“Id”：“50”，“Padre”：“Telefonia”，“Hijo”：“Audio”}，
{“Id”：“51”，“Padre”：“Telefonia”，“Hijo”：“Audio”}，
{“Id”：“52”，“Padre”：“Telefonia”，“Hijo”：“Configuracion”}，
{“Id”：“70”，“Padre”：“Telefonia”，“Hijo”：“Rutas”}]；
const distinctValues=Array.from（新集合（Array.map（elem=>`${elem.Padre}-${elem.Hijo}'））.map（distinctVal=>{
常数[Padre，Hijo]=分离（“-”）；
返回({
Id:array.find（elem=>elem.Padre==Padre&&elem.Hijo==Hijo）.Id，
神父，
你好
});
});
console.log（distinctValue）不起作用，因为在您的数据中，某些项可能具有包含短划线字符（“-”）的Padre
值。请使用一个永远不会出现在Padre
value中的字符作为分隔符，这样做会很好
我的解决方案：
使用Array.prototype.filter

const distinctValues = this.state.menuSubmenu.filter(
  ({ Padre, Hijo }, index) => {
    return this.state.menuSubmenu.findIndex(item => item.Padre === Padre && item.Hijo === Hijo) === index;
});

使用Array.prototype.reduce
它将看起来更笨重：
const distinctValues = this.state.menuSubmenu.reduce(
  (array, item) => {
    if (array.findIndex(i => i.Padre === item.Padre && i.Hijo === item.Hijo) === -1) {
      array.push(item);
    }
}, []);

不起作用，因为在您的数据中，某些项可能具有包含短划线字符（“-”）的Padre
值。请使用一个永远不会出现在Padre
value中的字符作为分隔符，这样做会很好
我的解决方案：
使用Array.prototype.filter

const distinctValues = this.state.menuSubmenu.filter(
  ({ Padre, Hijo }, index) => {
    return this.state.menuSubmenu.findIndex(item => item.Padre === Padre && item.Hijo === Hijo) === index;
});

使用Array.prototype.reduce
它将看起来更笨重：
const distinctValues = this.state.menuSubmenu.reduce(
  (array, item) => {
    if (array.findIndex(i => i.Padre === item.Padre && i.Hijo === item.Hijo) === -1) {
      array.push(item);
    }
}, []);

当你说“值重复”时，你的意思是重复的ID