XMLHTTPRequestからJSONデータを取得する

Question

ajaxで少し助けが必要です。

私はここに、犬の品種のリストを持っている：

breedListRequest.onload = function() { 
    var breedListData = JSON.parse(this.response); 
    var breeds = breedListData.message; 
    console.log('All Breeds'); 
    console.log(breeds); 
    console.log('Test'); 
    console.log(terrierSubBreed); // Testing sub breed object in console. 
} 

を次に、ここで、このsubbreedがあります：

terrierSubBreed.onload = function() { 
    var terrierSubBreedList = JSON.parse(this.response); 
    var terrierSubBreed = terrierSubBreedList.message; 
    console.log('Terrier Subbreed'); 
    console.log(terrierSubBreed); 
    return terrierSubBreed; 
} 

私はそのonloadからテリアサブ品種データ/オブジェクトを引くしようとしていますそれをBreed Listのオブジェクトに追加します。私がするたびに、私が得るものはすべてオブジェクトXMLHttpRequestであり、オブジェクト自体ではありません。

https://dog.ceo/api/breeds/list/all

https://dog.ceo/api/breed/terrier/list

Answer 1

あなたはterrierSubBreedList.messageでそれを埋めることができるようにterrierSubBreed.onload = function() {}の変数terrierSubBreed外を宣言してください。これが動作するかどうか

は試してみてください。

// Somewhere above, outside of functions 
var terrierSubBreed = ''; 

terrierSubBreed.onload = function() 
{ 
    var terrierSubBreedList = JSON.parse(this.response); 
    terrierSubBreed = terrierSubBreedList.message; 
    console.log('Terrier Subbreed'); 
    console.log(terrierSubBreed); 
} 

breedListRequest.onload = function() 
{ 
    // ... 

    if(terrierSubBreed.length > 0) console.log(terrierSubBreed); 
} 

Answer 2

あなたは問題なくXMLHttpRequest要求を行うためにヘルパー関数を使用する必要があります。このような

何か：

var newXHR = null; 
function sendXHR(type, url, data, callback) { 
    newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP"); 
    newXHR.open(type, url, true); 
    newXHR.send(data); 
    newXHR.onreadystatechange = function() { 
    if (this.status === 200 && this.readyState === 4) { 
     callback(this.response); 
    } 
    }; 
} 

上記のヘルパー関数は、すべてのブラウザで動作します。が

type

=この場合 GETには、HTTP動詞のようになります。

。

url =リクエストするURL文字列。

data = nullとすることができます。

callback =レスポンスが準備完了のときのコールバック機能。 (this.status === 200 && this.readyState === 4)。

使用法：あなたの質問について

// First request. 
sendXHR("GET", "https://dog.ceo/api/breeds/list/all", null, function(response) { 
    breeds = JSON.parse(response); // Stores the data of dog breeds in breeds variable. 

    // Second request. 
    sendXHR("GET", "https://dog.ceo/api/breed/terrier/list", null, function(response) { 
    subBreeds = JSON.parse(response); // Stores the data of dog sub breed in subBreeds variable. 

    subBreeds.message.map(function(x) { // For every sub breed appends the current value to the breeds.message.terrier array. 
     breeds.message.terrier.push(x); // x = sub breed. 
    }); 
    console.log(breeds.message); 
    }); 
}); 

：あなたはこの使用する必要があります。テリア配列にすべてのサブ品種については

subBreeds.message.map(function(x) { 
    breeds.message.terrier.push(x); 
}); 

は、breeds.message.terrier配列に現在の値を追加します。このような

何か：

