Check for data within a json object in a list-CodePudding

I'm using the JSON API found at https://disease.sh/v3/covid-19/jhucsse. It stores the data as a list of JSON objects. I'm making a small website to allow users to scroll through a list, pick their country and province, and view data for that country/province. I'm using JQuery for this, here is my code so far:

const apiLink = "https://disease.sh/v3/covid-19/jhucsse"

jQuery(document).ready(function() {
    jQuery("#SubmitButton").click(function() {
        country_value = $('#country_picker').val() //Gets the value of the country_value select list in index.html


        $.get(apiLink, function(data,status){
          console.log(data[0]) // Placeholder code that prints the first JSON object in the list to the console
          // Other code here
        })
      
        document.getElementById('output').innerHTML = TestHTML; // Fills the 'output' div element with the output of the program
    });
});

How would I approach this problem?

CodePudding user response：

You don't need jQuery. You can use the Fetch API
Get the data as JSON
Since the JSON data is an Array, use the prototype .forEach() or .reduce() methods to extract data for each country
Use .addEventListener() to attach an "input" Event to your #search input Element
Use the String .includes() method to check if any row has the searched value, and if a value does not matches set the hidden property to that TR element

Here's an example:

const EL = (sel, el) => (el || document).querySelector(sel);
const ELS = (sel, el) => (el || document).querySelectorAll(sel);

const EL_search = EL("#search");
const EL_table = EL("#table");
const EL_tbody = EL("tbody", EL_table);
let ELS_tr;

const apiLink = "https://disease.sh/v3/covid-19/jhucsse";

const row = (item) => `<tr>
  <td>${item.country}</td>
  <td>${item.province || ""}</td>
  <td>${item.county || ""}</td>
  <td>${item.stats.confirmed || "-"}</td>
  <td>${item.stats.deaths    || "-"}</td>
  <td>${item.stats.recovered || "-"}</td>
</tr>`;

const build = (data) => {
  EL_tbody.innerHTML = data.reduce((html, item) => html  = row(item), "");
  ELS_tr = ELS("tr", EL_tbody);
  EL_search.addEventListener("input", search);
};

const search = () => {
  const value = EL_search.value.trim().toLowerCase();
  ELS_tr.forEach(EL_tr => {
    const content = EL_tr.textContent.toLowerCase();
    const match = content.includes(value);
    EL_tr.hidden = value && !match;
  });
};

fetch(apiLink).then(res => res.json()).then(build);

.sticky-thead {
  position: relative;
  max-height: 140px;
  overflow-y: auto;
}

.sticky-thead table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
}

.sticky-thead td,
.sticky-thead th {
  text-align: left;
  padding: 4px;
}

.sticky-thead thead th {
  position: sticky;
  top: 0;
  background: #fff;
}

<input id="search" type="search" placeholder="Search" autocomplete="off">
<div >
  <table id="table">
    <thead>
      <tr>
        <th>Country</th>
        <th>Province</th>
        <th>County</th>
        <th>Confirmed</th>
        <th>Deaths</th>
        <th>Recovered</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

CodePudding user response：

If you want to populate a list, just do a for-loop? data is just an array of objects with properties.

for (let i = 0; i < data.length; i  ) {
   data[i].country // access the country
   data[i].stats.deaths //access the deaths
}