jQuery search JSON для определенного значения

Question

Я новичок в jQuery и JSON (когда вы смотрите на мой код ниже, вы быстро увидите, насколько я новый).

У меня есть файл JSON, и я хочу разрешить пользователям вводить поисковый запрос (который будет ключом в файле JSON)), и на веб-странице будет отображаться соответствующее значение JSON.

Я искал этот форум и в Интернете, и, используя примеры, которые я нашел, я взломал скрипт и некоторый HTML, но, удивляя!, Он не работает. Я имею общее представление о том, что делает скрипт, но мне очень сложно разобраться в том, что не так.

Надеясь, что кто-то может помочь.

HTML:

<input type="search" name="search" id="search"> 

JQuery:

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

<script> 

$('#search').keyup(function() { 
    var searchField = $('#search').val(); 
    var myExp = new RegExp(searchField, "i"); 
    $.get('products.json', function(data) { 
     var output = '<ul class="searchresults">'; 
     $(data).find(searchField).each(function(index, value){ 
      var val = value.firstChild.nodeValue; 
      if ((val.search(myExp) != -1)) { 
       output += '<li>' + val + '</li>'; 
      }  
     }); 
     output += '</ul>'; 
     $('#result').html(output); 
    }); 
}); 

</script> 

JSON (products.json) (. Файл JSON будет больше, чем это я упростил):

{"colors":[ 
    {"A":"red"}, 
    {"B":"green"}, 
    {"C":"blue"} 
]} 

Итак, если пользователь вводит «B» в поле поиска HTML, я хочу, чтобы «зеленый» отображался на веб-странице.

Answer 1

Пожалуйста, попробуйте следующее:

$('#search').keyup(function() { 
    var searchField = $('#search').val(); 
    $.getJSON('https://api.myjson.com/bins/59t77', function(data) { 
    console.log(data); 
     var output = '<ul class="searchresults">'; 
     $.each(data.colors, function(k, obj) { 
      if(obj[searchField]) { 
       output += '<li>' + obj[searchField] + '</li>'; 
      } 
     }); 
     output += '</ul>'; 
     $('#result').html(output); 
    }); 
}); 

С более некоторого объяснения по конкретной проблеме, я могу быть в состоянии помочь вам в лучшей альтернативы.

Демо:https://jsfiddle.net/iRbouh/0z228fya/

Answer 2

Простой код:

if (typeof json.colors['B'] != 'undefined') { 
    console.log(json.colors['B']); 
} 

Answer 3

Вы можете использовать grep данных фильтров из массива объекта, как показано ниже.

http://manojmahato.com.np/javascript/jquery-remove-item-array-objects-jquery/

var id = 1; 
var result = $.grep(data, function(e){ 
return e.id != id; 
}); 

Этот фильтр данные JSON , но в вашем случае, вы должны отфильтровать объект из массива для ключ , так что вы можете использовать each в

var data = {"colors":[ 
    {"A":"red"}, 
    {"B":"green"}, 
    {"C":"blue"} 
]}; 

var result=[]; 
var SeacrchKey="A"; 
$.each(data.colors, function(key, value) { 
if (SeacrchKey in value) 
    result.push(value); 
}); 
console.log(result) 

Затем вы можете связать результат как требуется. результат содержит массив фильтруемого объекта

Answer 4

попробовать это:

$('#search').keyup(function() { 
var searchField = $('#search').val(); 
var output = '<ul class="searchresults">'; 
$.get('products.json', function(data) { 
    jQuery.each(data.colors, function(i, val) { 
     jQuery.each(val, function(i1, val1) { 
      if(i1==searchField){ 
       output += '<li>' + val1 + '</li>'; 
      } 
     }); 
    }); 
    output += '</ul>'; 
}); 
$('#result').html(output); 

});