根据值从 JSON 中查找数据并在 Html 中显示

Question

如何查找数据，基于键值。我只想要我的 HTML 上的 id 03 数据

文件名：data.json

[ { 
          "id":"01 ",
          "prouctName":"Chair ",
          "Price": "251"
       },
     
       {
        "id":"02",
        "prouctName":"Table",
        "Price": "685"
       },
       {
         "id":"03",
         "prouctName":"Table3",
         "Price": "68565"
       } ]

我正在使用 jquery 来运行它

文件名：index.html

 <table id="table">
     </table>

    <script>
    $(document).ready(function() {

        $.getJSON("./multi-seater/list.json",
            function(data) {
                var pName = '';
                $.each(data, function(key, value) {

                    pName += '<tr>';

                    pName += '<td>' + value.prouctName + '</td>';
                    pName += '<td>' + value.Price + '</td>';

                    pName += '</tr>';
                });

                $('#table').append(pName);
            });
    });
</script> 

很像

my key value id:01 and prouctName:Table3 or Price68565

并在 jquery 中仅获取我的 HTML 中 id 03 的数据

Answer 1

您可以简单地使用 find 表达式，如下所示。

$(document).ready(function() {

        $.getJSON("./multi-seater/list.json",
            function(data) {
            var findResult = data.find(x => x.id == 03); //use == for lookup
                if(findResult)
                {
                    var pName = '';
                    pName += '<tr>';

                    pName += '<td>' + findResult.prouctName + '</td>';
                    pName += '<td>' + findResult.Price + '</td>';
                    pName += '</tr>';

                    $('#table').append(pName);
                }
        
            });
    });