Get JSON data from a file using (JavaScript)

Question

I need to know how can I get json data using JavaScript without using Jquery. I just want to know how to get data only using JavaScript.

My Json file.

{"JsonProjectIDResult":[{"_capacity":15,"_description":"Meeting Room","_dev_default_view":3,"_deviceID":1,"_deviceName":"MobiTech","_deviceTypeID":1,"_projectID":1,"_roomID":2,"_roomName":"Room2","_room_admin_mail":null}]}

My home.html file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JavaScript Get Json</title>

</head>
<body>

<h1>My Home Page</h1>

<div id="results">
    <!-- Display Jason Data -->
</div>

<script>

    var resultDiv = document.getElementById("results");

    var newsURL = "http://localhost:81/testjs/data.json";

    var e;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        e = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        e = new ActiveXObject("Microsoft.XMLHTTP");
    }

    e.onreadystatechange = function() {

        var html = " ";

        if (e.readyState == 4 && e.status == 200) {
            response = JSON.parse(e.responseText);

            if(typeof(e.responseText)==="string") {
                d = e.responseText;
            } else {
                if (typeof(e.responseXML)==="object") {
                    d = e.responseXML;
                };
            }

            var myData = response['JsonProjectIDResult'];

            //Print results 
            html  = myData[0]._capacity+"<br />";
            html += myData[0]._description+"<br />";
            html += myData[0]._dev_default_view+"<br />";
            html += myData[0]._deviceID+"<br />";
            html += myData[0]._deviceName+"<br />";
            html += myData[0]._deviceTypeID+"<br />"; 
            html += myData[0]._projectID+"<br />"; 
            html += myData[0]._roomID+"<br />"; 
            html += myData[0]._roomName+"<br />"; 
            html += myData[0]._room_admin_mail+"<br />";

            resultDiv.innerHTML = html;
        }
    };

    e.open("GET", newsURL, true);
    e.send();

</script>

</body>
</html>

After my friends gave me some helpful answer I wondered my code like this. It's working. Now I need to run this as a loop. When every records display using a loop. Can I do it in JavaScript.

you would be better off with php...

Coder404
– Coder404

2013-08-25 04:15:20 +00:00
Commented Aug 25, 2013 at 4:15 — Coder404
– Coder404, Commented Aug 25, 2013 at 4:15

Khalid Dabjan · Accepted Answer · 2013-08-25 05:18:52Z

2

<script>
var resultDiv = document.getElementById("results");

var newsURL = "http://localhost:81/testjs/data.json";


var xmlhttp;

if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else {
    // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        response = JSON.parse(xmlhttp.responseText);
        //here you can manipulate the response as you wish, for example you can:
        var myData = response['JsonProjectIDResult'];
        // myData now is an array of the json object
        var html = '<ul>';
        for(var prop in myData ) {
            if(myData.hasOwnProperty(prop))
                 html += '<li>' + prop  + ' = ' + myData[prop] + '</li>';
        }
        html += '</ul>';
        //and so on
        resultDiv.innerHTML = html;
    }
}

xmlhttp.open("GET", newsURL, true);
xmlhttp.send();
</script>

edited Aug 25, 2013 at 5:18

answered Aug 25, 2013 at 4:17

Khalid Dabjan

2,7972 gold badges27 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Khalid Dabjan Over a year ago

This is sending an ajax call to fetch your json data without using jquery. inside if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { resultDiv.innerHTML = xmlhttp.responseText; } you can manipulate the response which is the Json data sent by the server.

yeshansachithak Over a year ago

It's working fine. I can see the results as like a json data file I created. But, Khalid.... I just want to show the result row by row. Not in one line with {} and ().... :-(

Khalid Dabjan Over a year ago

Edited again, that's the final answer

Roger Barreto Over a year ago

@BigBroYesh, yeah my mistake, use var html = '<ul>'; for(var prop in myData[0] ) { if(myData[0].hasOwnProperty(prop)) html += '<li>' + prop + ' = ' + myData[0][prop] + '</li>'; }

Roger Barreto Over a year ago

@BigBroYesh, as you can see, the zero in brackets, it means the first record. If you want other records, you should loop thru then. a simple for(var counter = 0; counter < myData.length; counter++) would do the trick

|

Collectives™ on Stack Overflow

Get JSON data from a file using (JavaScript)

1 Answer 1

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related