从REST API调用解析JSON响应

Question

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.com/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.com/api/characters/124",
  "name": "Antario Jast",
  "gender": "Male",
  "culture": "",
  "born": "",
  "died": "",
  "titles": [
    "Lord"
  ],
  "aliases": [
    ""
  ],
  "father": "",
  "mother": "",
  "spouse": "https://www.anapioficeandfire.com/api/characters/616",
  "allegiances": [
    "https://www.anapioficeandfire.com/api/houses/212"
  ],
  "books": [
    "https://www.anapioficeandfire.com/api/books/2",
    "https://www.anapioficeandfire.com/api/books/3",
    "https://www.anapioficeandfire.com/api/books/5",
    "https://www.anapioficeandfire.com/api/books/8"
  ],
  "povBooks": [],
  "tvSeries": [
    ""
  ],
  "playedBy": [
    ""
  ]
}

Answer 1

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.com/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> 

Answer 2

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.com/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.com/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 .