Как я могу удалить повторяющиеся значения из моего JSON в React - PullRequest
Новая
       16

Как я могу удалить повторяющиеся значения из моего JSON в React

0 голосов
/ 25 апреля 2019

Я разрабатываю приложение с помощью React, и у меня возникла проблема. Я сделал выборку из JSON, и значения повторяются. Я хочу, чтобы только каждое значение появлялось один раз.

Я надеюсь, что он возвращает только один раз каждый из элементов "Padre": "CRM", "Permisos" и "Telefonia". То же самое для "Хиджо".

Я пытался изменить ".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 PERMISOS Сын: ARGUMENTARIOS ROOT

В настоящее время, с моим новым кодом я вижу только: 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;

Это изображение является результатом моего json. Мой результат json

Я надеюсь, что вы можете помочь мне с функцией "уменьшить". Большое спасибо!

Ответы [ 3 ]

1 голос
/ 25 апреля 2019
  1. Вы можете использовать новый Set для уникального списка массивов Падре и Хиджо. 

const array = [{"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(new Set(array.map(elem => `${elem.Padre}-${elem.Hijo}`))).map(distinctVal => {
  const [ Padre, Hijo ] = distinctVal.split("-");
  return ({
    Id: array.find(elem => elem.Padre === Padre && elem.Hijo === Hijo).Id,
    Padre,
    Hijo
  });
});
console.log(distinctValues);
Или вы можете использовать lodash, как уже упоминалось, для извлечения уникальных значений.Вы должны использовать uniqBy. 

const array = [{"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 distintValues = _.uniqBy(array, elem => [elem.Padre, elem.Padre].join());

console.log(distintValues);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

Необходимо исправить решение следующим образом: 

render() {
  const array = [...this.state.menuSubmenu];
  // Put the solution you like here.
  // const distinctValues = the solution you like
  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>);
}
1 голос
/ 25 апреля 2019

Привет, вы можете использовать lodash и функцию uniqBy https://lodash.com/docs#uniqBy

_.uniqBy(menuSubmenu, function (e) {
  return e.Padre;
});
0 голосов
/ 26 апреля 2019

Оригинальное решение от Avanthika не работает, потому что в ваших данных, возможно, какой-то элемент может иметь значение Padre, содержащее символ тире ("-"). Вместо этого используйте символ, который никогда не появится в значении Padre в качестве разделителя, и вы будете в порядке.

Мое решение:

Использование 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);
    }
}, []);
...