javascript - 如何从 xhr 替换 jsonVault？

Question

我需要帮助如何使用 javascript xhr 替换 web 上 json 文件中的 jsonVault？

世田谷.json:

{"trains":[{"operation_number":1,"line_id":26007,"station_id":784,"track_number":1,"up":true},{"operation_number":2,"line_id":26007,"station_id":1015,"track_number":-1,"up":false},{"operation_number":3,"line_id":26007,"station_id":1012,"track_number":-1,"up":false},{"operation_number":4,"line_id":26007,"station_id":1009,"track_number":-1,"up":false},{"operation_number":5,"line_id":26007,"station_id":1009,"track_number":1,"up":true},{"operation_number":6,"line_id":26007,"station_id":1012,"track_number":1,"up":true},{"operation_number":7,"line_id":26007,"section_id":217,"up":false}],"delays":null}

代码:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        var output = "<h2>Setagaya Line</h2><table><tr><th>&nbspJalur&nbsp</th><th>Nomer Operasional</th><th>Posisi Ruas</th><th>Posisi Statiun</th><th>Posisi Jalur</th><th>Arah</th>";
        for (var i in myObj.trains) {
            output += "<tr><td><center>" + myObj.trains[i].line_id + "</center></td><td><center>" + myObj.trains[i].operation_number + "</center></td><td><center>" + myObj.trains[i].section_id + "</center></td><td><center>" + myObj.trains[i].station_id + "</center></td><td><center>" + myObj.trains[i].track_number + "</center></td><td><center>" + myObj.trains[i].up + "</center></td ></tr > ";
        }
        document.getElementById("setagaya").innerHTML = output;
    }
};
xmlhttp.open("GET", "setagaya.json", true);
xmlhttp.send();

此代码仅获取 JSON，现在我需要替换该值。

所以，我想要在line_id处乘坐26007到世田谷线，在station_id处乘坐943到三轩茶屋，在station_id处乘坐1012到世田谷线，在station_id处乘坐784到下高道，在section_id处乘坐217到松原山田

Answer 1

将您想到的所有映射定义为对象:

let lines = {
    26007: "Setagaya Line"
};
let stations = {
     943: "Sangenjaya", 
     1012: "Setagaya",
     784: "Shimotakaido"
};
let sections = {
    217: "Matsubara-Yamasita"
};

根据需要进行扩展。

还定义一个实用函数:

function getVal(obj, prop) {
    return prop in obj ? obj[prop] : prop || "";
}

这将从给定对象获取给定属性的值。如果该属性不是由对象定义的，则返回该属性本身。如果该属性也未定义，则返回空字符串。

最后将循环更改为:

for (var i in myObj.trains) {
    output += "<tr><td><center>" + getVal(lines, myObj.trains[i].line_id)
        + "</center></td><td><center>" + myObj.trains[i].operation_number 
        + "</center></td><td><center>" + getVal(sections, myObj.trains[i].section_id) 
        + "</center></td><td><center>" + getVal(stations, myObj.trains[i].station_id) 
        + "</center></td><td><center>" + myObj.trains[i].track_number 
        + "</center></td><td><center>" + myObj.trains[i].up + "</center></td></tr>\n";
}