Calling the Web API with Javascript and jQuery

I don't have much experience with java-script and I am having difficulty with java-script callback. I am wondering if any experts here would help me out of my struggle with this code. The think is that i am trying to do call back from .json file and search it by id. I am able to see all the customer but not able to search any of them.

Here is the my code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Kunde</title>
</head>
<body>

    <div>
        <h2>Kunde</h2>
        <ul id="ALLEKUNDE" />
    </div>
    <div>
        <h2>Search by ID</h2>
        <input type="text" id="KUNDE" size="5" />
        <input type="button" value="Search" onclick="find();" />
        <p id="RESULTS" />
    </div>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
    <script>
        var uri = 'json.json';

    $(document).ready(function () {
      // Send an AJAX request
        $.getJSON(url)
          .done(function (data) {
            // On success, 'data' contains a list of products.
            $.each(data, function (key, item) {
              // Add a list item for the product.
              $('<li>', { text: formatItem(item) }).appendTo($('#ALLEKUNDE'));
            });
          });
    });

    function formatItem(item) {
        //return item.name + item.phone;
        return item.ID  + item.name + item.phone + item.contact + item.balanceLCY + item.creditLimitLCY;
        //'ID= ' + item.ID, + 'name = ' + item.name, "<br />" + 'phone = ' + item.phone, "<br />" + 'contact = ' + item.contact, "<br />" + 'balanceLCY= ' + item.balanceLCY, "<br />" + 'creditLimitLCY = ' + item.creditLimitLCY
    }

    function find() {
      var id = $('#KUNDE').val();
      $.getJSON(uri)
          .done(function (data) {
            $('#RESULTS').text(formatItem(data));
          })
          .fail(function (jqXHR, textStatus, err) {
            $('#RESULTS').text('Error: ' + err);
          });
    }
    </script>
</body>
</html>

Solution

From what I can tell from your code the uri 'json.json' returns an array of json objects. In the first getJSON call the done functions parameter 'data' contains these json objects. Then you loop through each of these objects and pass them one by one into the formatItem. This looks correct.

In the find method you are using the same uri 'json.json' but here you don't loop through the objects, instead you send them all to the formatItem function which expects on single object.

So, To get the object which has the id in $('#KUNDE').val() from the array you can use filter on the array of objects

var item = array.filter(function ( obj ) {
    return obj.ID  === id;
})[0];

And to implement it in your find function

function find() {
  var id = $('#KUNDE').val();
  $.getJSON(uri)
      .done(function (data) {

        var item = data.filter(function ( obj ) {
                return obj.ID  === id;
            })[0];

        if( typeof item !== 'undefined' || item !== null ){
            $('#RESULTS').text(formatItem(item));
        }
      })
      .fail(function (jqXHR, textStatus, err) {
        $('#RESULTS').text('Error: ' + err);
      });
}