Сортировка и последующая фильтрация данных JSON на отдельные компоненты - PullRequest
Новая
       5

Сортировка и последующая фильтрация данных JSON на отдельные компоненты

0 голосов
/ 16 января 2019

Я пытаюсь выработать логику, и я немного застрял. У меня есть массив объектов, которые выглядят так: 

    {
        "id": 5,
        "name": "Mole's Town",
        "lat": 33,
        "lng": 18.5,
        "type": "village"
    }

Есть несколько разных типов, всего девять. Деревня, Город, Город и т. Д. Я пытаюсь создать компонент для каждого из этих девяти типов, а затем отфильтровать все объекты, которые соответствуют этому определенному типу, в соответствующую группу LayerControl.

Это то, что у меня есть, но это только рендеринг компонента Marker, но не учитывает тип. 

  const stuff = data.map((location) =>
        <Marker key={location.id} position={[location.lat, location.lng]} icon= 
           {locationIcon}>
          <Tooltip permanent direction="bottom" opacity={.6}>
            {location.name}
          </Tooltip>
        </Marker>
      )

Ответы [ 2 ]

0 голосов
/ 17 января 2019

Вы можете использовать Set, чтобы найти все уникальные типы в вашем массиве: 

const data = [
    {
        "id": 5,
        "name": "Mole's Town",
        "lat": 15,
        "lng": 18.5,
        "type": "village"
    },
    {
        "id": 783,
        "name": "Mole's Town",
        "lat": 3,
        "lng": 18.5,
        "type": "village"
    },
    {
        "id": 75,
        "name": "Mole's Town",
        "lat": 33,
        "lng": 8.55,
        "type": "town"
    },
    {
        "id": 43,
        "name": "Mole's Town",
        "lat": 33,
        "lng": 15,
        "type": "city"
    },
    {
        "id": 443,
        "name": "Mole's Town",
        "lat": 35,
        "lng": 725,
        "type": "city"
    },
    {
        "id": 4543,
        "name": "Mole's Town",
        "lat": 76,
        "lng": 2,
        "type": "city"
    }
]

const types = [...new Set(data.map(loc => loc.type))]

console.log(types)

Когда они у вас есть, в вашей функции рендеринга сопоставьте их с вашим LayerControl, фильтруя каждое местоположение того же типа и отправьте в виде реквизита: 

types.map(type => <LayerControl key={type} locations={data.filter(loc => loc.type === type)}/>)

Затем в рендере LayerControl сопоставьте все полученные местоположения с кодом, который вы задали в своем вопросе: 

this.props.locations.map(({id, lat, lng, name}) => //Deconstructing every location to make your code more readable
    <Marker key={id} position={[lat, lng]} icon=
        {locationIcon}>
        <Tooltip permanent direction="bottom" opacity={.6}>
            {name}
        </Tooltip>
    </Marker>
)
0 голосов
/ 16 января 2019

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

const LayerVillage = ({ position, name }) => (
  <Marker position={position} icon={locationIcon}>
    <TooltipComponent permanent direction="bottom" opacity={0.6}>
      {name}
    </TooltipComponent>
  </Marker>
);

const layerComponentsByType = {
  village: LayerVillage,
  town: LayerTown
};

const stuff = data.map(location => {
  const LayerControl = layerComponentsByType[location.type];
  return (
    <LayerControl
      key={location.id}
      position={[location.lat, location.lng]}
      name={location.name}
    />
  );
});

Другая возможность: 

    <LayerControl
      key={location.id}
      {...location}
    />

При таком способе вы получите пары ключ-значение объекта местоположения в качестве свойств.

Кроме того, у вас может быть компонент по умолчанию, поскольку location.type не может быть свойством layerComponentsByType: 

  const LayerControl = layerComponentsByType[location.type] || DefaultLayerControl;
...