(function() { 
 
    var newXHR = null, // Defined in the global scope. So we can abort XHR requests when it's necessary. 
 
    breeds = {}, // Declare the breeds object in the global scope. 
 
    subBreeds = {}; // Declare the subBreeds object in the global scope. 
 

 
    function sendXHR(type, url, data, callback) { 
 
    newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP"); 
 
    newXHR.open(type, url, true); 
 
    newXHR.send(data); 
 
    newXHR.onreadystatechange = function() { // Use onreadystatechange instead onload. 
 
     if (this.status === 200 && this.readyState === 4) { 
 
     callback(this.response); 
 
     } 
 
    }; 
 
    } 
 
    sendXHR("GET", "https://dog.ceo/api/breeds/list/all", null, function(response) { 
 
    breeds = JSON.parse(response); 
 
    sendXHR("GET", "https://dog.ceo/api/breed/terrier/list", null, function(response) { 
 
     subBreeds = JSON.parse(response); 
 
     subBreeds.message.map(function(x) { 
 
     breeds.message.terrier.push(x); 
 
     }); 
 
     console.log(breeds.message); 
 
    }); 
 
    }); 
 
}());

.as-console-wrapper { 
 
    position: relative; 
 
    top: 0; 
 
}

結果は次のようになります。

{ 
    "affenpinscher": [], 
    "african": [], 
    "airedale": [], 
    "akita": [], 
    "appenzeller": [], 
    "basenji": [], 
    "beagle": [], 
    "bluetick": [], 
    "borzoi": [], 
    "bouvier": [], 
    "boxer": [], 
    "brabancon": [], 
    "briard": [], 
    "bulldog": ["boston", "french"], 
    "bullterrier": ["staffordshire"], 
    "cairn": [], 
    "chihuahua": [], 
    "chow": [], 
    "clumber": [], 
    "collie": ["border"], 
    "coonhound": [], 
    "corgi": ["cardigan"], 
    "dachshund": [], 
    "dane": ["great"], 
    "deerhound": ["scottish"], 
    "dhole": [], 
    "dingo": [], 
    "doberman": [], 
    "elkhound": ["norwegian"], 
    "entlebucher": [], 
    "eskimo": [], 
    "germanshepherd": [], 
    "greyhound": ["italian"], 
    "groenendael": [], 
    "hound": ["Ibizan", "afghan", "basset", "blood", "english", "walker"], 
    "husky": [], 
    "keeshond": [], 
    "kelpie": [], 
    "komondor": [], 
    "kuvasz": [], 
    "labrador": [], 
    "leonberg": [], 
    "lhasa": [], 
    "malamute": [], 
    "malinois": [], 
    "maltese": [], 
    "mastiff": ["bull", "tibetan"], 
    "mexicanhairless": [], 
    "mountain": ["bernese", "swiss"], 
    "newfoundland": [], 
    "otterhound": [], 
    "papillon": [], 
    "pekinese": [], 
    "pembroke": [], 
    "pinscher": ["miniature"], 
    "pointer": ["german"], 
    "pomeranian": [], 
    "poodle": ["miniature", "standard", "toy"], 
    "pug": [], 
    "pyrenees": [], 
    "redbone": [], 
    "retriever": ["chesapeake", "curly", "flatcoated", "golden"], 
    "ridgeback": ["rhodesian"], 
    "rottweiler": [], 
    "saluki": [], 
    "samoyed": [], 
    "schipperke": [], 
    "schnauzer": ["giant", "miniature"], 
    "setter": ["english", "gordon", "irish"], 
    "sheepdog": ["english", "shetland"], 
    "shiba": [], 
    "shihtzu": [], 
    "spaniel": ["blenheim", "brittany", "cocker", "irish", "japanese", "sussex", "welsh"], 
    "springer": ["english"], 
    "stbernard": [], 
    "terrier": ["american", "australian", "bedlington", "border", "dandie", "fox", "irish", "kerryblue", "lakeland", "norfolk", "norwich", "patterdale", "scottish", "sealyham", "silky", "tibetan", "toy", "westhighland", "wheaten", "yorkshire", "american", "australian", "bedlington", "border", "dandie", "fox", "irish", "kerryblue", "lakeland", "norfolk", "norwich", "patterdale", "scottish", "sealyham", "silky", "tibetan", "toy", "westhighland", "wheaten", "yorkshire"], 
    "vizsla": [], 
    "weimaraner": [], 
    "whippet": [], 
    "wolfhound": ["irish"] 
}