使用jquery获取json的值答案

【问题标题】：Get value of json using jquery使用jquery获取json的值
【发布时间】：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 在这里帮助您调试代码，而不是为您编写代码
响应格式始终相同。

标签： jquery arrays json

【解决方案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>

【讨论】：