I'm quite new to using APIs.

I am trying to take the response Text and sort info from it into different areas of a card. I'm not asking for a quick answer, but rather some documentation that I can go over to get a full understanding.

var stat = document.getElementById('infoboxName');
var promise1 = new Promise(function(resolve, reject) {
  setTimeout(function() {

    var xhr = new XMLHttpRequest(),
      method = "GET",
      url = "";

    xhr.open(method, url, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
        stat.innerHTML = xhr.responseText;
        resolve("resolve");

      }
    };
    xhr.send();
  }, 300);
});

promise1.then(function(value) {
  console.log(value);


});

<div id='infoboxName'></div>

I'm quite new to using APIs.

I am trying to take the response Text and sort info from it into different areas of a card. I'm not asking for a quick answer, but rather some documentation that I can go over to get a full understanding.

var stat = document.getElementById('infoboxName');
var promise1 = new Promise(function(resolve, reject) {
  setTimeout(function() {

    var xhr = new XMLHttpRequest(),
      method = "GET",
      url = "https://www.anapioficeandfire./api/characters/124";

    xhr.open(method, url, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
        stat.innerHTML = xhr.responseText;
        resolve("resolve");

      }
    };
    xhr.send();
  }, 300);
});

promise1.then(function(value) {
  console.log(value);


});

<div id='infoboxName'></div>

response output

{
  "url": "https://www.anapioficeandfire./api/characters/124",
  "name": "Antario Jast",
  "gender": "Male",
  "culture": "",
  "born": "",
  "died": "",
  "titles": [
    "Lord"
  ],
  "aliases": [
    ""
  ],
  "father": "",
  "mother": "",
  "spouse": "https://www.anapioficeandfire./api/characters/616",
  "allegiances": [
    "https://www.anapioficeandfire./api/houses/212"
  ],
  "books": [
    "https://www.anapioficeandfire./api/books/2",
    "https://www.anapioficeandfire./api/books/3",
    "https://www.anapioficeandfire./api/books/5",
    "https://www.anapioficeandfire./api/books/8"
  ],
  "povBooks": [],
  "tvSeries": [
    ""
  ],
  "playedBy": [
    ""
  ]
}

• javascript

• What exactly do you want to sort? – Ele Commented Dec 11, 2018 at 22:24
• 1 Please paste the response output so we know what we're working with. – Joss Classey Commented Dec 11, 2018 at 22:25
• Hey Darren, it sounds like what you really want to do is to parse the data...not sort it. Do you know in advance the structure of the info? Does it have known 'sections'? – JayDM Commented Dec 11, 2018 at 22:26
• Is there any particular reason you need to fire that request inside a timeout? If not, it's just pausing for 300ms for no reason, so just take what's inside the function in setTimeout and move it out (and remove the call to setTimeout). – Herick Commented Dec 11, 2018 at 22:29
• It's not very clear what you want to do with the result, but the value argument in the callback function (then) at the bottom is whatever you're sending as a parameter to the resolve call above. It will be called at the right time, but you'll only be logging "resolve" by then. If you want to use the actual result, use resolve(xhr.responseText) above instead; – Herick Commented Dec 11, 2018 at 22:32

2 Answers 2

What you really want to do is parse that response, for doing that you can use JSON.parse which converts a JSON string into a JS Object.

After parsing that JSON string, you can access the data using the specific properties like name and gender.

On the other hand, I think you don't need that setTimeout at all.

This example parses the JSON string and gets the name and gender, likewise through the function resolve I'm passing the parsed JSON string as JS Object.

var nameElement = document.getElementById('name');
var genderElement = document.getElementById('gender');

var promise1 = new Promise(function(resolve, reject) {
  var xhr = new XMLHttpRequest(),
    method = "GET",
    url = "https://www.anapioficeandfire./api/characters/124";

  xhr.open(method, url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      resolve(JSON.parse(xhr.responseText));
    }
  };
  xhr.send();
});

promise1.then(function(value) {
  nameElement.textContent = value.name;
  genderElement.textContent = value.gender;
});

<div id='infoboxName'>
  <span id='name'></span>
  <p/>
  <span id='gender'></span>
</div>

It's a good thing that you're getting familiar with XMLHttpRequest, but for the sake of simplicity it's probably a good idea to start with a simpler syntax:

var stat = document.getElementById('infoboxName');
var apiResponse = await fetch("https://www.anapioficeandfire./api/characters/124");
var jsonParsedContents = await apiResponse.json(); // This is also a promise so must also wait for it

console.log(jsonParsedContents); // Do whatever you need with the object

If for some reason you cannot use fetch and must stick to XMLHttpRequest, then it's the value passed in your call to resolve you want to change:

var stat = document.getElementById('infoboxName');
var promise1 = new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest(),
        method = "GET",
        url = "https://www.anapioficeandfire./api/characters/124";

    xhr.open(method, url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            resolve(JSON.parse(xhr.responseText));
        }
    };
    xhr.send();
});

promise1.then(function(result) {
    console.log(result);
    // In here you'll probably want to stat.innerHTML = <some part of result>
});

In the code above I'm also assuming you want the promise to be handled in a different piece of code from where the API request is being sent, but if not, then you don't need that either and can simply do what you need with the response inside your if.