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

Please be more specific about your problem. What is not working? What is the desired result? — Spartacus
– Spartacus, Commented Oct 27, 2017 at 14:47

Wouter Bouwman · Accepted Answer · 2017-10-27 14:47:12Z

2

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/

answered Oct 27, 2017 at 14:47

Wouter Bouwman

1,0136 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3972776 Over a year ago

I really appreciate your answer and your clear explanation the hotel object contains many data what if i want to iterate these data like description and other data to show them in my page <Hotel> <Bootstrap>4</Bootstrap> <CheckIn i:nil="true"/> <CheckOut i:nil="true"/> <CityId i:nil="true"/> <CreationTime i:nil="true"/> <CreatorUserId i:nil="true"/> <Currency>2</Currency> <CurrencyTitle>SAR</CurrencyTitle> <DeleterUserId i:nil="true"/> <DeletionTime i:nil="true"/> <DisplayValue>Mubarak Hijrah Hotel</DisplayValue>

Wouter Bouwman Over a year ago

You're welcome. In my example you are iterating the data. You can extract the other data the same way as I've shown you to extract DisplayValue. Try replacing DisplayValue with another value to extract the other data.

user3972776 Over a year ago

thanks again , if you could to review my question after the new edits ,this would be nice to me

Wouter Bouwman Over a year ago

@ramyMorad, please try to build this functionality yourself first. If you find yourself in trouble, open another question on Stackoverflow.

Collectives™ on Stack Overflow

Retrieve array of data from web API using jQuery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related