访问 HTML 中的单个 JSON 元素

Posted 2023-05-09

【中文标题】访问 HTML 中的单个 JSON 元素

【英文标题】：Access individual JSON elements in HTML

【发布时间】：2018-10-16 13:23:04

【问题描述】：

我已将来自外部源的 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

任何有关如何实现相同目标的线索将不胜感激。

非常感谢！

【参考方案1】：

解析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>

【参考方案2】：

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

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

上面的代码会用'John'提醒

您可以在 jquery 中使用 jquery as 设置任何元素值

$("#ID3).val(obj.name);

【讨论】：

var obj = jQuery.parseJSON(document.getElementById("x").innerHTML);警报（obj）；我试图做这样的事情，但它提醒“空”

alert(obj[1]['Dollar.Value']);

【参考方案3】：

你可以通过遍历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>