无法让 JSON 输出循环

Question

我想循环真正的某些元素，在这种情况下，所有元素都使用类“widget”，并获得 id 和 title（稍后会介绍更多内容），将其作为 JSON 存储在 localStorage 中（必须是一个字符串，所以我们要进行字符串化数据），从本地存储中获取数据并循环结果。一切顺利，直到我想循环它（JSON输出有效），这不起作用，我已经工作了一天多，所以我希望任何人都能看到我做错了什么。

（是的，我在网上看过）

我还是个菜鸟，所以如果有更好的方法来存储和循环，请告诉我。

// html

<div class="widget" id="w1">
   <h2>some text</h2>
</div>

...
...
...

//设置数据

var storeStr = '';
    storeStr += '{"widget":[';
$('.widget').each(function(){                   
    storeStr += '{';                                
    storeStr += '"id": "'+$(this).attr('id')+'",';
    storeStr += '"title": "'+$(this).children('h2').text()+'"';
    storeStr += '},';
});
storeStr += ']}';
var storeStr = storeStr.replace(/\},]/g,'}]');// comma cleanup
localStorage.setItem('thelskey', storeStr);                     

// 输出（json 有效）

{ 
  "widget":[
     {"id": "w1","title": "xxxxx"},
     {"id": "w2","title": "xxxxx"},
     {"id": "w3","title": "xxxxx"},
     {"id": "w4","title": "xxxxx"}
  ]
}

// 循环

var json = JSON.parse(localStorage.getItem('thelskey'));

for(var key in json){
    //output
}

Answer 1

与其在循环中形成字符串，为什么不简单地创建一个对象文字，然后将数据推送到其中。

var store = [];
var i = 0;
$('.widget').each(function(){
 var obj = {};
 obj['id'] = $(this).attr('id');
 obj['title'] = $(this).children('h2').text();
 store.push(obj);
});
storeObj = {'widget':store};
localStorage.setItem('thelskey', storeObj);

Answer 2

您的 JSON 对象只有一个 键，"widget"。所以循环遍历它是没有意义的。如果要获取所有的小部件数据，则需要循环遍历widget 属性下的每个项目，即

for (var key in json.widget) {
  // output
}

否则，不要将数组包装在额外的对象中，只需将 JSON 构造为：

[
  {"id": "w1","title": "xxxxx"},
  {"id": "w2","title": "xxxxx"},
  {"id": "w3","title": "xxxxx"},
  {"id": "w4","title": "xxxxx"}
]

---

我感觉你不理解你的 JSON 对象的结构，目前是：

{
  widget: [
    {
      id: "w1",
      title: "xxxxx"
    },
    {
      id: "w2",
      title: "xxxxx"
    },
    {
      id: "w3",
      title: "xxxxx"
    },
    ...
  ]
}

您可以将其视为一个 3 维关联数组（或相互嵌套的 3 层关联数组）：

/* in PHP code because JS doesn't have associative arrays */

$json = array( // first layer
  'widget' => array( // second layer
    0 => array( // third layer
      'id' => 'w1',
      'tit;e' => 'xxxxx'
    ),
    1 => array( // third layer
      'id' => 'w2',
      'tit;e' => 'xxxxx'
    ),
    2 => array( // third layer
      'id' => 'w3',
      'tit;e' => 'xxxxx'
    ),
    ...
  )
);

您当前正尝试遍历 $json 的第一个维度，该维度只有一个项目。所以你得到的错误是因为你试图访问：

$json[$key]['widget']['id'] // $key = 'widget'

实际上你应该尝试访问：

$json['widget'][$key]['id'] // $key = 1, 2, 3, 4

或者您可以简单地删除数据结构的第一层并访问：

$json[$key]['id'] // $key = 1, 2, 3, 4

为避免将来出现此类问题，请使用诸如 Firebug 或 node.js 之类的 JS 控制台或大多数现代浏览器现在拥有的内置 JS 控制台。只需执行以下操作：

console.log(json);

或

foreach (key in json) {
  console.log(key);
  console.log(json[key]);
}

会发现问题。

Answer 3

var widget = [];
widget[0] = {"id":"w1", "title":"123"};
widget[1] = {"id":"w2", "title":"12322"};
widget[2] = {"id":"w3", "title":"12333"};
widget[3] = {"id":"w4", "title":"12344"};
widget[4] = {"id":"w5", "title":"12355"};

localStorage.setItem("db", JSON.stringify(widget));

var widget1 = JSON.parse(localStorage.getItem('db'));