使用搜索词过滤json数组

Question

I know this question might seem like it has been answered before, but I looked for three days and nothing really helped me solve my problem completely. I have a quite large json file and want to build a search bar to filter through it. I want the search bar to search the whole json file and somehow I can't figure out how to do it. Here is what I got. It works pretty good but I can only search a single property. See line 73 of the js code. I tried using a variable or an array instead of a property but it doesn't work. How can I manage to filter through the entire json file.

 var products; var request = new XMLHttpRequest(); request.open('GET', 'json/ToS.json'); request.responseType = 'json'; request.onload = function() { if(request.status === 200) { products = request.response; initialize(); } else { console.log('Network request for products.json failed with response ' + request.status + ': ' + request.statusText) } }; request.send(); function initialize() { var category = document.querySelector('#category'); var searchTerm = document.querySelector('#searchTerm'); var searchBtn = document.querySelector('button'); var main = document.querySelector('main'); var lastCategory = category.value; var lastSearch = ''; var categoryGroup; var finalGroup; finalGroup = products; updateDisplay(); categoryGroup = []; finalGroup = []; searchBtn.onclick = selectCategory; function selectCategory(e) { e.preventDefault(); // Set these back to empty arrays, to clear out the previous search categoryGroup = []; finalGroup = []; if(category.value === lastCategory && searchTerm.value.trim() === lastSearch) { return; } else { lastCategory = category.value; lastSearch = searchTerm.value.trim(); if(category.value === 'All') { categoryGroup = products; selectProducts(); } else { var lowerCaseType = category.value.toLowerCase(); for(var i = 0; i < products.length ; i++) { if(products[i].type === lowerCaseType) { categoryGroup.push(products[i]); } } selectProducts(); } } } function selectProducts() { if(searchTerm.value.trim() === '') { finalGroup = categoryGroup; updateDisplay(); } else { var lowerCaseSearchTerm = searchTerm.value.trim(); for(var i = 0; i < categoryGroup.length ; i++) { var searchField = ['Site', 'ID', 'Gorge', 'Quantity of Artefacts']; if(categoryGroup[i].Gorge.indexOf(lowerCaseSearchTerm) !== -1) { finalGroup.push(categoryGroup[i]); } } updateDisplay(); } } function updateDisplay() { while (main.firstChild) { main.removeChild(main.firstChild); } if(finalGroup.length === 0) { var para = document.createElement('p'); para.textContent = 'No results to display!'; main.appendChild(para); } else { for(var i = 0; i < finalGroup.length; i++) { fetchBlob(finalGroup[i]); } } } function fetchBlob(product) { var url = 'img/' + product.ID +".jpg"; var request = new XMLHttpRequest(); request.open('GET', url); request.responseType = 'blob'; request.onload = function() { if(request.status === 200) { var blob = request.response; var objectURL = URL.createObjectURL(blob); showProduct(objectURL, product); } else { console.log('Network request for "' + product.name + '" image failed with response ' + request.status + ': ' + request.statusText); showProduct(objectURL, product); } }; request.send(); } function showProduct(objectURL, product) { var section = document.createElement('section'); var heading = document.createElement('h2'); var para = document.createElement('p'); var image = document.createElement('img'); section.setAttribute('class', product.Site); heading.textContent = product.Site.replace(product.Site.charAt(0), product.Site.charAt(0).toUpperCase()); para.setAttribute('style', 'white-space: pre;') para.textContent = "ID: " + product.ID + "\\r\\nSite: " + product.Site + "\\r\\nGorge: " + product.Gorge; image.src = objectURL; image.alt = product.Site; main.appendChild(section); section.appendChild(heading); section.appendChild(para); section.appendChild(image); } } 

 * { box-sizing: border-box; } body { font-family: 'Lato'; font-family: Arial; margin: 0; } .header { padding: 60px; text-align: center; background: #1abc9c; color: white; } .navbar { display: flex; top: 0; position: sticky; background-color: #333; } .navbar a { color: white; padding: 14px 20px; text-decoration: none; text-align: center; } .navbar a:hover { background-color: #ddd; color: black; } .row { display: flex; flex-wrap: wrap; } .filters { flex: 20%; background-color: #f1f1f1; padding: 20px; } .main { flex: 80%; background-color: white; padding: 20px; } .fakeimg { background-color: #aaa; width: 100%; padding: 20px; } .footer { padding: 20px; text-align: center; background: #ddd; } @media screen and (max-width: 700px) { .row, .navbar { flex-direction: column; } } #topBtn { display: none; height: 64px; width: 64px; position: fixed; bottom: 20px; right: 30px; border: none; outline: none; cursor: pointer; background-color: rgba(0, 0, 0, 0); background-image: url("../img/icons/back-top.png") } 

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Brandberg-Portal</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <header id="header"></header> <div class="header"> <h1>Brandberg</h1> <p>Find <b>everything</b> about the Brandberg.</p> </div> <div class="navbar"> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> </div> <div class="row"> <div class="filters"> <h2>Filters</h2> <form> <label for="searchTerm">Search:</label> <input type="text" id="searchTerm" name="searchTerm" placeholder="Search"> <div id="returnJSONValue"></div> <h3>Categories</h3> <select id=category> <option selected>All</option> <option>Images </option> <option>Books</option> <option>Sites</option> </select> <button>Filter results</button> </form> </div> <div class="main"> <main> </main> </div> </div> <div class="footer"> <h2>Footer</h2> <button onclick="topFunction()" id="topBtn" title="Nach oben"></button> <script src="script.js"></script> </body> </html> 

Here is a snippet of the json file:

[
 {
   "ID": 1,
   "Site": "A 1",
   "Longitude UTM": 446253.881,
   "Latitude UTM": 7657736.83,
   "Elevation": 1343.3374,
   "Gorge": "Amis",
   "Site Nickname": "",
   "Discoverer": "",
   "Date of Discovery": "",
   "Publication": "Pager; Harald: The Rock Paintings of the Upper Brandberg; Part 1 � Amis Gorge. Africa Praehistorica 1 (K�ln: Heinrich Barth Institut); 1989.",
   "ISBN 10": "3-927688-01-0",
   "Site Pager": "A 1",
   "Number of Figures": 44,
   "Figure Category": "4",
   "Distance to next Site": 590.7813,
   "Next Site": "A 4",
   "Cardinal Points": "SE",
   "Painting Location": "5; 6",
   "Water in Sight": null,
   "Water Availability": ">300m",
   "Open Field in Sight": null,
   "Open Field": "adjacent",
   "Living Place": "unfavourable",
   "Spatiality": "19",
   "Visibility": "<15m",
   "Context": "isolated",
   "View from Site": "magnificent",
   "Evidence of Human Occupation": "NA",
   "Degradation of Paintings": "NA",
   "Quantity of Artefacts": "medium quantity",
   "Lithics": "NA",
   "Pottery": "NA",
   "O.E.S.": "NA",
   "Bone": "NA",
   "Charcoal": "NA",
   "Grinding Implements": "NA",
   "Stone Structures": "NA",
   "Miscellenous Artefact": "NA",
   "Remarks": ""
 },
 {
   "ID": 2,
   "Site": "A 2",
   "Longitude UTM": 447469.166,
   "Latitude UTM": 7657906.65,
   "Elevation": 1349.5029,
   "Gorge": "Amis",
   "Site Nickname": "",
   "Discoverer": "",
   "Date of Discovery": "",
   "Publication": "Pager; Harald: The Rock Paintings of the Upper Brandberg; Part 1 � Amis Gorge. Africa Praehistorica 1 (K�ln: Heinrich Barth Institut); 1989.",
   "ISBN 10": "3-927688-01-0",
   "Site Pager": "A 2",
   "Number of Figures": 91,
   "Figure Category": "3",
   "Distance to next Site": 43.481,
   "Next Site": "A 3",
   "Cardinal Points": "NW",
   "Painting Location": "5; 8; 11",
   "Water in Sight": null,
   "Water Availability": "within shouting distance",
   "Open Field in Sight": true,
   "Open Field": "within shouting distance",
   "Living Place": "spacious",
   "Spatiality": "16",
   "Visibility": "<15m",
   "Context": "marginal",
   "View from Site": "poor",
   "Evidence of Human Occupation": "NA",
   "Degradation of Paintings": "NA",
   "Quantity of Artefacts": "none",
   "Lithics": "NA",
   "Pottery": "NA",
   "O.E.S.": "NA",
   "Bone": "NA",
   "Charcoal": "NA",
   "Grinding Implements": "NA",
   "Stone Structures": "NA",
   "Miscellenous Artefact": "NA",
   "Remarks": ""
 },
 {
   "ID": 3,
   "Site": "A 3",
   "Longitude UTM": 447975.713,
   "Latitude UTM": 7657099.186,
   "Elevation": 1354.0356,
   "Gorge": "Amis",
   "Site Nickname": "",
   "Discoverer": "",
   "Date of Discovery": "",
   "Publication": "Pager; Harald: The Rock Paintings of the Upper Brandberg; Part 1 � Amis Gorge. Africa Praehistorica 1 (K�ln: Heinrich Barth Institut); 1989.",
   "ISBN 10": "3-927688-01-0",
   "Site Pager": "A 3",
   "Number of Figures": 223,
   "Figure Category": "2",
   "Distance to next Site": 43.481,
   "Next Site": "A 2",
   "Cardinal Points": "NW",
   "Painting Location": "5; 6; 10",
   "Water in Sight": null,
   "Water Availability": "within shouting distance",
   "Open Field in Sight": null,
   "Open Field": "within shouting distance",
   "Living Place": "spacious",
   "Spatiality": "10",
   "Visibility": "<15m",
   "Context": "marginal",
   "View from Site": "poor",
   "Evidence of Human Occupation": "NA",
   "Degradation of Paintings": "NA",
   "Quantity of Artefacts": "many",
   "Lithics": "NA",
   "Pottery": "NA",
   "O.E.S.": "NA",
   "Bone": "NA",
   "Charcoal": "NA",
   "Grinding Implements": "NA",
   "Stone Structures": "NA",
   "Miscellenous Artefact": "NA",
   "Remarks": ""
 },
 {
   "ID": 831,
   "Site": "U 58",
   "Longitude UTM": 453634.054,
   "Latitude UTM": 7667435.316,
   "Elevation": 1878.5487,
   "Gorge": "Umuab",
   "Site Nickname": "",
   "Discoverer": "Shipahu",
   "Date of Discovery": "21.03.1983",
   "Publication": "Pager; Harald: The Rock Paintings of the Upper Brandberg; Part 4 � Umuab and Karoab Gorges. Africa Praehistorica 10 (K�ln: Heinrich Barth Institut); 1998.",
   "ISBN 10": "3-927688-16-9",
   "Site Pager": "U 58",
   "Number of Figures": 9,
   "Figure Category": "5",
   "Distance to next Site": 105.1026,
   "Next Site": "U 59",
   "Cardinal Points": "E",
   "Painting Location": "1",
   "Water in Sight": true,
   "Water Availability": "adjacent",
   "Open Field in Sight": null,
   "Open Field": ">300m",
   "Living Place": "� vertical rock",
   "Spatiality": "0",
   "Visibility": "<15m",
   "Context": "marginal",
   "View from Site": "rather nice",
   "Evidence of Human Occupation": "none",
   "Degradation of Paintings": "water run-off",
   "Quantity of Artefacts": "none",
   "Lithics": "NA",
   "Pottery": "NA",
   "O.E.S.": "NA",
   "Bone": "NA",
   "Charcoal": "NA",
   "Grinding Implements": "NA",
   "Stone Structures": "NA",
   "Miscellenous Artefact": "NA",
   "Remarks": ""
 },
 {
   "ID": 832,
   "Site": "U 59",
   "Longitude UTM": 453919.687,
   "Latitude UTM": 7667338.425,
   "Elevation": 1918.9147,
   "Gorge": "Umuab",
   "Site Nickname": "",
   "Discoverer": "Dr. D. Craven",
   "Date of Discovery": "18.08.1984",
   "Publication": "Pager; Harald: The Rock Paintings of the Upper Brandberg; Part 4 � Umuab and Karoab Gorges. Africa Praehistorica 10 (K�ln: Heinrich Barth Institut); 1998.",
   "ISBN 10": "3-927688-16-9",
   "Site Pager": "U 59",
   "Number of Figures": 3,
   "Figure Category": "6",
   "Distance to next Site": 105.1026,
   "Next Site": "U 58",
   "Cardinal Points": "NE",
   "Painting Location": "10",
   "Water in Sight": true,
   "Water Availability": "adjacent",
   "Open Field in Sight": null,
   "Open Field": ">300m",
   "Living Place": "spacious",
   "Spatiality": "5",
   "Visibility": "<3m",
   "Context": "isolated",
   "View from Site": "magnificent",
   "Evidence of Human Occupation": "none",
   "Degradation of Paintings": "water run-off",
   "Quantity of Artefacts": "medium quantity",
   "Lithics": "NA",
   "Pottery": "NA",
   "O.E.S.": "NA",
   "Bone": "NA",
   "Charcoal": "NA",
   "Grinding Implements": "NA",
   "Stone Structures": "NA",
   "Miscellenous Artefact": "NA",
   "Remarks": ""
 }]

Answer 1

The below function will search through a pre-defined, products , array of objects values and return the objects from that array that contain the search term passed as an argument. The prop parameter allows you to search on specific keys only.

This answer , provided some insights into how to search through an array of values.

I have created this JSFiddle to illustrate a working example using the below.

 function searchJson(term, prop) {

    if (products.length < 1) {
      return;
    }

    const matches = [];

    for (let i = 0; i < products.length; i++) {

      var exists = Object.keys(products[i]).some((k) => {
        if (null !== products[i][k]) {
          if (prop === 'All') {
            return products[i][k].toString().indexOf(term) > -1;
          }
          return products[i][prop].toString().indexOf(term) > -1;
        }
      });

      if (exists) {
        matches.push(products[i]);
      }

    }
    return matches;

  }

Hope this helps.