Как искать в файле JSON?

Question

Как создать форму поиска, которая будет искать введенный термин внутри файла JSON?

Таким образом, если поисковый запрос равен названию внутри объекта местоположения, он должен вернуть эту информацию об объекте. Если совпадения нет, дать обратную связь с пользователем, что есть никакие пункты не найдены

Я создал поиска вход:

<form action="" method="get">    
     <input id="search" type="text" placeholder="Search term"> 
     <input type="submit" class="button"> 
    </form> 

Моя JSON выглядит следующим образом:

{ 
    "title": "Locations", 
    "locations": [ 
     { 
      "title":  "New York", 
      "url":   "api/newyork.js" 
     },{ 
      "title":  "Dubai", 
      "url":   "api/dubai.js" 
     },{ 
      "title":  "Netherlands", 
      "url":   "api/netherlands.js" 
     },{ 
      "title":  "Lanzarote", 
      "url":   "api/lanzarote.js" 
     },{ 
      "title":  "Italy", 
      "url":   "api/italy.js" 
     } 

    ] 
} 

Update:

Я придумал следующее, используя jQuery:

$("#search").change(function() { 
      var arrival = $(this).val(); 

      $.getJSON("api/videoData.js") 
      .done(function(data) { 
       // update your ui here 
       console.dir(data.pages); 
       var dataArr = data.pages; 

       // Iterate over each element in the array 
       for (var i = 0; i < dataArr.length; i++){ 
        // look for the entry with a matching `code` value 
        if (dataArr[i].title == arrival){ 
         // we found it 
         console.log(dataArr[i].title); 
        } else { 
         console.log('Houston, we have a problem'); 
        } 
       } 

      }).fail(function(data) { 
      // handle error here 
       console.log('no results found'); 
      }); 

     }); 

Это работает, только его следует вводить точно так же, как и в JSON. Итак, когда вы ищете «Италия», и вы используете строчный тип, он не найдет объект. Также он не будет вводить никаких записей при поиске, например: ne. Я хотел бы получить Нидерланды и Нью-Йорк в качестве результатов поиска.

Answer 1

Решение имеет несколько шагов, дайте нам знать, какой шаг вы не можете сделать:

1. вызвать функцию JS, когда пользователь нажимает на кнопку
2. Чтение файла с диска на сервере в переменная JS в браузере
3. Используйте lodash.js, чтобы получить URL из переменной JS для термина поиска
4. результаты отображения пользователю

---

Но, принимая удар на самом простом ответе, как я хотел бы сделать это:

Загрузите файл в формате JSON со страницей, как и любой файл Javascript. Загрузить lodash.js.

Позвоните towns.js JSON файл и сделать его выглядеть следующим образом:

var cities = 
{ 
    "title": "Locations", 
    "locations":  
    [ 
     { 
      "title":  "New York", 
      "url":   "api/newyork.js" 
     }, 
     { 
      "title":  "Dubai", 
      "url":   "api/dubai.js" 
     } 
    ] 
} 

И тогда ваш HTML-то вроде этого:

<input type="" class="button" onclick='go()'> 

<script src='towns.js' /> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js' /> 
<script> 
    function go() 
    { 
     var name = document.getElementById('search').value; 
     var result = _.find(cities.locations, {'title': name}); 
     if (!result) 
      window.alert('Nothing found'); 
     else 
      window.alert('Go to ' + result.url); 
    } 
<script> 

Answer 2

Как вы сказали в своем обновлении с этим кодом :

Поэтому, когда вы ищете «Италия», и используете нижний регистр, он не найдет объект. Кроме того, он не будет вводить никаких записей при поиске, например: ne. Я хотел бы получить Нидерланды и Нью-Йорк в качестве результатов поиска.

$ ("# поиск"). Изменение (функция() { var arrival = $ (this).Val();

 $.getJSON("api/videoData.js", { arrivalDate: arrival }) 
     .done(function(data) { 
      // update your ui here 
      console.dir(data.pages); 
      var dataArr = data.pages; 

      // Iterate over each element in the array 
      for (var i = 0; i < dataArr.length; i++){ 
       // look for the entry with a matching `code` value 
       if (dataArr[i].title == arrival){ 
        // we found it 
        console.log(dataArr[i].title); 
       } else { 
        console.log('Houston, we have a problem'); 
       } 
      } 

     }).fail(function(data) { 
     // handle error here 
      console.log('no results found'); 
     }); 

    }); 

Замените эту строку:

if (dataArr[i].title == arrival){ 

для

if (dataArr[i].title.toLowerCase().contains(arrival.toLowerCase())){ 

И теперь он будет соответствовать всем строку, содержащую строку, которую вы ищите ...

Answer 3

Если вы намереваетесь, чтобы ваш json-файл был статичным и не очень большим, тогда вы можете загрузить его сразу на событие загрузки страницы (предотвращая отправляя одни и те же запросы десятки раз). Попробуйте этот подход:

var xhr = new XMLHttpRequest(), 
     locations = {}; 

xhr.overrideMimeType("application/json"); 
xhr.open('GET', 'locations.json', true); 
xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4 && xhr.status == "200") { 
     var content = JSON.parse(this.response), 
       locations_arr, i, count, title; 

     locations_arr = content['locations']; 
     for (i = 0, count = locations_arr.length; i < count; i++) { 
      title = locations_arr[i]['title'].toLowerCase(); 
      locations[title] = locations_arr[i]; 
     } 
     console.log(locations); 
    } 

}; 
xhr.send(null); 

Добавить некоторый идентификатор вашего элемента формы (id="myForm") и «имя» атрибут вашего поля ввода (name="search");

document.getElementById('myForm').onsubmit = function() { 
    var search_value = this.search.value.trim().toLowercase(); 
    if (search_value && location[search_value]) { 
     console.log(location[search_value]); 
    } else { 
     alert("Object with specified title not found!"); 
    } 
    // You must return false to prevent the default form behavior 
    return false; 
    } 

Answer 4

Вот фрагмент, который демонстрирует, как можно выполнить поиск. Он только загружает JSON один раз. Я включил тестовые данные, когда запрос JSON завершился неудачно, что будет в этой демонстрации. При каждом изменении входного значения короткий список совпадений показан в div ниже input. Кнопка отправки не включена, так как поиск выполняется незамедлительно.

Попробуйте.

// testData is defined for demo only. Can be removed 
 
var testData = [ 
 
    { 
 
     "title":  "New York", 
 
     "url":   "api/newyork.js" 
 
    },{ 
 
     "title":  "Dubai", 
 
     "url":   "api/dubai.js" 
 
    },{ 
 
     "title":  "Netherlands", 
 
     "url":   "api/netherlands.js" 
 
    },{ 
 
     "title":  "Lanzarote", 
 
     "url":   "api/lanzarote.js" 
 
    },{ 
 
     "title":  "Italy", 
 
     "url":   "api/italy.js" 
 
    } 
 
]; 
 
// Variable to hold the locations 
 
var dataArr = {}; 
 
// Load the locations once, on page-load. 
 
$(function() { 
 
    $.getJSON("api/videoData.js").done(function(data) { 
 
     window.dataArr = data.pages; 
 
    }).fail(function(data) { 
 
     console.log('no results found'); 
 
     window.dataArr = testData; // remove this line in non-demo mode 
 
    }); 
 
}); 
 
// Respond to any input change, and show first few matches 
 
$("#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 
 
}); 
 
// submit button is not needed really

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input id="search" type="text" placeholder="Search term"> 
 
<div id="matches" style="height:70px; overflow-y:hidden; white-space:pre"></div>