How to read from json file in html page ?

Question

Guys

I want to read from json file ,i create json file and use ajax to read from it. i create Video object which contain Courses objects (title & URL) . i try to read title & url of HTML as Example but no data show in the HTML page .

   {
  "video": {
    "HTML": [
      {
        "title": "HTML Intro",
        "URL": "http://www.youtube.com/embed/dD2EISBDjWM"
      },
      {
        "title": "Lists",
        "URL": "http://www.youtube.com/embed/09oErCBjVns"
      },
      {
        "title": "Tables",
        "URL": "http://www.youtube.com/embed/wvR40su_XBM"
      },
      {
        "title": "Links",
        "URL": "http://www.youtube.com/embed/U4UHoiK6Oo4"
      },

      {
        "title": "Images",
        "URL": "http://www.youtube.com/embed/Zy4KJeVN7Gk"
      }
    ],
    "CSS": [
      {
        "title": "Applying Styles",
        "URL": "http://www.youtube.com/embed/Wz2klMXDqF4"
      },
      {
        "title": "Selectors",
        "URL": "http://www.youtube.com/embed/6rKan6loNTw"
      },
      {
        "title": "Box Model",
        "URL": "http://www.youtube.com/embed/NR4arpSA2jI"
      },
      {
        "title": "Positioning",
        "URL": "http://www.youtube.com/embed/W5ycN9jBuBw"
      }
    ],
    "JavaScript": [
      {
        "title": "Introduction to JavaScript",
        "URL": "http://www.youtube.com/embed/yQaAGmHNn9s"
      },
      {
        "title": "Comments and Statements",
        "URL": "http://www.youtube.com/embed/yUyJ1gcaraM"
      },
      {
        "title": "Variables",
        "URL": "http://www.youtube.com/embed/og4Zku5VVl0"
      },
      {
        "title": "Functions",
        "URL": "http://www.youtube.com/embed/5nuqALOHN1M"
      },
      {
        "title": "Conditions",
        "URL": "http://www.youtube.com/embed/5gjr15aWp24"
      },
      {
        "title": "Objects",
        "URL": "http://www.youtube.com/embed/mgwiCUpuCxA"
      },
      {
        "title": "Arrays",
        "URL": "http://www.youtube.com/embed/nEvBcwlpkBQ"
      }
    ],
    "Jquery": [
      {
        "title": "Introduction",
        "URL": "http://www.youtube.com/embed/hMxGhHNOkCU"
      },
      {
        "title": "Event Binding",
        "URL": "http://www.youtube.com/embed/G-POtu9J-m4"
      },
      {
        "title": "DOM Accessing",
        "URL": "http://www.youtube.com/embed/LYKRkHSLE2E"
      },
      {
        "title": "Image Slider",
        "URL": "http://www.youtube.com/embed/KkzVFB3Ba_o"
      }
    ]
  }
}

i use ajax to read from it , i need to read all HTML titles and URLs . what is the wrong with this ?

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div id="id01"></div>
<script>
var xhr;
  if (window.XMLHttpRequest)
  {
    xhr = new XMLHttpRequest();
  }
  else
  {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhr.open('GET', 'video.json');
  xhr.onreadystatechange = function ()
  {
    if ((xhr.readyState === 4) && (xhr.status === 200)) {
        var arr = JSON.parse(xhr.responseText);
        var out = "<table>";
        for(i = 0; i < arr.length; i++) {
        out += "<tr><td>" +
        video[HTML][i].title +
        "</td><td>" +
       video[HTML][i].URL +
        "</td></tr>";
      }
    out += "</table>";
    document.getElementById("id01").innerHTML = out;
    }
  }
  xhr.send();
    </script>
</body>
</html>

Where is `HTML` defined ? Try substituting `video["HTML"][i].title` where `"HTML"` is string for `HTML` at `video[HTML][i].title` — guest271314, Feb 13 '16 at 16:31
`HTML` is not defined. Also `arr` is not an array, but an object — guest271314, Feb 13 '16 at 16:36

guest271314 · Accepted Answer · 2016-02-13T16:53:43.617

Try substituting video["HTML"][i].title where "HTML" is string for HTML at video[HTML][i].title , also arr is not an array, but an object

var out = "<table>";

for (var i = 0; i < json.video["HTML"].length; i++) {
  out += "<tr><td>" +
    json.video["HTML"][i].title +
    "</td><td>" +
    json.video["HTML"][i].URL +
    "</td></tr>";
}

out += "</table>";
document.getElementById("id01").innerHTML = out;

var json = {
  "video": {
    "HTML": [{
        "title": "HTML Intro",
        "URL": "http://www.youtube.com/embed/dD2EISBDjWM"
      }, {
        "title": "Lists",
        "URL": "http://www.youtube.com/embed/09oErCBjVns"
      }, {
        "title": "Tables",
        "URL": "http://www.youtube.com/embed/wvR40su_XBM"
      }, {
        "title": "Links",
        "URL": "http://www.youtube.com/embed/U4UHoiK6Oo4"
      },

      {
        "title": "Images",
        "URL": "http://www.youtube.com/embed/Zy4KJeVN7Gk"
      }
    ],
    "CSS": [{
      "title": "Applying Styles",
      "URL": "http://www.youtube.com/embed/Wz2klMXDqF4"
    }, {
      "title": "Selectors",
      "URL": "http://www.youtube.com/embed/6rKan6loNTw"
    }, {
      "title": "Box Model",
      "URL": "http://www.youtube.com/embed/NR4arpSA2jI"
    }, {
      "title": "Positioning",
      "URL": "http://www.youtube.com/embed/W5ycN9jBuBw"
    }],
    "JavaScript": [{
      "title": "Introduction to JavaScript",
      "URL": "http://www.youtube.com/embed/yQaAGmHNn9s"
    }, {
      "title": "Comments and Statements",
      "URL": "http://www.youtube.com/embed/yUyJ1gcaraM"
    }, {
      "title": "Variables",
      "URL": "http://www.youtube.com/embed/og4Zku5VVl0"
    }, {
      "title": "Functions",
      "URL": "http://www.youtube.com/embed/5nuqALOHN1M"
    }, {
      "title": "Conditions",
      "URL": "http://www.youtube.com/embed/5gjr15aWp24"
    }, {
      "title": "Objects",
      "URL": "http://www.youtube.com/embed/mgwiCUpuCxA"
    }, {
      "title": "Arrays",
      "URL": "http://www.youtube.com/embed/nEvBcwlpkBQ"
    }],
    "Jquery": [{
      "title": "Introduction",
      "URL": "http://www.youtube.com/embed/hMxGhHNOkCU"
    }, {
      "title": "Event Binding",
      "URL": "http://www.youtube.com/embed/G-POtu9J-m4"
    }, {
      "title": "DOM Accessing",
      "URL": "http://www.youtube.com/embed/LYKRkHSLE2E"
    }, {
      "title": "Image Slider",
      "URL": "http://www.youtube.com/embed/KkzVFB3Ba_o"
    }]
  }
};

var out = "<table>";

for (var i = 0; i < json.video["HTML"].length; i++) {
  out += "<tr><td>" +
    json.video["HTML"][i].title +
    "</td><td>" +
    json.video["HTML"][i].URL +
    "</td></tr>";
}

out += "</table>";
document.body.innerHTML = out;

JamieC · Answer 2 · 2016-02-13T16:33:53.040

-1

This

video[HTML][i].title

Should be

video.html[i].title

edited Feb 13 '16 at 16:33

answered Feb 13 '16 at 16:32

JamieC

567
3
11

There are more problems than this – charlietfl Feb 13 '16 at 16:33

How to read from json file in html page ?

2 Answers2