简体   繁体   English

使用 Hooks 访问嵌套的 json 数据

[英]Accessing nested json data with Hooks

I am having trouble filtering the json that I have in React Typescript Using Hooks.我在使用 Hooks 过滤 React Typescript 中的 json 时遇到问题。 I have a JSON that comes from a fetch and it looks like this:我有一个来自 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"
    }
    ]
}
]

my code for fetching the api is:我获取 api 的代码是:

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

and I wanted to return all open dealers so I need to filter it by "isOpen=true"我想退回所有开放的经销商,所以我需要通过“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)

but I am getting an error with the '...item' and I'm not sure if I am doing it correctly in React Typescript.但我收到“...项目”的错误,我不确定我在 React Typescript 中是否正确执行此操作。

Can someone help me?有人能帮我吗?

You can do it this way你可以这样做

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

But IMHO you have a problem with the json data, it doesn't looks like a good modelling.但是恕我直言,您对 json 数据有疑问,它看起来不像是一个好的建模。

This structure would be better, and thus filtering easier:这种结构会更好,因此过滤更容易:

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

and then filter like this...然后像这样过滤...

OPEN.filter(item => item.services.some(service => service.isOpen))

You should make ur OPEN array with this method then use map for showing them on react.您应该使用此方法制作您的OPEN数组,然后使用 map 显示它们的反应。

if u have trouble with showing them, ask me for code on comment.如果您在展示它们时遇到问题,请在评论中询问我的代码。

 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)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM