Question

我想循环使用某些元素，在这种情况下都使用类“widget”，然后获取id和title（稍后会有更多内容），将它作为JSON存储在localStorage中（必须是一个字符串，所以我们stringify数据），从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"
    },
    ...
  ]
}

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

/* 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'));

无法将JSON输出转换为循环

3 个答案: