Question

我在for循环中遇到JSON.parse函数的问题。独立运行JSON.parse。在我的脚本for循环中不起作用。循环中的函数有问题吗？我不知道。

我的想法：通过Overpass API循环解析JSON，并在浏览器中生成txt格式的JSON。（将其复制并粘贴到txt文件中，然后另存为* .js）。

独立版：

function loadJSON(file, callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType('application/json');
    xobj.open('GET', file, true);
    xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == '200') {
            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
        }
    };
    xobj.send(null);
}

var lon = "9.841431";
var lat = "53.166591";

var overpassurl = 'http://overpass-api.de/api/interpreter?data=[out:json];is_in("' + lat + '","' + lon + '");out+body;%3E;out+skel;';

loadJSON(overpassurl, function (text) {

    var result = JSON.parse(text).elements[0].tags.name;

    document.getElementById("jsondiv").innerHTML = result;

});

JSFiddle：http://jsfiddle.net/5vqd7sm0/35/

我的脚本：

function loadJSON(file, callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType('application/json');
    xobj.open('GET', file, true);
    xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == '200') {
            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
        }
    };
    xobj.send(null);
}

var lonlatarray = [
    [9.841431, 53.166591],
    [13.544482, 52.509910],
    [13.218674, 52.428120]
];

var jsontxt = "var jsonobject = { ";
jsontxt += '<br>';

for (let i = 0; i < lonlatarray.length; i++) {

    var lon = lonlatarray[i][0];
    var lat = lonlatarray[i][1];

    jsontxt += '"' + i + '": {';
    jsontxt += '<br>';
    jsontxt += '"coords":["' + lat + '","' + lon + '"],';
    jsontxt += '<br>';

    var overpassurl = 'http://overpass-api.de/api/interpreter?data=[out:json];is_in("' + lat + '","' + lon + '");out+body;%3E;out+skel;';

    jsontxt += '"bundesland":"' + loadJSON(overpassurl, function (text) {
        return JSON.parse(text).elements[0].tags.name;

    }) + '",';


    jsontxt += '<br>';
    jsontxt += '},';
    jsontxt += '<br>';

}

jsontxt += '}';

document.getElementById("jsondiv").innerHTML = jsontxt;

JSFiddle：http://jsfiddle.net/bk13f7qh/43/

Answer 1

由于undefined的输出在执行时不可用，因此得到loadJson()，因为它是async函数，不会阻止其他代码执行结果，您的代码将在从上一个请求获取结果之前转到下一个请求，并且由于先前的请求还不存在，因此它输出为undefined。

如您在此处实施的那样：

jsontxt += '"bundesland":"' + loadJSON(overpassurl, function(text) {
       return JSON.parse(text).elements[0].tags.name;
}) + '",';

然后，您尝试将json文本值附加到函数生成的jsonDiv的{{1}}中。

因此，由于您的主要要求是从循环中的请求中获取数据，因此您必须将实现从现在的内容更改为以下内容：

jsontxt

然后只需调用函数function exportJsonToFile(){ var jsontxt = document.getElementById("jsondiv"); //assigend jsontxt directrly to the control on which the data has to be assigned var reqCount = 0; // a counter to be used for request context function loadJSON(file, callback) { var xobj = new XMLHttpRequest(); xobj.overrideMimeType('application/json'); xobj.open('GET', file, false); xobj.onreadystatechange = function() { if (xobj.readyState == 4 && xobj.status == '200') { // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode callback(xobj.responseText); } }; xobj.send(null); } var lonlatarray = [ [9.841431, 53.166591], [13.544482, 52.509910], [13.218674, 52.428120] ]; jsontxt.innerHTML = "var jsonobject = { "; jsontxt.innerHTML += ' '; for (let i = 0; i < lonlatarray.length; i++) { var lon = lonlatarray[i][0]; var lat = lonlatarray[i][1]; jsontxt.innerHTML += '"' + i + '": {'; jsontxt.innerHTML += ' '; jsontxt.innerHTML += '"coords":["' + lat + '","' + lon + '"],'; jsontxt.innerHTML += ' '; var overpassurl = 'http://overpass-api.de/api/interpreter?data=[out:json];is_in("' + lat + '","' + lon + '");out+body;%3E;out+skel;'; jsontxt.innerHTML += '"bundesland":"{' + i + '}",'; loadJSON(overpassurl, function(text) { var name= JSON.parse(text).elements[0].tags.name; jsontxt.innerHTML = jsontxt.innerHTML.replace('{'+reqCount+'}',name); reqCount++ }); jsontxt.innerHTML += ' '; jsontxt.innerHTML += '},'; jsontxt.innerHTML += ' '; } jsontxt.innerHTML += '}'; };

所以，我在上面的代码中所做的是，当您遍历位置点时，我将要在exportJsonToFile()中输入的数据的位置附加为{0}，{1} ，{2}，写在这里：

json Text

然后在jsontxt.innerHTML += '"bundesland":"{' + i + '}",';的回调中，我只是将上面指定的值替换为实际值，并将loadJSON()变量递增为：

reqCount

for循环中的JSON.parse函数

1 个答案: