Список по json файлу

Question

У меня проблема со списком json файловых данных. Я хочу получить информацию из файла json и вставить ее в список.

HTML:

<ol id="dataT">

</ol>

JavaScript:

function GetData(index) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            ShowJson(this.responseText);
        }
    };
    var counter;
    switch (index) {
        case "1":
            counter = "./data/data1.json";
            break;
        case "2":
            counter = "./data/data2.json";
            break;
        case "3":
            counter = "./data/data3.json";
            break;
        default:
            counter = "./data/data1.json";
    }
    xhttp.open("GET", counter, true);
    xhttp.send();
}
function ShowJson(JsonData) {

    var obj = JSON.parse(JsonData);
    document.getElementById("dataT").innerHTML = obj.dataT;
}

Json данные файла:

  "dataT" : {"tag":"ol","children":[
    {"tag":"li","html":"Please Love Me"},
    {"tag":"li","html":"You Upset Me Baby"},
    {"tag":"li","html":"Everyday I Have The Blues"},
    {"tag":"li","html":"Bad Luck"},
    {"tag":"li","html":"3 O'Clock Blues"},
    {"tag":"li","html":"Blind Love"},
    {"tag":"li","html":"Woke Up This Morning"},
    {"tag":"li","html":"You Know I Love You"},
    {"tag":"li","html":"Sweet Little Angel"},
    {"tag":"li","html":"Ten Long Years"},
    {"tag":"li","html":"Did You Ever Love A Woman"},
    {"tag":"li","html":"Crying Won't Help You"}
  ]}

В этот момент результат: [объект Object].

Answer 1

Вы не можете напрямую назначить данные внутреннему HTML, например 'document.getElementById ("dataT"). Inner HTML = obj.dataT;' , как вы это сделали в своем коде.

Вы должны перебирать объект данных, чтобы связывать элементы списка один за другим, например:

function bindData() {
  var myData = {
    "dataT": {
      "tag": "ol",
      "children": [{
          "tag": "li",
          "html": "Please Love Me"
        },
        {
          "tag": "li",
          "html": "You Upset Me Baby"
        },
        {
          "tag": "li",
          "html": "Everyday I Have The Blues"
        },
        {
          "tag": "li",
          "html": "Bad Luck"
        },
        {
          "tag": "li",
          "html": "3 O'Clock Blues"
        },
        {
          "tag": "li",
          "html": "Blind Love"
        },
        {
          "tag": "li",
          "html": "Woke Up This Morning"
        },
        {
          "tag": "li",
          "html": "You Know I Love You"
        },
        {
          "tag": "li",
          "html": "Sweet Little Angel"
        },
        {
          "tag": "li",
          "html": "Ten Long Years"
        },
        {
          "tag": "li",
          "html": "Did You Ever Love A Woman"
        },
        {
          "tag": "li",
          "html": "Crying Won't Help You"
        }
      ]
    }
  };
  for (var i in myData.dataT.children) {
    var node = document.createElement("LI");
    var textnode = document.createTextNode(myData.dataT.children[i].html);
    node.appendChild(textnode);
    document.getElementById("dataT").appendChild(node);
  }
}

<ol id="dataT"></ol>
<button onclick="bindData()">Bind Data</button>