Risposta JSON anomala tramite jQuery

Question

Ho a che fare con una risposta JSON in una delle mie applicazioni. Ho stabilito una connessione usando jsonp con successo. Ma non sono in grado di analizzare la mia risposta.

Codice:

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

uscita sto ottenendo:

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

Risposta Esempio:

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

voglio in forma di:

Topic: link

Answer 1

dare una prova:

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

I dati restituiti dal JSON sono in formato json: che è semplicemente un array di valori. Ecco perché vedi [oggetto oggetto], [oggetto oggetto], [oggetto oggetto].

È necessario iterare attraverso tali valori per ottenere il valore actuall. Come il seguente

jQuery fornisce $ .each() per iterazioni, così si potrebbe anche fare questo:

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

Ora basta creare un collegamento ipertestuale utilizzando queste informazioni.

Answer 3

La domanda originale era di analizzare un elenco di argomenti, tuttavia, a partire dall'esempio originale per avere una funzione restituire un singolo valore può anche essere utile. A tal fine, ecco un esempio di (un modo) per farlo:

<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

Provare il codice qui sotto. Questo è di aiuto per il tuo codice.

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

Impossibile accedere all'URL. Questo errore è mostrato

XMLHttpRequest non può caricare http://cooktv.sndimg.com/webcook/sandbox/perf/topics.json. La risposta alla richiesta di verifica preliminare non supera il controllo del controllo accessi: Nessuna intestazione 'Access-Control-Allow-Allow-Origin' è presente sulla risorsa richiesta. L'origine 'http://localhost:19829' non è quindi consentita l'accesso. La risposta aveva codice di stato 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

Ero appeso su Google, quindi ho trovato la tua domanda ed è molto semplice analizzare la risposta JSON nel normale HTML. Basta usare questo piccolo codice 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>