JSFiddle - React, Tailwind, and code Playground

by jsumners

HTML

<div id="output" style="white-space: pre;"></div>

JavaScript

var $output = $("#output");

$.ajax({
    url: 'https://api.guildwars2.com/v1/continents.json',
    dataType: 'json',
    success: function(data, status, jqXHR) {
        var result;
        
        // Let's just print the results first
        $output.append("API result<br>=====<br>");
        $output.append(JSON.stringify(data, null, "\t"));
        $output.append("<br><br>Actual result<br>=====<br>");
        $output.append(
            JSON.stringify(data.continents, null, "\t") +
            "<br><br>Loop<br>=====<br>"
        );
        
        // Now let's try looping them
        for (result in data) {
            // We're only going to be printing "continents" here
            if (!data.hasOwnProperty(result)) {
                continue;
            }
            $output.append("<p>Result id = " + result + "</p>");
        }
        
        $output.append("<p>Now for the real loop...</p>");
        
        for (result in data.continents) {
            if (!data.continents.hasOwnProperty(result)) {
                continue;
            }
            $output.append("<p>Result id = " + result + "</p>");
        }     
    }
});