Retrieve array of data from web API using jQuery

Question

This is a live link from a web API want to use: http://gmgapi.azurewebsites.net/SystemParameters/Hotels/GetAll?langId=en

This is my first time to call data from API so maybe I missed some setting

In html page I put some code like this to test the connection with API or not

  <div id="result"></div>

    <script>
(function() {
    var myAPI = "http://gmgapi.azurewebsites.net/SystemParameters/Hotels/GetAll?langId=en";
    $.getJSON(myAPI, {
    format: "json"
  })
    .done(function (data) {
        $("#result").html(data);
        alert("Load was performed.");  
    });
})();
    </script>

the array contained hotel data like hotel name , description and images i just need to call them using jquery

new edits this code is working properly to get the data from Api

 (function() { var myAPI = "https://gmgapi.azurewebsites.net/SystemParameters/Hotels/GetAll?langId=en"; $.getJSON(myAPI, { format: "json" }) .done(function(data) { doSomething(data); console.log("Load was performed."); }); })(); function doSomething(data) { for (var i = 0; i < data.length; i++) { var div = $("<div>"); var label = $("<label>").text(data[i].DisplayValue); $(div).append(label); $('#result').append(div); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="result"> </div> 

---

I need to make a href and user select the name hotel and retrieve the other data related to this hotel only

something like hotel 1 any user click on ot to get the all hotel data

Answer 1

If I understand you correctly, you want the data receiving from the API to be used to show as result as html?

(function() {
  var myAPI = "http://gmgapi.azurewebsites.net/SystemParameters/Hotels/GetAll?langId=en";
  $.getJSON(myAPI, {
      format: "json"
    })
    .done(function(data) {
      doSomething(data);
      alert("Load was performed.");
    });
})();

function doSomething(data) {
  for (var i = 0; i < data.length; i++) {
    var div = $("<div>");
    var label = $("<label>").text(data[i].DisplayValue);
    $(div).append(label);
    $('#result').append(div);
  }
}

http://jsfiddle.net/trf432xm/