配列内に特定の文字列を含むオブジェクトのみを表示する

Question

文字列を入力できる場所を作成しようとしていましたが、jsはこの文字列を含むオブジェクトのみを表示していました。たとえば、私はAddress1と入力し、それぞれのアドレス値を検索して表示します（ここではName1になります）。ここに私のコードhttps://jsfiddle.net/76e40vqg/11/

HTML

<input> 
<div id="output"></div> 

はJS

var data = [{"image":"http://www.w3schools.com/css/img_fjords.jpg","name":"Name1","address":"Address1","rate":"4.4"}, 
{"image":"http://shushi168.com/data/out/114/38247214-image.png","name":"Name2","address":"Address2","rate":"3.3"}, 
{"image":"http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg","name":"Name3","address":"Address3","rate":"3.3"} 
]; 

var restoName = [], restoAddress = [], restoRate = [], restoImage= []; 
for(i = 0; i < data.length; i++){  
     restoName.push(data[i].name); 
     restoAddress.push(data[i].address); 
     restoRate.push(data[i].rate); 
     restoImage.push(data[i].image); 
} 

for(i = 0; i < restoName.length; i++){ 
document.getElementById('output').innerHTML += "Image : <a href='" + restoImage[i] + "'><div class='thumb' style='background-image:" + 'url("' + restoImage[i] + '");' + "'></div></a><br>" + "Name : " + restoName[i] + "<br>" + "Address : " + restoAddress[i] + "<br>" + "Rate : " + restoRate[i] + "<br>" + i + "<br><hr>"; 
    } 

ある

...私はここに求めていますなぜこれが、私は本当に多くのことを試してみましたが、何も作業していません

Answer 1

詳細を別々の配列として保存しないでください。代わりに、返されるデータオブジェクトに似た構造を使用します。あなたのJSFiddleの

for(i = 0; i < data.length; i++){ 
    if (data[i].address.indexOf(searchedAddress) !== -1) { // Get searchedAddress from user 
     document.getElementById("output").innerHTML += data[i].name; 
    } 
} 

編集：https://jsfiddle.net/76e40vqg/17/

乾杯！ここで

Answer 2

実用的なソリューションです：私はそれがどのように動作するかを見ることができるように

var data = [{"image":"http://www.w3schools.com/css/img_fjords.jpg","name":"Name1","address":"Address1","rate":"4.4"}, 
 
{"image":"http://shushi168.com/data/out/114/38247214-image.png","name":"Name2","address":"Address2","rate":"3.3"}, 
 
{"image":"http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg","name":"Name3","address":"Address3","rate":"3.3"} 
 
]; 
 
document.getElementById('search').onkeyup = search; 
 
var output = document.getElementById('output'); 
 

 

 
function search(event) { 
 
    var value = event.target.value; 
 
    
 
    output.innerHTML = ''; 
 
    
 
    data.forEach(function(item) { 
 
    var found = false; 
 
    Object.keys(item).forEach(function(val) { 
 
     if(item[val].indexOf(value) > -1) found = true; 
 
    }); 
 
    
 
    if(found) { 
 
     // ouput your data 
 
     var div = document.createElement('div'); 
 
     div.innerHTML = item.name 
 
     output.appendChild(div); 
 
    } 
 
    }); 
 
    
 
    return true; 
 
}

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

 
<div id="output"></div>