it-swarm.com.de

Analysieren Sie die JSON-Antwort mit jQuery

Ich habe eine JSON-Antwort in einer meiner Anwendungen. Ich habe erfolgreich eine Verbindung mit Jsonp hergestellt. Aber ich kann meine Antwort nicht analysieren.

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>

Ausgabe, die ich bekomme:

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

Antwortbeispiel:

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

Ich möchte in Form von:

Thema: Link

7

Probieren Sie es aus:

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
Aguardientico

Ich habe bei Google rumgehangen, dann habe ich Ihre Frage gefunden und es ist sehr einfach, JSON-Antworten in normales HTML zu analysieren. Verwenden Sie einfach diesen kleinen 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>
5
Justin Imran

Die ursprüngliche Frage bestand darin, eine Liste von Themen zu parsen. Es kann jedoch auch hilfreich sein, mit dem ursprünglichen Beispiel zu beginnen, dass eine Funktion einen einzelnen Wert zurückgibt. Zu diesem Zweck ist hier ein Beispiel (eine Möglichkeit), dies zu tun:

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

0
Paul-59701

Die vom JSON zurückgegebenen Daten sind im Json-Format: Dies sind lediglich Werte-Arrays. Darum sehen Sie [Objekt Objekt], [Objekt Objekt], [Objekt Objekt]

Sie müssen diese Werte durchlaufen, um einen aktuellen Wert zu erhalten. Wie das Folgende

jQuery stellt $ .each () für Iterationen bereit. Sie können dies auch tun:

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

Erstellen Sie nun einfach einen Hyperlink mit diesen Informationen.

0
user2290627

Versuchen Sie den folgenden Code. Dies hilft Ihrem 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'); }
            });
        });

Ich konnte nicht auf Ihre URL zugreifen. Der angezeigte Fehler wird angezeigt

XMLHttpRequest kann http://cooktv.sndimg.com/webcook/sandbox/perf/topics.json nicht laden. Antwort auf Preflight-Anforderung besteht keine Zugriffskontrollprüfung: Auf der angeforderten Ressource ist kein Header "Access Control-Allow-Origin" vorhanden. Origin ' http: // localhost: 19829 ' hat daher keinen Zugriff. Die Antwort hatte den HTTP-Statuscode 501.

0
muthukumar
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
mobuhai