使用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中怎么获取json的key值?

怎么用jquery serialize只获取到value部分的值

Ajax获取到后台json数据,然后怎么取其中name的值赋值给li标签里面

玩转web之json---将表单通过serialize()方法获取的值转成json

jQuery获取json数据