How to make an API call to show data?

Question

I need to make an API call. The API consists of several arrays containing objects and the objects have 18 keys which I need to display.

How can I just display everything? I have tried doing fetch and ajax calls but none of them seem to work. What am I doing wrong here? Thanks beforehand.

async function events() {
  return $.ajax("/api/address");
  getEvents: function getEvents() {
    return $.ajax("/api/address");
  };
  targetMarket: function targetMarket(id, events) {
    return events.filter(function(event) {
      return event.eventID === id;
    });
  };
  eventsName: function eventsName(events, name) {
    return events.filter(function(event) {
      return events.event.eventID === events.eventID;
    });
  };
}

Hmm maybe first thing you'd want to do is not use jquery ajax but angular's `HttpClient`? — penleychan, Feb 12 '19 at 21:38
Is this [tag:angular] because the code does not look like it at all. Start by creating an [mcve] with a clear description of what is not working. If this *is* actually [tag:angular] then start with the documentation and tutorials on the https://angular.io site, they are excellent. — Igor, Feb 12 '19 at 21:39
It could potentially be internal to AngularJS- but I agree, Angular tag should be removed. — , Feb 12 '19 at 21:40
sorry, there is no Angular and I am also a newbie developer. I am trying to understand how to make an API call and show data ( ajax call of the data being logged). — Anthony, Feb 12 '19 at 21:48

score 0 · Answer 1 · answered Feb 12 '19 at 21:54

API calls can look a little intimidating starting off, keep at it!

Here's an example of getting simple data using an Ajax call to an API. This is in plain JavaScript, no libraries needed:

let cryptoData;

function ajaxGet(url) {
  return new Promise(function(resolve, reject) {
    let req = new XMLHttpRequest();
    req.open('GET', url);
    req.onload = function() {
      if (req.status === 200) {
        resolve(req.response);
        cryptoData = JSON.parse(req.response); // the API response with the data is here (req.response). We use the JSON.parse() method to convert req.response string into a JSON object, since it originally comes in as a string.
        showAjaxData();
      } else {
        reject(Error(req.statusText));
      }
    };
    req.onerror = function(err) {
      reject(Error("Looks like we've got an error..."));
    };
    req.send();
  });
}


function showAjaxData() {
  console.log(cryptoData[0]);
}

ajaxGet(`https://api.coinmarketcap.com/v1/ticker/bitcoin/`);

You can see the code in action at this JS Fiddle demo. Just remember to open the browser console to view the logged API data.

Feel free to check out this w3schools tutorial on Ajax calls.

Hope this helps :)

I forgot to add, `console.log(cryptoData[0]);` will display the entire JSON object. If you want to view/ save each item, simply use the [property accessors](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors) such as `console.log(cryptoData[0].name);`, and this will return "Bitcoin" as a string. You can do this for all the data points you like! — Sam Sverko, Feb 12 '19 at 22:00

How to make an API call to show data?

1 Answers1