搜索框结果== Json结果

Question

I have a Node.js server that reads a JSON file and there are a lot of information in it. One of them is ID of a person, I have a search box in my HTML page I wanna right a jquery method(ajax required) for the client side to find if the ID that the user put in the search box is the same as the ID in JSON, if it is I wanna return some information about that person, let's say name and username of the user.

Note: I am 100% sure that my server.js file works.

Please help me, I am kind of a newbie in Jquery.

I have so far;

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

Note: I don't know if I could close the brackets right.

Thanks in advance!

Answer 1

I guess you are looking for something like as shown below ...

Instead of making an ajax call, I wrote with static data as below ...

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

  });
}); 

which makes your ajax call like this ...

$(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



    });
  });
});

Following is the fiddler

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

Enter 37595960858 in search box and hit search.

UPDATE: call the /find/id?id=... api directly if it returns data like

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

Then following should work.

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

If this doesn't work, post a fiddler and i'll try and make it work.

Hope this helps ...