Parse JSON response using jQuery

Question

I'm dealing with a JSON Response in one of my applications. I have established a connection using jsonp successfully. But I'm not able to parse my response.

Code:

<script type='text/javascript'>
(function($) {
var url = 'http://cooktv.sndimg.com/webcook/sandbox/perf/topics.json';

$.ajax({
   type: 'GET',
    url: url,
    async: false,
    jsonpCallback: 'callback',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(json) {
       console.log(json.topics);
       $("#nav").html('<a href="">'+json.topics+"</a>");
    },
    error: function(e) {
       console.log(e.message);
    }
});

})(jQuery);
</script>

Output i'm getting:

[object Object],[object Object],[object Object]

Response Example:

callback({"topics":[{"name":"topic","content":[{"link_text":"link","link_src":"http://www.foodnetwork.com/"},{"link_text":"link","link_src":"http://www.hgtv.com/"},{"link_text":"link","link_src":"http://www.diynetwork.com/"},{"link_text":"link","link_src":"http://www.cookingchanel.com/"},{"link_text":"link","link_src":"http://www.travelchannel.com/"},{"link_text":"link","link_src":"http://www.food.com/"}]},{"name":"topic2","content":[{"link_text":"link","link_src":"http://www.google.com/"},{"link_text":"link","link_src":"http://www.yahoo.com/"},{"link_text":"link","link_src":"http://www.aol.com/"},{"link_text":"link","link_src":"http://www.msn.com/"},{"link_text":"link","link_src":"http://www.facebook.com/"},{"link_text":"link","link_src":"http://www.twitter.com/"}]},{"name":"topic3","content":[{"link_text":"link","link_src":"http://www.a.com/"},{"link_text":"link","link_src":"http://www.b.com/"},{"link_text":"link","link_src":"http://www.c.com/"},{"link_text":"link","link_src":"http://www.d.com/"},{"link_text":"link","link_src":"http://www.e.com/"},{"link_text":"link","link_src":"http://www.f.com/"}]}]});

I want in the form of :

Topic: Link

osullic · Accepted Answer · 2016-05-11 13:46:05Z

30

Give this a try:

success: function(json) {
   console.log(JSON.stringify(json.topics));
   $.each(json.topics, function(idx, topic){
     $("#nav").html('<a href="' + topic.link_src + '">' + topic.link_text + "</a>");
   });
},

edited May 11, 2016 at 13:46

osullic

6121 gold badge11 silver badges24 bronze badges

answered Jun 28, 2013 at 11:59

Aguardientico

7,7991 gold badge36 silver badges34 bronze badges

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

1 Comment

StealthTrails Over a year ago

I am getting a response like this [{id: 1, message: "sdfsdf", message_for: 1, message_by: 2, created_at: "2015-08-29 08:22:02",…},…] There is no variable like topics as specified in the question.

Mohamd Imran · Accepted Answer · 2022-05-15 16:03:43Z

6

it's very simple to parse JSON response into normal HTML. Via JavaScript we can do it like this:

<!DOCTYPE html>
<html>
<body>

<h2>Create Object from JSON String</h2>

<p id="demo"></p>

<script>

var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;

</script>

</body>
</html>

edited May 15, 2022 at 16:03

answered Aug 2, 2017 at 5:14

Mohamd Imran

1794 silver badges10 bronze badges

Comments

Baum mit Augen · Accepted Answer · 2017-02-18 15:26:15Z

2

jQuery.ajax({
            type: 'GET',
            url: "../struktur2/load.php",
            async: false,
            contentType: "application/json",
            dataType: 'json',
            success: function(json) {
              items = json;
            },
            error: function(e) {
              console.log("jQuery error message = "+e.message);
            }
        });

edited Feb 18, 2017 at 15:26

Baum mit Augen♦

50.4k25 gold badges153 silver badges187 bronze badges

answered Feb 18, 2017 at 15:25

mobuhai

211 bronze badge

1 Comment

Baum mit Augen Over a year ago

Some explanation would be helpful.

Paul-59701 · Accepted Answer · 2015-01-19 18:26:05Z

Original question was to parse a list of topics, however starting with the original example to have a function return a single value may also useful. To that end, here is an example of (one way) to do that:

<script type='text/javascript'>
    function getSingleValueUsingJQuery() {
      var value = "";
      var url = "rest/endpointName/" + document.getElementById('someJSPFieldName').value;
      jQuery.ajax({
        type: 'GET',
        url: url,
        async: false,
        contentType: "application/json",
        dataType: 'json',
        success: function(json) {
          console.log(json.value);   // needs to match the payload (i.e. json must have {value: "foo"}
          value = json.value;
        },
        error: function(e) {
          console.log("jQuery error message = "+e.message);
        }
      });
      return value;
    }
    </script>

user2290627 · Accepted Answer · 2013-06-28 12:02:23Z

0

The data returned by the JSON is in json format : which is simply an arrays of values. Thats why you are seeing [object Object],[object Object],[object Object].

You have to iterate through that values to get actuall value. Like the following

jQuery provides $.each() for iterations, so you could also do this:

$.getJSON("url_with_json_here", function(data){
    $.each(data, function (linktext, link) {
        console.log(linktext);
        console.log(link);
    });
});

Now just create an Hyperlink using that info.

answered Jun 28, 2013 at 12:02

user2290627

Comments

muthukumar · Accepted Answer · 2016-10-03 06:39:19Z

Try bellow code. This is help your code.

  $("#btnUpdate").on("click", function () {
            //alert("Alert Test");
            var url = 'http://cooktv.sndimg.com/webcook/sandbox/perf/topics.json';
            $.ajax({
                type: "GET",
                url: url,
                data: "{}",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (result) {
                    debugger;

                    $.each(result.callback, function (index, value) {
                        alert(index + ': ' + value.Name);
                    });
                },
                failure: function (result) { alert('Fail'); }
            });
        });

I could not access your url. Bellow error is shows

XMLHttpRequest cannot load http://cooktv.sndimg.com/webcook/sandbox/perf/topics.json. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:19829' is therefore not allowed access. The response had HTTP status code 501.

Collectives™ on Stack Overflow

Parse JSON response using jQuery

6 Answers 6

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related