Question

我试图使用相同的类将JSON对象输出到HTML页面的不同部分。

我从API导入我的JSON但是当我将信息输入（通过输入字段）时，它看起来有点像这样：

    {  
     "trip": [
             { // the first object in the trip-array
         "leg": [{
               "tripid": "0",
               "origin": {
                     "name": "New York",
                     "time": "12:04"
                },
               "destination": {
                     "name": "Albany",
                     "time": "1:49"
               }
             },{
               "tripid": "1",
               "origin": {
                     "name": "Albany",
                     "time": "2:05"
                },
               "destination": {
                     "name": "Boston",
                     "time": "3:12"
                }
              }]
             },
            { // the second object in the trip-array
         "leg": [{
               "tripid": "0",
               "origin": {
                     "name": "New York",
                     "time": "1:04"
                },
               "destination": {
                     "name": "Albany",
                     "time": "2:49"
               }
             },{
               "tripid": "1",
               "origin": {
                     "name": "Albany",
                     "time": "3:05"
                },
               "destination": {
                     "name": "Boston",
                     "time": "4:12"
                }
              }]
             }]
        }

我试图在我的网站上显示信息，但我无法按照我希望的方式行事。

第一次我做了类似的事情（通过我的PHP页面获取JSON之后）：

function addDataToHTML(data){
    var trips = data.trip;
    $.each(trips, function(){  
        document.getElementById('show_all_results');
        var summary = document.createElement('div');
        summary.innerHTML = "<span class='origin_time'>" + this.leg[0].origin.time +
        "&nbsp;</span><span class='origin_name'>&nbsp;" + this.leg[0].origin.name + 
        "</span><span>-</span><span class='destination_time'>" + this.leg[leg.length-1].destination.time + 
        "&nbsp;</span><span class='destination_name'>&nbsp;" + this.leg[this.leg.length-1].destination.name + 
        "</span>";
        document.getElementById('show_all_results').appendChild(summary);
    });
}

这有效但我遇到的问题是我想在代码中添加一个按钮，它会通过display：block / none-functional给我更多信息。按钮（以及其他信息）的创建方式类似于我必须在JS的innerHTML部分编写它，但是我尝试过的所有方法都没有用，我想它＆＃ 39;关于我在JS代码中创建div和其他DOM对象的意思，这意味着HTML并没有真正识别它们。
无论如何，要获得对代码的更多控制，我现在正在尝试使用HTML：

<div id="show_all_results">
    <div id='search_result_single'> // First results....
        <div id='search_result_from_box'>
            <span class="origin_time"></span>
            <span class="origin_name"></span>
        </div>
        <div id='search_result_divider'>
            <span>-</span>
        </div>
        <div id='search_result_to_box'>
            <span class='destination_time'></span>
            <span class='destination_name'></span>
        </div>
    </div>
    <div id='search_result_single'> // Second results....
        <div id='search_result_from_box'>
            <span class="origin_time"></span>
            <span class="origin_name"></span>
        </div>
        <div id='search_result_divider'>
            <span>-</span>
        </div>
        <div id='search_result_to_box'>
            <span class='destination_time'></span>
            <span class='destination_name'></span>
        </div>
    </div>
...and so on.
</div>

JS：

for (var i = 0; i < this.leg.length; i++) {
    var originName = document.getElementsByClassName("origin_name");
    var originTime = document.getElementsByClassName("origin_time");
    var destTime = document.getElementsByClassName("destination_time");
    var destName = document.getElementsByClassName("destination_name");
    for (var x = 0; x < originName.length; x++) {
        var originNameItem = originName[x];
        originNameItem.innerHTML = this.leg[0].origin.name;
    }
    for (var y = 0; y < originTime.length; y++) {
        var originTimeItem = originTime[y];
        originTimeItem.innerHTML = this.leg[i].origin.time;
    }
    for (var z = 0; z < destTime.length; z++) {
        var destTimeItem = destTime[z];
        destTimeItem.innerHTML = this.leg[this.leg.length - 1].destination.time;
    }
    for (var a = 0; a < destName.length; a++) {
        var destNameItem = destName[a];
        destNameItem.innerHTML = this.leg[this.leg.length - 1].destination.name;
    }
}

是否有人可以帮助我使用与我相同的课程将腿部阵列的每个部分放入页面的不同部分？还是有更好的方法？
这变得非常长，对不起，但如果我能提供任何其他信息，请告诉我。谢谢！

输出数组到元素类

0 个答案: