如何使用jquery读取json格式

Question

我有像这样的json格式

{
    "data1": {
        "name": "acong",
        "status": {
            "kawin": "Ya",
            "Keterangn": "Udah Kawin"
        },
        "data2": [{
            "id": "1",
            "nama": "Bali"
        }, {
            "id": "2",
            "nama": "Jakarta"
        }]
    }
}

如何使用jquery在html中输出？

Answer 1

如果你有一个valid JSON字符串，你可以用这样的javascript解析它：

var jsonString = '[{..},{...},...]';
var obj = JSON.parse(jsonString);

然后，迭代生成的对象，如下所示：

for (var item in obj) {
   var objItem = obj[item];
   // Do your stuff here ...
}

示例

此代码段从data2对象创建一个选项列表：

var obj = {
      "data1": {
        "name": "acong",
        "status": {
              "kawin": "Ya",
              "Keterangn": "Udah Kawin"
            },
        "data2": [
          {
          "id": "1",
          "nama": "Bali"
          }, 
          {
          "id": "2",
          "nama": "Jakarta"
          }
        ]
    }
};


// Get the object that contains the options
var data2 = obj['data1']['data2'];

// Iterate over this object
for (var item in data2) {

  var opt = data2[item];

  // Append an new option element for every object node
  $('#sel').append($('<option value="' + opt.id + '">' + opt.nama + '</option>'));

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<select id="sel"></select>

Answer 2

如果从服务器发送的json对象，就像这样做

var data = {
        "data1": {
            "name": "acong",
            "status": {
                "kawin": "Ya",
                "Keterangn": "Udah Kawin"
            },
            "data2": [{
                "id": "1",
                "nama": "Bali"
            }, {
                "id": "2",
                "nama": "Jakarta"
            }]
        }
    };
console.log(data)   ;
console.log(data.data1) 
data.data1.data2.forEach(function(d,index){
console.log(d.id);
}); 

在像这样的HTML输出中

$("#someelement").html("<strong>"+data.data1.name+"</strong>");

Answer 3

使用$.each()循环对象 - 创建html并将其附加到任何div或元素

var data = {
"data1": {
    "name": "acong",
    "status": {
        "kawin": "Ya",
        "Keterangn": "Udah Kawin"
    },
    "data2": [{
        "id": "1",
        "nama": "Bali"
    }, {
        "id": "2",
        "nama": "Jakarta"
    }]
}
} ;

var html = "<select>";
$.each(data,function(i,x) {
    $.each(x.data2,function(i_inner,x_inner) {
        html += "<option value='"+x_inner.id+"'>"+x_inner.nama+"</option>";
    });
});
$("#container").html(html)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="container"></div>