javascript - 如何过滤 JSON 文件以使用 Javascript 检索 HTML 数据

Question

我有一个 JSON 文件，我正在尝试过滤数据，因此它只返回特定机构的数据，然后将其插入 HTML。

这是 JSON 文件：

[
    {
    "Institution 1":
             {
                "institution" : "Fiscal targets and rules",
                "InstitutionalStrength":"Medium:  Limited legal debt constraints; no legal fiscal rules",
                "Effectiveness":"Medium: Conservative fiscal policy has resulted in limited deficits and improving debt sustainability"
             },

    "Institution 2":
            {
                "institution" : "National and sectoral planning",
                "InstitutionalStrength":"Medium:  Limited legal debt constraints; no legal fiscal rules",
                "Effectiveness":"Medium: Conservative fiscal policy has resulted in limited deficits and improving debt sustainability"
                
            },
            
    "Institution 3":
            {
                "institution" : "Coordination among entities",
                "InstitutionalStrength":"Medium:  Limited legal debt constraints; no legal fiscal rules",
                "Effectiveness":"Medium: Conservative fiscal policy has resulted in limited deficits and improving debt sustainability"
                
            }
}
]

这是我的 HTML 和 JavaScript

<div style="padding:0 0 0 20;">

   

    <p>INSTITUTION<br>

    <span class="w3-large"><b>1. Fiscal Targets and Rules</b></span></p>

    <br><b>SUMMARY ASSESMENT</b><br><br>

  <div id="myData"></div>
  </div>


<script>
        fetch('institutionalstrength.json')
            .then(function (response) {
                return response.json();
            })
            .then(function (data) {
                appendData(data).filter(function(x){ return x.institution == "Fiscal targets and rules"; });
            })
            .catch(function (err) {
                console.log('error: ' + err);
            });
        function appendData(data) {
            var mainContainer = document.getElementById("myData");
            for (var i = 0; i < data.length; i++) {
                var div = document.createElement("div");
                div.innerHTML = '<bold>Institutional Design:</bold> ' + data[i].InstitutionalStrength + ' <br>Effeciveness: ' + data[i].Effectiveness;
                mainContainer.appendChild(div);
            }
        }
    </script>

我觉得我很接近了。我可以在 JSON 到达我之前对其进行一些操作，但这是一个我没有太多控制权的文件。

谢谢。

标签： javascripthtmljsonfilter

Answer 1

有几个问题：

• 你的filter电话不是在好地方。
• 您的 JSON 格式的方式使得实现您想要做的事情变得不那么容易

如果您可以像这样更改 JSON：

[
  {
    "institution" : "Fiscal targets and rules",
    "InstitutionalStrength":"Medium:  Limited legal debt constraints; no legal fiscal rules",
    "Effectiveness":"Medium: Conservative fiscal policy has resulted in limited deficits and improving debt sustainability"
  },
  {
    "institution" : "National and sectoral planning",
    "InstitutionalStrength":"Medium:  Limited legal debt constraints; no legal fiscal rules",
    "Effectiveness":"Medium: Conservative fiscal policy has resulted in limited deficits and improving debt sustainability"
  },
  {
    "institution" : "Coordination among entities",
    "InstitutionalStrength":"Medium:  Limited legal debt constraints; no legal fiscal rules",
    "Effectiveness":"Medium: Conservative fiscal policy has resulted in limited deficits and improving debt sustainability"
  }
]

然后像这样的代码可以完成这项工作：

function appendData(data) {
  const mainContainer = document.getElementById("myData");
  for (let institution in data) {
    const div = document.createElement("div");
    div.innerHTML = 'Institutional Design : ' + data[institution].InstitutionalStrength + ' <br>Effeciveness: ' + data[institution].Effectiveness;
    mainContainer.appendChild(div);
  };
}

fetch('institutionalstrength.json')
  .then(response => response.json())
  .then(json => appendData(json.filter(jsonItem => jsonItem.institution === 'Fiscal targets and rules')))
  .catch(err => console.log(`error : ${err}`));

• 最后但并非最不重要的一点是，这里有很多非常老派的代码，尽量避免使用 innerHTML、像<bold>, ==(如果可能的话使用 === 来代替+连接和var声明。