how to load json from url using javascript?

Question

I'm new to javascript which should be really simple to solve, but I am lost as of now.

I have a url: http:getall.json Using JavaScript (not JQuery or php. Just JavaScript), I want to read this JSON string and parse it. That's it.

Answer 1

access to your url doesn't work, you should show the JSON result. In javascript to get JSON object with AJAX request you can do something like this:

request = new XMLHttpRequest;
request.open('GET', 'http://v-apps-campaign.com/dunkindonuts/main/get_allStore', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400){
    // Success!
    data = JSON.parse(request.responseText);
  } else {
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();

your result will be in the data variable.

Answer 2

JSONP calls:

function getJSONP(url, callback) {
    var script = document.createElement('script');
    var callbackName = "jsonpcallback_" + new Date().getTime();
    window[callbackName] = function (json) {
        callback(json);
    };
    script.src = url + (url.indexOf("?") > -1 ? "&" : "?") + 'callback=' + callbackName;

    document.getElementsByTagName('head')[0].appendChild(script);
}
getJSONP("http://v-apps-campaign.com/dunkindonuts/main/get_allStore", function(jsonObject){
    //jsonObject is what you want
});

Regular ajax ajax call:

function getXHR() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    }
    try {
        return new ActiveXObject('MSXML2.XMLHTTP.6.0');
    } catch (e) {
        try {
            // The fallback.
            return new ActiveXObject('MSXML2.XMLHTTP.3.0');
        } catch (e) {
            throw new Error("This browser does not support XMLHttpRequest.");
        }
    }
}

function getJSON(url, callback) {
    req = getXHR();
    req.open("GET", url);
    req.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            var jsonObject = null,
                status;
            try {
                jsonObject = JSON.parse(req.responseText);
                status = "success";
            } catch (e) {
                status = "Invalid JSON string[" + e + "]";
            }
            callback(jsonObject, status, this);
        }
    };
    req.onerror = function () {
        callback(null, "error", null);
    };
    req.send(null);
}
getJSON("http://v-apps-campaign.com/dunkindonuts/main/get_allStore", function (jsonObject, status, xhr) {
    //jsonObject is what you want
});

I tested these with your url and it seems like you should get the data with a jsonp call, because with regular ajax call it returns:

No 'Access-Control-Allow-Origin' header is present on the requested resource

with jsonp it gets the data but the data is not a valid json, it seems your server side has some php errors:

A PHP Error was encountered

...

Answer 3

In your HTML include your json file and a js code as modules

<script src="/locales/tshared.js"  type="module"  ></script>
<script src="/scripts/shared.js" type="module"  ></script>

file content of tshared

export const loc = '{"en": { "key1": "Welcome" },"pt": {"key1": "Benvindo"} }'
file content of shared
import {loc} from "./../../locales/tshared.js";
var locale = null;
locale = JSON.parse(loc) ;

Adapt path and names as needed, use locale at will.