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

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 中，然后获取内部的值（洗衣服..）并将它们显示在每个名称下. 这就是我为获取每个列表名称所做的：

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

但是用于获取每个列表数组中每个项目的第二个函数对我来说无论如何都不起作用。 任何人都可以帮我得到它吗？ 请注意，列表名称是每个用户输入的未知字符串，它被添加到 localStorage。 有什么不清楚的欢迎随时问我，这是我第一次来这里问。

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);
})

Answer 2

如果如您的问题所示，您只想访问 list 对象中（唯一）项目的 值，那么您可以使用 Object.values 访问包含对象的值，您可以从中提取第一个（也是唯一的）值，即数组：

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"]
}]};

listStorage.lists.forEach((obj) => {
  const arr = Object.values(obj)[0];
  const $div = $('<div></div>');
  $('body').append($div);
  arr.forEach(str => {
    $div.append('<div>' + str + '</div>');
  });
});

body > div {
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如果您也想获取密钥，请使用Object.entries：

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"]
}]};

listStorage.lists.forEach((obj) => {
  const [name, arr] = Object.entries(obj)[0];
  const $div = $('<div>' + name + '</div>');
  $('body').append($div);
  arr.forEach(str => {
    $div.append('<div>' + str + '</div>');
  });
});

body > div {
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

首先你的数据结构过于复杂，你要么使用一个对象作为哈希表：

 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"]
   }
 };

要查看所有列表，您可以这样做：

  for(const [name, entries] of Object.entries(listStorage.lists)) {
   console.log(name); // pierre
   console.log(entries); // [Do the laundry, ...]
 }

或者你取一个带有静态属性的数组，如：

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

可以迭代为：

  for(const {name, entries} of listStorage.lists) {
    //...
  }

现在要追加一个新的 div，你必须先创建一个（$("div") 获取页面上的所有 div，这不起作用）：

  const listDiv = $("<div></div>");

然后你可以将它附加到正文并用内容填充它。

Answer 4

解决方案

根据讨论，对象数组中只有一个属性。

好的，如果你在对象中总是只有一个属性，那么你可以对它执行 Object.keys() 并获得一个键数组（假设 -> newKeysArray）。所以在这个 newKeysArray 的第 0 个索引处，我们可以从对象中获取值。

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"]
 }]};
for (var j = 0; j < listStorage.lists.length;j++){
 // Using Object.keys() will give you an array of keys present in object not the values
 var newKeysArray = Object.keys(listStorage.lists[j]);
 // the final value you want as key's value
 console.log('final value',listStorage.lists[j][newKeysArray[0]]);
 $('body').append($('div'));
 $('div').append(listStorage.lists[j]);
}