javascript - 如何在不知道 javascript 中使用 JSON 的特定键的情况下获取属性值

Question

我正在学校尝试做一个项目，但我一直在一个一个地显示待办事项列表，这意味着我正在尝试使用 HTML、CSS 制作一个基于 localStorage 和 JSON 的 Web 应用程序，和JS。 我有以下 JSON 对象，我希望在列表中显示列表，卡片内的待办事项列表定义什么是什么。

var listStorage = {
"lists":[{
  "pierre": ["Do the laundry", "Pick up James from school", "Call Charlie"]
},{
  "michal": ["Go to the Mall", "Eat ice-cream", "Launch my new APP"]
}]};

现在我需要做的是获取列表的名称(pierre，michal)并将它们显示在两个不同的 div 中，然后获取内部的值(Do the dress..)并将它们显示在每个名称下。 这就是我获取每个列表名称的方法:

for (var j = 0; j < listStorage.lists.length;j++){
  $('body').append($('div'));
  $('div').append(listStorage.lists[j]);
}

但是用于获取每个列表数组中的每个项目的第二个函数对我来说不起作用。 谁能帮我得到它吗？ 请注意，列表名称是每个用户输入的未知字符串，并将其添加到本地存储中。 如果有什么不清楚的地方请随时问我，这是我第一次在这里提问。

Answer 1

你可以做到

// Get lists from localstorage
lists = [{
  "pierre": ["Do the laundry", "Pick up James from school", "Call Charlie"]
},{
  "michal": ["Go to the Mall", "Eat ice-cream", "Launch my new APP"]
}];

lists.forEach(list => {
  Object.keys(list).forEach(listName => {
    // Display todo list
    console.log(listName);
    console.log(list[listName]);
  })
})

但我不建议这样做。

更好的解决方案是标准化 list 对象的形状:

// Get lists from localstorage
lists = [
  {
    "owner": "Pierre",
    "tasks": ["Do the laundry", "Pick up James from school", "Call Charlie"]
  },
  {
    "owner": "Michal",
    "tasks": ["Go to the Mall", "Eat ice-cream", "Launch my new APP"]
  }
];

lists.forEach(list => {
  // Display todo list
  console.log(list.owner);
  console.log(list.tasks);
})