访问HTML中的各个JSON元素

时间:2018-05-06 17:02:46

标签: jquery html json dom

我已经从外部源解析了一个JSON到HTML页面,我传给它一个div标签和div标签的ID说“x”。

<div id = "x">
[{"root":"root1","group":"L1","subgroup":"L1.1","Dollar.Value":1000,"Color.Name":"WHITE","Transparency":0.5763},{"root":"root2","group":"L1","subgroup":"L1.2","Dollar.Value":4000,"Color.Name":"RED","Transparency":0.1836}]
</div>

我现在需要单独访问每个元素以满足我的进一步要求。 一个例子是root(2)需要返回root2 另一个例子是Dollar.Value(2)需要返回4000

如何实现相同的任何线索将非常感激。

非常感谢!

3 个答案:

答案 0 :(得分:0)

您可以将JSON转换为JS对象并将值分配给适当的元素

var obj = jQuery.parseJSON( '{ "name": "John" }' );
alert( obj.name );

以上代码会提醒&#39; John&#39;

您可以使用Jquery作为

在jquery中设置任何元素值
$("#ID3).val(obj.name);

答案 1 :(得分:0)

您可以通过循环浏览json数组来打印出来。

//Assign json result to a variable
const data = jQuery.parseJSON("YOUR JSON HERE")

//Then use each function to loop 
$.each(data, function(key, item){
 //Now you have access to all the items inside that array :-
 alert(item.root)
 //Print it out in html
 $(".root").val(item.root);
})

html标记

<div class="x">
  <div class="root">
   //Root value comes here
  </div>
</div>

答案 2 :(得分:0)

对于解析div字符串需要:

var json_text=$('#x').html();     //read div content
var json=$.parseJSON(json_text);  //parse content to JSON

为jet Dollar.Value(2)

   json[1]['Dollar.Value']   //not json[1].Dollar.Value 

如果需要读取所有json元素:

var json_text=$('#x').html();
var json=$.parseJSON(json_text);
for(var key in json){
	var element=json[key];
	for(var el in element){
        console.log(el+' => '+element[el]);
	}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>


<div id = "x">
[{"root":"root1","group":"L1","subgroup":"L1.1","Dollar.Value":1000,"Color.Name":"WHITE","Transparency":0.5763},{"root":"root2","group":"L1","subgroup":"L1.2","Dollar.Value":4000,"Color.Name":"RED","Transparency":0.1836}]
</div>