2016-02-28 167 views
-1

我有讀取一個JSON文件,有很多在這信息的Node.js服務器。其中之一是一個人的ID,我在我的HTML頁面中有一個搜索框我想爲客戶端找一個jquery方法(需要ajax)來查找用戶放在搜索框中的ID是否與ID在JSON中,如果是我想返回關於該人的一些信息,讓我們說用戶的名字和用戶名。搜索框結果== JSON結果

注:我100%肯定,我的server.js文件的工作。

請幫助我,我很親切jQuery的一個新手。

我至今;

$(document).ready(function(){ 
    $("#id_of_the_search_box_button").click(function (any_function_variable_name) { 
    $.ajax({ 
     type: 'GET', 
     url: '/url_of_the_related_server_side', 
     dataType: 'json' 
     }) 
      .done(function(data){ 
       console.log(data); 
       alert(JSON.stringify(data)); 

       data.forEach(function (any_function_variable_name) { 

       if(any_function_variable_name.search_box_ID == any_function_variable_name.name_in_the_JSON_file_for_one_of_the_searched_ID){ 

        $userElement = $("<li>").html("<strong>ID: </strong>" + any_function_variable_name.id); //id is defined in JSON and I was able to use in another part of the jquery 
        $userBlock = $("<ul>") 
         .append(
          $("<li>").html("<strong>Name: </strong>" + any_function_variable_name.name) //name of the user 
         ) 
         .append(
          $userElement 
         ) 
         .append(
          $("<li>").html("<strong>User User Name: </strong>" + any_function_variable_name.userName) 
         ); 
                    $any_function_variable_nameBlock.insertAfter("#search"); 
      } 
      }); 
    });})}) 

注意:我不知道是否可以右括號括起來。

在此先感謝!

+0

你能提供你的json文件的結構嗎?樣本數據將幫助... –

+0

[{... 「ID」:37595960858, 「in_reply_to_screen_name」:空, 「用戶」:{ \t 「ID」:2384451, \t 「ID_STR」: 「238678」 , \t 「名」: 「我多加」, \t 「SCREEN_NAME」: 「IDoga」, ... 「ID」:65739068412, 「in_reply_to_screen_name」:空, 「用戶」:{ \t 「ID」:2878009, \t 「ID_STR」: 「235678」, \t 「名」: 「喬恩·多伊」, \t「USER_NAME」:「JD」, ... }] 用戶在搜索框中應該匹配與一個不是在用戶寫入的ID。 –

+0

PS:我不使用表達 –

回答

0

我猜你正在尋找的東西一樣,如下圖所示...

而不是調用Ajax,我用下面的靜態數據寫...

HTML

<input id="searchBox" type="text" /> 
<button id="id_of_the_search_box_button"> 
Search 
</button> 

<ul> 

</ul> 

JS

var data = [ 
    { 
    "id": 37595960858, 
    "in_reply_to_screen_name": null, 
    "user": { 
     "id": 2384451, 
     "id_str": "238678", 
     "name": "Doga I", 
     "screen_name": "IDoga" 
    } 
    }, 
    { 
    "id": 65739068412, 
    "in_reply_to_screen_name": null, 
    "user": { 
     "id": 2878009, 
     "id_str": "235678", 
     "name": "Jon Doe", 
     "user_name": "JD" 
    } 
    } 
]; 


$(document).ready(function(){ 
    $("#id_of_the_search_box_button").click(function (any_function_variable_name) { 

    var searchText = parseInt($('#searchBox').val()); 


    data.forEach(function (any_function_variable_name) { 

     if(any_function_variable_name.id === searchText){ 

     $("ul") 
      .append('<li> <strong>ID: </strong>' + any_function_variable_name.user.id) 
      .append('<li> <strong>User Name: </strong>' + any_function_variable_name.user.user_name) 
      .append('<li> <strong>Name: </strong>' + any_function_variable_name.user.name) 
      .append('<li> <strong>Screen Name: </strong>' + any_function_variable_name.user.screen_name); 

     } //End if 

    }); //End forEach 

    }); 
}); 

使你這樣的Ajax調用...

$(document).ready(function(){ 
    $("#id_of_the_search_box_button").click(function (any_function_variable_name) { 
    $.ajax({ 
     type: 'GET', 
     url: '/url_of_the_related_server_side', 
     dataType: 'json' 
    }) 
    .done(function(data){ 


     var searchText = parseInt($('#searchBox').val()); 


     data.forEach(function (any_function_variable_name) { 

     if(any_function_variable_name.id === searchText){ 

      $("ul") 
      .append('<li> <strong>ID: </strong>' + any_function_variable_name.user.id) 
      .append('<li> <strong>User Name: </strong>' + any_function_variable_name.user.user_name) 
      .append('<li> <strong>Name: </strong>' + any_function_variable_name.user.name) 
      .append('<li> <strong>Screen Name: </strong>' + any_function_variable_name.user.screen_name); 

     } //End if 

     }); //End forEach 



    }); 
    }); 
}); 

以下是小提琴手

https://jsfiddle.net/rrtbz4bo/7/

輸入搜索框37595960858和點擊搜索。

UPDATE:調用/發現/ ID ID = ... API直接,如果它返回象

{ 
    "id": 37595960858, 
    "in_reply_to_screen_name": null, 
    "user": { 
     "id": 2384451, 
     "id_str": "238678", 
     "name": "Doga I", 
     "screen_name": "IDoga" 
    } 
    } 

然後下面應該工作數據。

$(document).ready(function(){ 
    $("#id_of_the_search_box_button").click(function (any_function_variable_name) { 
    $.ajax({ 
     type: 'GET', 
     //Or whatever your URL structure is 
     url: 'http://127.0.0.1:5230/find/id?Id=' + $('#searchBox').val(), 
     dataType: 'json' 
    }) 
    .done(function(data){ 
     $("ul") 
     .append('<li> <strong>ID: </strong>' + data.user.id) 
     .append('<li> <strong>User Name: </strong>' + data.user.user_name) 
     .append('<li> <strong>Name: </strong>' + data.user.name) 
     .append('<li> <strong>Screen Name: </strong>' + data.user.screen_name); 
    }); 
    }); 
}); 

如果這不起作用,張貼一個提琴手,我會盡量讓它工作。

希望這有助於...

+0

它沒有工作,我認爲這個問題比我想象的要大。感謝您的嘗試。 如果你不介意,你可以寫一個通用結構,因爲當我使用127.0.0.1:5230/find/id ?,並且寫入寫入ID時,我正在終端/控制檯上看到正確的答案(我有一個console.log())。問題是,我的jQuery Ajax應該看到搜索框的值與JSON中的值進行比較,如果匹配,他們需要返回該人的信息。 再次感謝 –

+0

然後刪除forEach循環,並設置您的ajax url喜歡.... url:' http://127.0.0.1:5230/find/id?Id='+ $('#searchBox' ).val()Ie直接用id調用api。 –

+0

如果您需要,您也可以直接使用http://api.jquery.com/jquery.getjson/而不是$ .post –