All geek questions in one place

Parse JSON answer using jQuery

I am dealing with JSON Response in one of my applications. I successfully established a connection using jsonp. But I can’t make out my answer.

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>

The output I get is:

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

Answer 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:

Subject: Link

+6
source share
6 answers

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>"); }); },
+21
source

I walked on Google, then I found your question, and it is very easy to parse the JSON response into plain HTML. Just use this little JavaScript code:

 <!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>
+2
source

The data returned by JSON is in json format: these are just arrays of values. That is why you see [object Object], [object Object], [object Object] .

You need to go through these values ​​to get the activation value. As below

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

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

Now just create a hyperlink using this information.

0
source

The initial question was to parse a list of topics, however, starting with the original example to return a function, a single value can also be useful. An example is provided here (one way):

 <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 (ie json must have {value: "foo"} value = json.value; }, error: function(e) { console.log("jQuery error message = "+e.message); } }); return value; } </script>
0
source

Try entering a code. This will 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. Error on the side shows

XMLHttpRequest cannot load http://cooktv.sndimg.com/webcook/sandbox/perf/topics.json . The response to the request before the flight does not pass the access control check. There is no "Access-Control-Allow-Origin" header on the requested resource. Origin ' http: // localhost: 19829 ' is therefore not allowed. The response had a status code of 501.

0
source 
 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); } });
0
source

Source: https://habr.com/ru/post/948317/

More articles:


All Articles