Question

我正在尝试在学校的一个项目上工作，而我却一直无法显示待办事项列表，这意味着，我正在尝试使用HTML，CSS，基于localStorage和JSON的网络应用程序，和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

解决方案

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

好的，如果对象中始终只有一个属性，则可以对其执行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]);
}

Answer 3

如果（如您的问题所示）如果您只想访问list对象中（唯一）项的 value ，那么您可以使用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 4

首先，您的数据结构过于复杂，您可以将一个对象用作哈希表：

 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")将在页面上显示所有div，这将不起作用）：

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

然后您可以将其附加到正文中并用内容填充。

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

4 个答案: