使用jquery获取json的值
Posted
技术标签:
【中文标题】使用jquery获取json的值【英文标题】:Get value of json using jquery 【发布时间】:2021-11-21 17:56:57 【问题描述】:如果我点击这些a
元素中的任何一个:
<a href="#" id="12345">title 1</a>
<a href="#" id="67890">title 2</a>
然后它应该获取 id 并从 JSON 中找到匹配项:
entry: [
id:
$t: "post-12345"
,
content:
type: "html",
$t: "content 1",
,
id:
$t: "post-67890"
,
content:
type: "html",
$t: "content 2",
]
然后它将结果附加到“内容”div中:
<div class="content">
content 1 OR content 2
</div>
我尝试在此处发布类似的解决方案,但无法使其发挥作用。
【问题讨论】:
您可以控制entry
值的格式吗?如果您可以更改结构,您可以以非常 更简单的方式执行您需要的操作。还请显示您尝试过的内容。请记住,SO 在这里帮助您调试代码,而不是为您编写代码
响应格式始终相同。
【参考方案1】:
通过添加引号更正 JSON 格式。 试试这个:
var data = `
"entry": [
"id":
"$t": "post-12345"
,
"content":
"type": "html",
"$t": "content 1"
,
"id":
"$t": "post-67890"
,
"content":
"type": "html",
"$t": "content 2"
]
`;
var json = JSON.parse(data);
$('a').on('click',function ()
//var id = $(this).attr('id');
let full_id = 'post-'+ $(this).attr('id');
$.each(json['entry'], function (i, e)
let id = json['entry'][i].id['$t'];
if (id == full_id)
let type = json['entry'][i].content.type;
let content = json['entry'][i].content['$t'];
$('.content').html(content);
return false;
);
);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#" id="12345">title 1</a>
<a href="#" id="67890">title 2</a>
<div class="content">
content 1 OR content 2
</div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
【讨论】:
【参考方案2】:使用jQuery.on('click', handler)
,如下代码所示:
$('a[id]').on('click', function()
let id = this.id;
let content = resp.entry.filter(content => content.id.$t === `post-$id`);
!content.length || $('div.content').text( content[0].content.$t );
);
演示
let resp =
entry: [
id:
$t: "post-12345"
,
content:
type: "html",
$t: "content 1",
,
id:
$t: "post-67890"
,
content:
type: "html",
$t: "content 2",
]
;
$('a[id]').on('click', function()
let id = this.id;
let content = resp.entry.filter(content => content.id.$t === `post-$id`);
!content.length || $('div.content').text( content[0].content.$t );
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" id="12345">title 1</a>
<a href="#" id="67890">title 2</a>
<div class="content">
content 1 OR content 2
</div>
【讨论】:
以上是关于使用jquery获取json的值的主要内容,如果未能解决你的问题,请参考以下文章
jquery 如果根据一个json的一个key的名字获得其相对的值?
怎么用jquery serialize只获取到value部分的值
Ajax获取到后台json数据,然后怎么取其中name的值赋值给li标签里面