Доступ к вложенным данным json с помощью хуков

У меня проблемы с фильтрацией json, который у меня есть в React Typescript Using Hooks. У меня есть JSON, полученный из выборки, и он выглядит так:

[
{
"dealer 1":
    [
    {
    "name": "SERVICE 1"
    "city": "NORTH CANTON"
    "phone": "3306596372"
    "isOpen": "true"
    },
    {
    "name": "SERVICE 2"
    "city": "OHIO"
    "phone": "3306596372"
    "isOpen": "true"
    }
    ]
},
{
"dealer 2":
    [
    {
    "name": "SERVICE A"
    "city": "WASHINGTON"
    "phone": "3306596375"
    "isOpen": "true"
    },
    {
    "name": "SERVICE B"
    "city": "SEATTLE"
    "phone": "3306596376"
    "isOpen": "true"
    }
    ]
}
]

мой код для получения api:

useEffect(() => {
    axios.get("API URL here")
        .then(res => {
            console.log(res)
            setCTSN(res.data)
        });
}, []);

и я хотел вернуть всех открытых дилеров, поэтому мне нужно отфильтровать его по isOpen = true

const isOpen = 'true'

const result = OPEN
    .map(item => ({
        ...item, //Spread types may only be created from object types.ts(2698)
        children: item.children
            .filter(child => child.value.includes(isOpen.toLowerCase()))
    }))
    .filter(item => item.children.length > 0)

console.log(result)

но я получаю сообщение об ошибке с «... item», и я не уверен, правильно ли я делаю это в React Typescript.

Кто-нибудь может мне помочь?


react-native reactjs typescript javascript react-typescript
person Deegee    schedule 09.12.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете сделать это так

OPEN.filter(item => item[Object.keys(item)[0]].some(service => service.isOpen))

Но IMHO у вас проблема с данными json, это не похоже на хорошее моделирование.

Эта структура была бы лучше и, следовательно, проще фильтровать:

{
name: "dealer 1",
services:
    [
    {
    "name": "SERVICE 1"
    "city": "NORTH CANTON"
    "phone": "3306596372"
    "isOpen": "true"
    },
    {
    "name": "SERVICE 2"
    "city": "OHIO"
    "phone": "3306596372"
    "isOpen": "true"
    }
    ]
}

а затем отфильтруйте вот так ...

OPEN.filter(item => item.services.some(service => service.isOpen))
person cape_bsas    schedule 09.12.2020
comment
спасибо за вашу помощь, но я получаю сообщение об ошибке с переменными, так как у меня нет переменных open и services. JSON просто хранится в массиве. @cape_bsas - person Deegee; 09.12.2020
comment
ОТКРЫТЬ = ваши данные json - person cape_bsas; 09.12.2020
comment
просто используйте первый фрагмент, и он будет работать (я проверил) - person cape_bsas; 09.12.2020
comment
Привет, @cape_bsas, я не уверен, но "some" выдает ошибку, говоря, что свойство "some" не существует для типа "never". - person Deegee; 10.12.2020
comment
Я не знаю, где вы запускаете этот код, но Array.prototype.some () доступен из ECMAScript 2015 - person cape_bsas; 11.12.2020
comment
developer.mozilla.org/en-US/ docs / Web / JavaScript / Reference / - person cape_bsas; 11.12.2020

arrow_upward
0
arrow_downward

Вы должны создать массив ur OPEN с помощью этого метода, а затем использовать карту для отображения их при реакции.

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

const Json = [
  {
    "dealer 1": [
      {
        "name": "SERVICE 1",
        "city": "NORTH CANTON",
        "phone": "3306596372",
        "isOpen": true
      },
      {
        "name": "SERVICE 2",
        "city": "OHIO",
        "phone": "3306596372",
        "isOpen": false
      }
    ]
  },
  {
    "dealer 2": [
      {
        "name": "SERVICE A",
        "city": "WASHINGTON",
        "phone": "3306596375",
        "isOpen": true
      },
      {
        "name": "SERVICE B",
        "city": "SEATTLE",
        "phone": "3306596376",
        "isOpen": true
      }
    ]
  }
]
const OPEN = []
Json.forEach(item => {
   OPEN.push({
      dealer:Object.keys(item)[0],
      service:item[Object.keys(item)[0]].filter(service =>service.isOpen)
   })
})
console.log(OPEN)

person b3hr4d    schedule 09.12.2020
comment
Привет @ b3hr4d, спасибо за ответ, но я получаю ошибки: «Json» - не удается найти имя «Json». Вы имели в виду "JSON"? 'item' - параметр 'item' неявно имеет тип any. 'service' - параметр 'service' неявно имеет тип any. - person Deegee; 10.12.2020
comment
Json - это ответ с вашими данными, а элемент любой - это ошибка машинописного текста, вы должны указать для них тип, для теста используйте это Json.forEach((item:any) => { - person b3hr4d; 10.12.2020
comment
Спасибо @ b3hr4d, две последние ошибки: «фильтр» говорит, что свойство «фильтр» не существует для типа «никогда», «служба» говорит, что «параметр» служба »неявно имеет тип« любой ». Вы что-нибудь знаете об этом? - person Deegee; 10.12.2020
comment
Я думаю, вам следует изучить машинописный текст немного больше, просто используйте // @ts-nocheck в начале файла ur для теста. - person b3hr4d; 10.12.2020