jQuery Suche JSON für einen bestimmten Wert

Question

Ich bin neu in jQuery und JSON (wenn Sie auf meinen Code unten schauen, werden Sie schnell sehen, wie neu ich bin).

Ich habe eine JSON-Datei und möchte Benutzern erlauben, einen Suchbegriff einzugeben (was ein Schlüssel in der JSON-Datei ist)) und den entsprechenden JSON-Wert auf der Webseite anzeigen zu lassen.

Ich habe dieses Forum und das Internet gesucht und anhand von Beispielen, die ich gefunden habe, habe ich ein Skript und etwas HTML gehackt, aber, Überraschung !, es funktioniert nicht. Ich habe eine grobe Vorstellung davon, was das Skript macht, aber ich finde es sehr schwierig herauszufinden, was falsch ist.

Ich hoffe, jemand kann helfen.

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) (. Die JSON-Datei als diese länger ich habe es vereinfacht):

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

Also, wenn ein Benutzer "B" in das HTML-Suchfeld eingibt, möchte ich "grün" auf der Webseite angezeigt werden.

Answer 1

Bitte versuchen Sie dies:

$('#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); 
    }); 
}); 

Mit etwas mehr Erklärung auf Ihrem spezielles Problem, kann ich in der Lage sein, das Sie in besseren Alternativen zu unterstützen.

Demo:https://jsfiddle.net/iRbouh/0z228fya/

Answer 2

Einfach Code:

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

Answer 3

Sie können wie unten grep für Filterdaten aus dem Array von Objekt verwenden.

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

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

Dieser Filter Daten von json aber in Ihrem Fall haben Sie Objekt aus dem Feld filtern für Schlüssel so können Sie each als

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) 

Dann nutzen Sie Ergebnis binden kann nach Bedarf. Ergebnis enthalten Array von gefilterter Objekt

Answer 4

dies versuchen:

$('#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); 

});