如何从此 JSON 文件中获取？
[英]How to fetch from this JSON file?
问题描述
here's the JSON file
这是 JSON 文件
[{
"Pizza": [
{
"title": "cheese lovers",
"photo": "./cl.jpg"
},
{
"title": "checken ranch",
"photo": "./cr.jpg"
}
],
"Pasta": [
{
"title": "spaghetti",
"photo": "./sp.jpg"
},
{
"title": "lasagna",
"photo": "./la.jpg"
}
],
"Asian": [
{
"title": "sushi",
"photo": "sushi.jpg"
},
{
"title": "chicken sweet & sour",
"photo": "css.jpg"
}
],
"Dessert": [
{
"title": "cheesecake",
"photo": "cc.jpg"
},
{
"title": "ice ceam",
"photo": "ic.jpg"
}
],
"Drinks": [
{
"title": "tea",
"photo": "tea.jpg"
},
{
"title": "orange juice",
"photo": "oj.jpg"
}
]
} ] }]
What I wanna do is using the fetch API the categories would be listed in a menu, and the inside content would be shown in other HTML elements.我想做的是使用 fetch API 类别将列在菜单中，内部内容将显示在其他 HTML 元素中。 When I use a normal fetch API function I can see everything in the console, but when I try to render the JSON data it only shows [object object], any deeper levels give me errors.当我使用正常提取 API function 时，我可以在控制台中看到所有内容，但是当我尝试渲染 JSON 数据时，它只会显示 [对象对象]，任何更深层次的数据都会显示错误。 So is there a different way I can fetch the data or the JSON file itself needs editing?那么有没有其他方法可以获取数据或 JSON 文件本身需要编辑？
2 个解决方案
解决方案1
1 2022-07-27 18:06:32
You cannot render an object directly into HTML, for example if you want to render your fetched API into HTML Lists you can do it like this:您不能将 object 直接渲染到 HTML 中，例如，如果您想将获取的 API 渲染到 Z4C4AD5FCA2E007A3F74DBB1 中，您可以这样做：
const a = [{ "Pizza": [{ "title": "cheese lovers", "photo": "./cl.jpg" }, { "title": "checken ranch", "photo": "./cr.jpg" } ], "Pasta": [{ "title": "spaghetti", "photo": "./sp.jpg" }, { "title": "lasagna", "photo": "./la.jpg" } ], "Asian": [{ "title": "sushi", "photo": "sushi.jpg" }, { "title": "chicken sweet & sour", "photo": "css.jpg" } ], "Dessert": [{ "title": "cheesecake", "photo": "cc.jpg" }, { "title": "ice ceam", "photo": "ic.jpg" } ], "Drinks": [{ "title": "tea", "photo": "tea.jpg" }, { "title": "orange juice", "photo": "oj.jpg" } ] }]; list = document.getElementById("ul"); //get access to your ul tag for (const [key, value] of Object.entries(a[0])) { //a[0] since you have the first layer is an array with one item let li = document.createElement("li"); // you map through your object and create an li tag li.innerText = key; // add the key text to the li ("Pizza", "Pasta", "Asian"...) list.appendChild(li); // add the list item to the list let smallerList = document.createElement("ul"); //create another list (nested list) li.appendChild(smallerList); // add the nested list under the first list item value.forEach((element) => { //since its an array we map through it using array.forEach which means element is {"title": some data, "photo": some data} for (const [key2, value2] of Object.entries(element)) { //so we find that it is another object so we map through it let smallerLi = document.createElement("li"); // create another list item smallerLi.innerText = `${key2}: ${value2}`; // set the text of the list item to for example ("title": "orange juice") smallerList.appendChild(smallerLi); //add the smaller list item to the nested list } }); }
< DOCTYPE html> <html> <body> <ul id="ul"> </ul> </body> </html>
解决方案2
0 2022-07-27 17:12:54
You cannot console.log an object directly.您不能直接控制台记录 object。 One quick solution to debug (I assume you're trying to debug using console.log) is this一种快速的调试解决方案（我假设您正在尝试使用 console.log 进行调试）是这样的
console.log(JSON.stringify(data) . console.log(JSON.stringify(data) 。
Another options for quick inspection are console.table(data) for table formatting or console.dir(data) to see all properties of your object.快速检查的另一个选项是用于表格格式的console.dir(data) console.table(data)用于查看 object 的所有属性的 console.dir(data)。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.