1

ここで、配列、.each、およびその他のソリューションに関する複数の記事を読みましたが、これらのいずれも、私がやろうとしていることの問題を示していません。

ボタンがクリックされた場所に移動したいのですが、そのボタンの値が保存され、配列内のオブジェクトの値と比較されます。一致が見つかった場合、その一致をページの一部に .append する必要があります。

ボタンのクリックが登録されていることはわかっています。私はそれをページに追加し、適切な値を表示しました。.each を使用して配列内のすべてのオブジェクトを反復処理し、.append をページに追加できることもわかっています。ただし、以下の例の従業員を単に .append すると、[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" },
]

他にも行がありますが、これは例では機能します。

これは、ボタンの値と配列の値を比較したい関数です。(ここで従業員を単に .append すると、[object Object] が得られます)

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

        });
    });
});

現在、結果が見つかりませんでした。

4

5 に答える 5

2

いくつかの問題があります。1 つ目は、生のオブジェクトをボタンの値と比較しようとしていることです(employee == buttonValue)。代わりに、探しているもの、つまり言語と比較する必要がありますemployee.language == buttonValue

2 つ目は、配列内のいずれかのオブジェクトが一致しない場合、それが追加されることno resultsです。これは、結果が見つかったかどうかを示すフラグを設定することで解決できます。.eachループの外側でフラグを作成し、false に設定します。結果が見つかった場合は、フラグを true に設定します。ループチェックの後、.each結果が設定されているかどうかを確認します。設定されていない場合は、結果を表示しません。

これが実用的なソリューションです。

$('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>');
    }
});
于 2013-01-04T16:01:21.320 に答える
1

if statementボタンの値を従業員の言語の値と比較する場合は、次のように変更する必要があります。

変化する：

if (employee == buttonValue) {

に：

if (employee.language == buttonValue) {

実例：http：//jsfiddle.net/fewds/7MYED/

于 2013-01-04T15:56:54.930 に答える
1

まず、employeeオブジェクト内の特定の値ではなく、employeeオブジェクト全体をチェックしていました。

次に、従業員がボタンの値と一致しなかった場合、「見つからない」ロジックが出力されるため、検索全体の最後に移動しました。

    $(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()
于 2013-01-04T15:57:58.810 に答える
0

従業員はキーと値のペア (つまり) オブジェクトです...そして、オブジェクトを変数値と比較しようとしています...だからうまくいきません...

比較する必要がある値を取得してみてください...「。」を使用するだけで、オブジェクトから値を取得してみてください。オペレーター...従業員.名...と言う

そして、比較を行います...うまくいきます...

于 2013-01-04T16:01:48.070 に答える
0

代わりに$.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>');
        }
    });
});​

配列をループしているため、配列内で一致するオブジェクトが少なくとも 1 つ見つかったとしても、一致しない場合は No Results を追加しているためです。

JSFIDDLE

于 2013-01-04T16:05:19.027 に答える