How to display JSON objects using xmlhttprequest and asynchronous with only HTML/Jscript only?

Question

I am trying to display contents of a JSON file using the mentioned functions in the question. This is the JSON object.

It could be done directly through javascript so either as soon as the user has opened this HTML file, it displays the JSON object right away. Or maybe through a button when clicked displays the JSON object contents.

{"menu": {
"header": "SVG Viewer",
"items": [
    {"id": "Open"},
    {"id": "OpenNew", "label": "Open New"},
    null,
    {"id": "ZoomIn", "label": "Zoom In"},
    {"id": "ZoomOut", "label": "Zoom Out"},
    {"id": "OriginalView", "label": "Original View"},
    null,
    {"id": "Quality"},
    {"id": "Pause"},
    {"id": "Mute"},
    null,
    {"id": "Find", "label": "Find..."},
    {"id": "FindAgain", "label": "Find Again"},
    {"id": "Copy"},
    {"id": "CopyAgain", "label": "Copy Again"},
    {"id": "CopySVG", "label": "Copy SVG"},
    {"id": "ViewSVG", "label": "View SVG"},
    {"id": "ViewSource", "label": "View Source"},
    {"id": "SaveAs", "label": "Save As"},
    null,
    {"id": "Help"},
    {"id": "About", "label": "About Adobe CVG Viewer..."}
    ]
}}

Wait. You get that json content by request and want to display it. Display it how, where? — DontVoteMeDown
– DontVoteMeDown, Commented Mar 27, 2014 at 17:55

dfsq · Accepted Answer · 2014-03-27 18:40:45Z

1

Here is a typical example of XMLHttpRequest usage to load JSON data:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);

xhr.onreadystatechange = function() {
    if (this.readyState === 4) {
        if (this.status >= 200 && this.status < 400) {
            var data = JSON.parse(this.responseText);
            document.getElementById('out').innerHTML = JSON.stringify(data, null, '  ');
        }
    }
};

xhr.send();

For demonstration purposes I'm rendering data in the div#out.

Demo: http://plnkr.co/edit/0wZ79wbmSYSalyIP96x7?p=preview

answered Mar 27, 2014 at 18:40

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display JSON objects using xmlhttprequest and asynchronous with only HTML/Jscript only?

1 Answer 1

Demo: http://plnkr.co/edit/0wZ79wbmSYSalyIP96x7?p=preview

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Demo: http://plnkr.co/edit/0wZ79wbmSYSalyIP96x7?p=preview

Comments

Your Answer

Sign up or log in

Post as a guest

Related