Get data from JSON URL and Display results in (JQuery.ajax)

Question

I need to know, I have a json file. Now I need to get that json data and display each data on my html page. I have few couple of codes. Help me here to fix that little thing.

I need to alert before displaying result when is succeeded
I want to alert before displaying error message when is error
I just updated my question as that answer gives, Still its not working
I need to display results inside the results div

This is my Test Jquery page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getJSON demo</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

</head>
<body>

<h1>My Home Page</h1>

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

  <script>
    var newsURL_test = "http://localhost:81/testjs/data.json";

    jQuery.ajax({
        url: this.newsURL_test,
        type: "GET",
        success: function (data) {
            iterateJson(data);
        },
        error: function() {
            //
            alert("I'm in Error");
            alert(newsURL_test);
        }
    });

    function iterateJson(data) {
        $.each(data, function() {
                $.each(this, function(k,v) {
                    var capacity=v["_capacity"];
                    var description=v["_description"];
                    var dev_default_view=v["_dev_default_view"];
                    var deviceID=v["_deviceID"];
                    var deviceName=v["_deviceName"];
                    var deviceTypeID=v["_deviceTypeID"];
                    var projectID=v["_projectID"];
                    var roomID=v["_roomID"];
                    var roomName=v["_roomName"];
                    var room_admin_mail=v["_room_admin_mail"];                  
              });
         });

    }

</script>

</body>
</html>

This is my Json file code - data.json

{"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}]}

Vishwajeet · Accepted Answer · 2013-08-22 13:27:20Z

1

Use the iterateJson function to iterate your json response.

jQuery.ajax({
    url: this.newsURL, //This URL is for Json file
    type:"GET",
    dataType: "json",
    success: function(data) {
        iterateJson(data);
    },
    error: function() {
        //Do alert is error
    }
});




function iterateJson(data)
{

    $.each(data, function() {
            $.each(this, function(k, v) {
                var capacity=v["_capacity"];
                 ......................................

          });
     });

}

edited Aug 22, 2013 at 13:27

answered Aug 22, 2013 at 11:09

Vishwajeet

1,7033 gold badges20 silver badges36 bronze badges

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

2 Comments

yeshansachithak Over a year ago

var capacity = v["_capacity"]; var description = v["_description"]; var dev_default_view = v["_dev_default_view"]; var deviceID = v["_deviceID"]; etc etc.... Nothing happened. In firebug it always getting error

Vishwajeet Over a year ago

Add dataType: "json", as show in edited answer and check the result

Collectives™ on Stack Overflow

Get data from JSON URL and Display results in (JQuery.ajax)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related