Getting JSON data from XMLHttpRequest

You should use a helper function to make XMLHttpRequest requests without problems.

Something like this:

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); } }; } 

The above helper function works in all browsers.

Where:

• type = Could be a HTTP verb, in this case GET.
• url = URL string to request.
• data = Could be null.
• callback = Callback function when the response is ready. (this.status === 200 && this.readyState === 4).

Usage:

// 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); }); }); 

About your question: You should use this:

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

For every sub breed into the terrier array, appends the current value to the breeds.message.terrier array.

Something like this:

(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; }

The result should be:

{ "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"] } 

Try declaring the variable terrierSubBreed outside of the terrierSubBreed.onload = function() {} so that you can fill it with the terrierSubBreedList.message.

Try if this works:

// 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); }