Analizowanie odpowiedzi JSON przy użyciu jQuery

Question

Mam do czynienia z odpowiedzią JSON w jednej z moich aplikacji. Udało mi się nawiązać połączenie za pomocą jsonp. Ale nie jestem w stanie przeanalizować mojej odpowiedzi.

Kod:

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

Wyjście Dostaję:

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

Przykład odpowiedzi:

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/"}]}]}); 

chcę w formie:

Temat: Link

Answer 1

spróbuj tego:

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

Answer 2

Dane zwracane przez JSON jest w formacie JSON: który jest po prostu tablice wartości. Właśnie dlatego widzisz [obiekt obiektu], [obiekt obiektu], [obiekt obiektu].

Musisz przejść przez te wartości, aby uzyskać wartość mocy. Jak następuje

jQuery zapewnia $ .each() dla iteracji, więc można też to zrobić:

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

Teraz wystarczy utworzyć hiperłącze za pomocą tej informacji.

Answer 3

Pierwotnym pytaniem było przeanalizowanie listy tematów, jednak z początkowym przykładem użycia funkcji zwracana może być pojedyncza wartość. W tym celu, oto przykład (jeden sposób), aby to zrobić:

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

Answer 4

Spróbuj kod poniżej. To pomoże Twojemu kodowi.

$("#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'); } 
      }); 
     }); 

Nie mogę uzyskać dostępu do Twojego adresu URL. Komunikat o błędzie pokazuje, że nie można załadować pliku

http://cooktv.sndimg.com/webcook/sandbox/perf/topics.json. Odpowiedź na żądanie inspekcji wstępnej nie przechodzi kontroli kontroli dostępu: Na żądanym zasobie nie ma nagłówka "Access-Control-Allow-Origin". Pochodzenie "http://localhost:19829" jest zatem niedozwolone. Odpowiedź miała kod stanu HTTP 501.

Answer 5

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

Answer 6

miałem wychodzić w Google, potem znalazłem swoje pytanie i jest to bardzo proste do analizowania odpowiedzi JSON do normalnego HTML. Wystarczy skorzystać z tej mało kodu JavaScript:

<!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>