Question

我具有以下JSON对象的结构。每个Mealplan包含一个key和一个对象value meal。

id: 1,
mealsPerWeek: {
    Monday: {
       id: 4,
       name: "Burger",
    },
    Tuesday: {
       id: 3,
       name: "Salad",
    },
id: 2,
mealsPerWeek: {
    Monday: {
       id: 3,
       name: "Salad",
    },
    Tuesday: {
       id: 2,
       name: "Fishburger",
    },

我想创建一个这样的列表（作为innerHTML）：

ID: 1

 - Monday: Burger 
 - Tuesday: Salad

ID 2: 

 - Monday: Salad 
 - Tuesday: Fishburger

我已经创建了一个循环，以获取mealplan ID。资产通过XmlHttpRequest来获取：

renderMealplan(assets) {
    let mealplan = [];
    for (let i = 0; i < assets.length; i++) {
        mealplan[i] = {
            id: assets[i].id,
            mealsPerWeek: assets[i].mealsPerWeek,
        }
    }
 }

我已经尝试获取像这样的meal名称的列表：

 let content = ''
        mealplan.forEach(mealplan => {
            content += '<h1>' + mealplan.id + '</h1>' + '<ul>' +
                '<li>' + JSON.stringify(mealplan.mealsPerWeek.Monday) +'</li>' +
        }); + '</ul>'

但是结果就是：

1
{"id":4,"name":"Burger"}

使用JSON.stringify(mealplan.mealsPerWeek.Monday.name也不会打印餐食的名称，因为它是未定义的。

如何分隔所有信息并将其打印在列表中？另外，我也没有找到提取keys的餐数的解决方案。

Answer 1

您的输入数据在语法上似乎不正确。下面，我尝试将其设置为有效形式：

const arr=[
{id: 1,
 mealsPerWeek: { Monday: {id: 4,name: "Burger"},
                Tuesday: {id: 3,name: "Salad" }}},
{id: 2,
 mealsPerWeek: { Monday: {id: 3,name: "Salad",},
                Tuesday: {id: 2,name: "Fishburger"}}}];
                
 document.getElementById('cont').innerHTML=arr.map(h=>
  `<h1>ID: ${h.id}</h1><ul>`
  +Object.entries(h.mealsPerWeek).map(([day,{name}])=>
  `<li>${day}: ${name}</li>`).join('\n')+'</ul>').join('\n')

<div id="cont"></div>

让我知道这对您是否有价值？

一些解释：

如果要获取对象的值，则无需在对象的属性上应用JSON.stringfy()。 arr[0].mealsPerWeek.Monday.name应该直接为您提供“汉堡”值。
Object.entries(obj)将返回一个数组数组。每个子数组将包含对象obj
我在地图.map(([day,{name}])=>...的参数列表中使用了ES6解构。这样，我可以直接访问键为day，而餐点名称的值对象为name。

Answer 2

要提取每星期的餐点：您只需添加以下行：

this.mealPlans.forEach((mealPlan)={
 mealPlan.meals = Object.keys(mealPlan.mealsPerWeek)
})

然后您可以为内容添加以下内容：

 let content = ''
    essensplan.forEach(mealplan => {
        content += '<h1>' + mealplan.id + '</h1>' + '<ul>' +
            '<li>' + JSON.stringify(mealplan.mealsPerWeek[mealPlan.meals[0]]) +'</li>' +
    }); + '</ul>'

您还已经知道如何为mealPlan.meals添加for循环。

如何使用内部键值对象打印JSON对象

2 个答案: