javascript - 怎么对Json对象进行遍历呢？

Question

我有一个json对象，我想让他的value遍历输出到我li上，该怎么做呢？

<li class="list-group-item"><span class="badge">14</span>13</li>
<li class="list-group-item"><span class="badge">14</span>温度：</li>
<li class="list-group-item"><span class="badge">14</span>天气：</li>
<li class="list-group-item"><span class="badge">14</span>星期：</li>
<li class="list-group-item"><span class="badge">14</span>风力：</li>
<li class="list-group-item"><span class="badge">14</span>风力：</li>

因为json对象的key是英文的，我不想输出英文，所以我就先把key写在这里了。之后我就想在span标签里输出value，但是我想到使用for in 的 我得获得span对象，

 $('#shishi').find('span').each(function () {
        $(this).html("!")
    })

在for in 里面使用的话，每遍历一次就会给每个span都给赋值。不是我想要的。。
那我应该怎么做呢？

Answer 1

谢邀~

首先, 既然你的class='list-group-item';

则表示他们就是被遍历出来的. Ps: 不是遍历出来的就不叫list了.

json:
{name1: "1",
name2: "2",
name3: "3",
name4: "4"}

js:
var objName = {name1: 名称1, name2: 名称2, name3: 名称3, name4: 名称4};
var _html = "";
for(var i in json){
    _html += '<li class="list-group-item"><span class="badge">' + json[i] + '</span>' + objName[i] + '：</li>';
}
$("外层元素").append(_html);

如果返回的是数组形式的数据:

json:
[{name: "name1", value: "1"},
{name: "name2", value: "2"},
{name: "name3", value: "3"},
{name: "name4", value: "4"},]

js:
var objName = {name1: 名称1, name2: 名称2, name3: 名称3, name4: 名称4};
var _html = "";
for(var i = 0; i < json.length;i++ ){
    _html += '<li class="list-group-item"><span class="badge">' + json[i].value + '</span>' + objName[json[i].name] + '：</li>';
}
$("外层元素").append(_html);

Answer 2

json like this

let json = {
  key1: 'value1',
  key2: 'value2',
  key3:  'value3'
}
//遍历输出
$.each(json,function(key,value){
   //do  what you want to do  在这里搞事情吧

   })