변수를 사용하여 배열을 반복하고 일치 항목을 표시하십시오. JQuery

Question

배열, .each 및 기타 솔루션과 관련하여 여기에 여러 기사를 읽었으나이 중 어떤 것도 나에게 무엇을하려고하는지에 대한 문제를 보여주지 못했습니다.

단추를 클릭 한 위치로 만들고 해당 단추의 값을 저장 한 다음 배열의 개체 값과 비교합니다. 일치하는 항목이 발견되면 그 일치 항목을 페이지의 일부로 첨부하고 싶습니다.

버튼 클릭을 알고 있습니다. 나는 그것을 페이지에 첨부하고 적절한 값을 표시했습니다. 배열의 모든 객체를 .each로 반복 할 수 있고, 페이지에 붙여 넣을 수 있다는 것도 알고 있습니다. 그러나 만약 내가 아래의 예제에서 employee를 첨부하면 나는 [object Object]를 얻고 비교 연산자가 올바르게 작동하지 않는다는 것을 알게된다. 내 문제를 보여 주거나 왜 작동하지 않는지 설명하면 도움이됩니다.

<button type="button" id="german" class="searchButton" value="German">German</button> 

이가 더 라인하지만 이것은 예를 들어 작동

employees = [ 
{ "firstName":"Alex", "lastName":"Hagerman", "language":"German", "department":"Nuerology", "position":"Nurse",   "skill":"Infection" }, 
] 

처럼 내 배열이 어떻게 생겼는지 한 줄입니다 : 여기

는 버튼입니다.

이 값은 버튼 값과 배열 값을 비교하려는 기능입니다. 현재 나는 단지를 찾을 수 없습니다 결과를 얻을

$(document).ready(function(){ 
    $('button').click(function(){ 
     var buttonValue = $(this).val(); 
     $.each(employees, function (i, employee) { 
       if (employee == buttonValue) { 
        $('#resultsView').append('<div class="searchResults">'+employee.firstName+employee.lastName+'<br />'+employee.language+'<br />'+employee.department+employee.position+'<br />'+employee.skill+'</div>'); 
      } 
       else { 
        $('#resultsView').append('<div id="resultsView" class="noResult">No results found</div>'); 
       } 

     }); 
    }); 
}); 

(난 그냥 여기 직원으로 .Append 할 수 있다면 나는 [개체 개체]를 얻을).

Answer 1

당신은 몇 가지 문제를 가지고있다 - 첫 번째 버튼 값으로 원시 개체를 비교하기 위해 노력하고 있다는 것입니다 : (employee == buttonValue)합니다. 대신 당신은 당신이 두 번째 배열의 모든 개체가 일치하지 않는 경우가 no results를 추가 것이라는 점이다 즉 언어 employee.language == buttonValue

를 들어, 찾고있는 무엇에 비교해야합니다. 결과를 찾았는지 아닌지를 나타내는 플래그를 사용하여 해결할 수 있습니다. .each 루프 외부에서 플래그를 만들고 false로 설정합니다. 결과에 플래그가 true로 설정되어 있으면 false로 설정됩니다. .each 루프가 결과가 설정되었는지 확인한 후 확인하십시오. 그렇지 않은 경우 결과가 표시되지 않습니다.

여기에 working solution이 있습니다.

$('button').click(function(){ 
    var but = this; 
    var results = false; 
    $.each(employees, function(index, employee){ 
     if(employee.language == but.value) 
     { 
      results = true; 
      $('#resultsView').append('<div class="searchResults">' + employee.firstName + employee.lastName + '<br />' + employee.language + '<br />' + employee.department + employee.position + '<br />' + employee.skill + '</div>'); 
     } 
    }); 
    if(!results) 
    { 
     $('#resultsView').append('<div id="resultsView" class="noResult">No results found</div>'); 
    } 
}); 

Answer 2

당신은 당신이이처럼 if statement 변경해야하는 직원의 언어 값으로 버튼 값을 비교하려면 :

변경 :

if (employee == buttonValue) { 

사람 :

if (employee.language == buttonValue) { 

을

예제 : http://jsfiddle.net/fewds/7MYED/

Answer 3

먼저 직원 개체 내의 특정 값이 아니라 전체 직원 개체를 확인했습니다.

둘째, 직원이 버튼 값과 일치하지 않으면 '찾을 수 없음'논리가 인쇄되므로 전체 검색의 끝으로 이동했습니다.

$(function(){ 
     $('button').click(function(){ 
      var buttonValue = $(this).val(), totalFinds = 0; 
      $.each(employees, function (i, employee) { 
       var isFound=false; 
       $.each(employee, function(key,value){ 
       //remove the 'key' check if it does not make sense for your needs 
       if(key == buttonValue || value == buttonValue){ 
        isFound = true; 
       } 
       }); //end employee loop 
       if(isFound){ 
       $('#resultsView').append('<div class="searchResults">'+employee.firstName+employee.lastName+'<br />'+employee.language+'<br />'+employee.department+employee.position+'<br />'+employee.skill+'</div>'); 
       totalFinds += 1; 
       } 
      });// end employees loop 
      if(totalFinds ===0){ 
       $('#resultsView').append('<div id="resultsView" class="noResult">No results found</div>'); 
      } 
     }); //end .click() 

    });//end .ready() 

Answer 4

직원은 키 - 값 쌍 (예) 객체입니다 ... 당신은 변수 값에 개체를 비교하기 위해 노력하고있다 ... 그래서의 Wnt 작업 ...

에 시도 당신이 비교할 필요가있는 값을 얻으십시오. 그냥 '.'을 사용하여 객체로부터 값을 얻으십시오. 운영자 ... employee.firstname 말 ... 다음

과 비교를 ... 그것은

이

Answer 5

당신은 루프를 통해 다음 ... 일치하는 모든 결과를 얻을 대신 $.grep()을 사용할 수 있습니다 ... 작동합니다 결과가없는 경우 요소가있는 경우 ... 요소를 추가 또는 추가

$(document).ready(function() { 
    $('button').click(function() { 
     var buttonValue = $(this).val(); 
     var results = $.grep(employees, function(data) { 
      return data.language == buttonValue; // return objects that have language = to button value 
     }) 
     if (results.length > 0) { // if 1 or more results loop through and print 
      $.each(results, function(i, employee) { 
       $('#resultsView').append('<div class="searchResults">' + employee.firstName + employee.lastName + '<br />' + employee.language + '<br />' + employee.department + employee.position + '<br />' + employee.skill + '</div>'); 
      }) 
     } else { // else append no results found 
      $('#resultsView').append('<div id="resultsView" class="noResult">No results found</div>'); 
     } 
    }); 
});​ 

당신이 배열을 통해 반복되기 때문에, 당신은 당신이 찾을 경우에도 일치하지 않을 때 어떤 결과를 추가되지 않으므로 적어도 배열에서 일치하는 하나의 객체

JSFIDDLE