Searching from JSON-CodePudding

I am trying to build an AJAX search form for a dataset that queries an open data API and displays search results below the form. I want to include one or more inputs that correspond to fields within my selected JSON dataset.

When the form is submitted I want to use the form data to query the Open Data API. I want to allow users to find a subset of records from a specific dataset.

HTML:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="text/javascript" src="data.js"></script>
  <title></title>
</head>

<body>
  <div >
    <form>
      <input type="text" id="input" placeholder="what you are looking for?">
      <button type="submit">Search</button>
    </form>
  </div>
</body>

</html>

JavaScript:

let x = document.getElementById('input');
let obj;

fetch('https://data.winnipeg.ca/resource/f58p-2ju3.json')
  .then(response => {
    return response.json()
  })
  .then(data => {
    console.log(data)
    obj = JSON.parse(data)
  })

This is my code. I want the user to search by the location name and then the whole information will be displayed meaning observationid, observationtime, thingid and locationname in the form of a table. Only for the specific locationname entered by the user.

CodePudding user response：

In case you need for searching in the loaded JSON data, you'll need 3 methods a least.

init(). This method loads the whole JSON from the API for the first time.
search(inputValue). This method takes the inputValue value in order to be used to filter the whole JSON data.

For instance, in my search() method, I'm using the

Here is a small demo where you may see it in action.

class SearchJSON {
  data = null;
  constructor() {
    this.init();
  }
  init() {
    fetch('https://data.winnipeg.ca/resource/f58p-2ju3.json')
      .then(response => {
        return response.json();
      })
      .then(data => {
        this.data = data;
      });
  }
  search(inputValue) {
    const results = this.data.filter(x => x.locationname.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
    return this.renderTable(results);
  }
  renderTable(results) {
    let html = "<table><thead><tr><th>Observation Id</th><th>Observation Time</th><th>Thing Id</th><th>Location Name</th></tr></thead></table><table class=\"result-table\"><tbody>";
    let result = null;
    for (let i = 0; i < results.length; i  ) {
      result = results[i];
      html  = `<tr><td>${result.observationid}</td>
      <td>${result.observationtime}</td>
      <td>${result.thingid}</td>
      <td>${result.locationname}</td>
      <tr>`;
    }
    html  = "</tbody></table>";
    return html;
  }
}

window.onload = () => {
  const form = document.querySelector("form");
  const input = document.getElementById("input");
  const searchJSON = new SearchJSON();
  form.onsubmit = (e) => {
    e.preventDefault();
    const result = searchJSON.search(input.value);
    const formDiv = document.querySelector("form div");
    const div = document.createElement("div");
    div.innerHTML = result;
    if (formDiv !== null) {
      formDiv.parentElement.removeChild(formDiv);
      form.appendChild(div);
    }
    form.appendChild(div);
  };
};

.container {
  font-size: 0.8rem;
}

.container table {
  border-collapse: collapse;
}

.container table th,
.container table td {
  border: #ccc solid 1px;
  padding: 0.2rem 0.4rem;
  width: 100px;
}

.result-table {
  display: inline-block;
  height: 230px;
  overflow: auto;
}

<div >
  <form>
    <input type="text" id="input" placeholder="what you are looking for?">
    <button type="submit">Search</button>
  </form>
</div>

I'm not sure about the capability of the endpoint but I think that It may be good to investigate if the https://data.winnipeg.ca/resource/f58p-2ju3.json endpoint can receive parameters, therefore you can send parameters to the endpoint with the given form data to return the required data so, you might no need to use the init() method from my example to load the whole JSON data at the first time.

CodePudding user response：

assign JSON to variable and use $.getJSON

use below code with your search button,

$("#search").on('keypress keyup change input', function() { var arrival = $(this).val().toLowerCase();

 $('#matches').text(!arrival.length ? '' : 

     dataArr.filter(function(place) {

         // look for the entry with a matching `code` value

         return (place.title.toLowerCase().indexOf(arrival) !== -1);

     }).map(function(place) {

         // get titles of matches

         return place.title;

     }).join('\n')); // create one text with a line per matched title

});