Javascript和JSON（DOM）

所以我有这样一个网站，它是一个在线鞋店，你有一个JSON文件，我必须用javascript在HTML中显示它。因此JSON文件如下所示：

[

    {
       "name": "DKNY",

       "category": "Stilettos",

       "location": "Texas",
    },

    {
       "name": "Prada",

       "category": "Wedge",

       "location": "Texas",
    },

    {
       "name": "Jimmy Choo",

       "category": "Stilettos",

       "location": "Melbourne",
    },
]

function filterShoesByCategory(category) {
    return allShoes.filter(shoe => shoe.category === category); // returns filtered array - original array is kept unchanged
}

还有一个HTML文件，它的类别是“楔子”“细高跟鞋”

---

在HTML中单击Stilettos的类别（例如单击Stilettos）后，它将显示json文件中写入的所有类别和数据，如“Stilettos”，然后将显示鞋的名称及其位置。你有没有办法做到这一点？进入JavaScript？

您必须改进此代码以满足您的需要，但这是您必须使用的概念

var=[{
“名称”：“DKNY”，
“类别”：“细高跟鞋”，
“地点”：“德克萨斯州”，
},
{
“名称”：“普拉达”，
“类别”：“楔子”，
“地点”：“德克萨斯州”，
},
{
“姓名”：“Jimmy Choo”，
“类别”：“细高跟鞋”，
“地点”：“墨尔本”，
},
];
异步功能显示（cat）{
如果（！shoes）{//检查鞋是否已加载
var response=wait fetch（“shoes.json”）；//获取文件
shoes=wait response.json（）；//将文件转换为json
}
var list=document.getElementById（“list”）；//获取输出元素
list.innerHTML=“；//清除输出元素
所选变量=shoes.filter（s=>s.category&&s.category==cat）；
//过滤鞋子，使其仅包含具有正确类别的元素
selected.forEach（s=>{//遍历鞋以显示它们
list.innerHTML+=“”+s.name+“”；
});
}

细高跟鞋

将所有数据存储在变量中，例如：

var allShoes = ... //your JSON data

然后添加按类别过滤鞋子的功能，如下所示：

[

    {
       "name": "DKNY",

       "category": "Stilettos",

       "location": "Texas",
    },

    {
       "name": "Prada",

       "category": "Wedge",

       "location": "Texas",
    },

    {
       "name": "Jimmy Choo",

       "category": "Stilettos",

       "location": "Melbourne",
    },
]

function filterShoesByCategory(category) {
    return allShoes.filter(shoe => shoe.category === category); // returns filtered array - original array is kept unchanged
}

---

此外，还需要一些逻辑来更新DOM。这取决于您使用的是纯JS、jQuery还是某些框架。

是的，这是可能的。如果您是从外部本地json文件读取，该如何操作？谢谢我在编辑中包含了加载部分。要使用它，只需在

var shoes

之后删除JSON对象，如果您要将其链接到内部

• 上如何？我认为您应该是编写代码的人，我们在这里回答您的问题或就问题向您提供建议，非常感谢