Réponse Parse JSON en utilisant jQuery

Question

J'ai affaire à une réponse JSON dans l'une de mes applications. J'ai établi une connexion en utilisant jsonp avec succès. Mais je ne suis pas capable d'analyser ma réponse.

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> 

sortie je reçois:

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

Exemple de réponse:

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

Je veux sous la forme de:

Sujet: Lien

Answer 1

pour cette solution:

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

Les données renvoyées par le JSON est au format JSON: ce qui est tout simplement un des tableaux de valeurs. C'est pourquoi vous voyez [objet objet], [objet objet], [objet objet].

Vous devez parcourir ces valeurs pour obtenir la valeur actuall. Comme le

jQuery suivant fournit .each $() pour itérations, vous pouvez aussi le faire:

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

Maintenant, il suffit de créer un lien hypertexte en utilisant cette information.

Answer 3

La question initiale était d'analyser une liste de sujets, mais en commençant par l'exemple original pour qu'une fonction retourne une seule valeur peut également être utile. À cette fin, voici un exemple de (une façon) de le faire:

<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

Essayez le code ci-dessous. Ceci aide votre 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'); } 
      }); 
     }); 

Je n'ai pas pu accéder à votre URL. L'erreur suivante est présente:

XMLHttpRequest ne peut pas charger http://cooktv.sndimg.com/webcook/sandbox/perf/topics.json. La réponse à la demande de contrôle en amont ne passe pas la vérification du contrôle d'accès: aucun en-tête «Access-Control-Allow-Origin» n'est présent sur la ressource demandée. L'origine 'http://localhost:19829' n'est donc pas autorisée. La réponse avait le code 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

Je traînais sur Google, puis j'ai trouvé votre question et il est très simple d'analyser la réponse JSON en HTML normal. Il suffit d'utiliser ce petit code 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>