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

Question

I have a JSON file that I'm trying to filter the data so it only returns data for a specific Institution and then insert that into HTML.

Here is the JSON file:

[
    {
    "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"
                
            }
}
]

Here is my 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>

I feel like I'm close. I can manipulate the JSON a little before it gets to me but this is a file that I don't have much control over.

Thanks.

Answer 1

There are several problems :

• Your filter call is not at the good place.
• The way your JSON is formatted make it not so easy to achieve what you want to do

If you can change your JSON like this :

[
  {
    "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"
  }
]

Then a code like this could do the job :

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}`));

• Last but not least, there is a lot of very old school code here, try to avoid innerHTML, tags like <bold> , == (use === instead if possible, + concatenations and var declarations.

Answer 2

Since appendData doesn't return anything, you probably want appendData(data.filter instead of appendData(data).filter :

        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);
            }
        }

Additionally, you can use arrow functions to make the code easier to understand :

appendData(data.filter(x => x.institution == "Fiscal targets and rules"));