使用 Hooks 访问嵌套的 json 数据

Question

我在使用 Hooks 过滤 React Typescript 中的 json 时遇到问题。 我有一个来自 fetch 的 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 中是否正确。

有人可以帮我吗？

Answer 1

你可以这样做

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

但是恕我直言你的 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))

Answer 2

你应该用这个方法创建你的 OPEN 数组，然后使用 map 在反应中显示它们。

如果你在展示它们时遇到问题，请在评论中询问我的代码。

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)