使用 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)

但我收到“...項目”的錯誤，我不確定我在 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)