JSON et jQuery

J'ai cette chose qui fonctionne le plus souvent. Ce que je ne comprends pas, c'est que si j'ai le fichier sur mon bureau et que je le glisse dans un navigateur, cela fonctionne. Si je télécharge le même fichier sur mon site et que je le visite, il n'y a rien dans Firefox. La nuit dernière, ça a marché dans Safari, mais aujourd'hui ça ne marche pas. Est-ce que quelque chose de vraiment bizarre dans ce code? Voici le pastie en cas de coller tout cela ici ne fonctionne pas :)JSON et jQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> 

<style type="text/css" media="screen"> 
    body{ 
     background: #353535; 
     color: #fff; 
     font-size: 62.5%; 
     padding: 10px; 
    } 
    p{ 
     font-size: 1.6em; 
     font-family: Arial, "MS Trebuchet", sans-serif; 
    } 
    span{ 
     font-size: 1.6em; 
     font-variant: small-caps; 
    } 
    ul { 
     list-style: none; 
    } 
    li { 
     font-size: 1.6em; 
     text-transform: capitalize; 
    } 
    img{ 
     float: left; 
     margin: 10px; 
    } 
</style> 

<!-- actual api http://api.tinychat.com/designtalk.json --> 
<!-- testing file test.json --> 

    <script> 
    $(document).ready(function(){ 
    $.getJSON("http://api.tinychat.com/designtalk.json", 
     function(data){ 

     $('#name').append(data.name); 
     $('#topic').append(data.topic); 
     $('#broadcast').append(data.broadcaster_count); 
     $('#count').append(data.total_count); 
     $('#priv').append(data.priv); 

if(!data.name) 
{ 
    alert("Room empty!") 
} 

    var $nameList = $('<ul></ul>'); 

    $.each(data.names, function (i, val) { 
     $('<li></li>').appendTo($nameList).html(val); 
    }); 

    $('#container').append($nameList); 

    $.each(data.pics, function (i, val) { 

     $("<img/>").attr("src", val).appendTo("#images"); 

    }); 

     }); 

    }); 
    </script> 
</head> 
<body> 
    <p id="name"><span>Room Name:</span> </p> 
    <p id="topic"><span>Current Topic:</span> </p> 
    <p id="broadcast"><span>Number Broadcasting:</span> </p> 
    <p id="count"><span>Total in Room:</span> </p> 
    <p id="priv"><span>Number with Privileges:</span> </p> 

    <div id="container"><span>Who is Online?</span></div> 
    <div id="images"></div> 
</body> 
</html>

Source

2009-09-08 thatryan

Vous pouvez créer des éléments HTML par programme, pour construire une liste HTML par exemple:

$('<div></div>').appendTo('#container').html(data.title); 

var $nameList = $('<ul></ul>'); 

$.each(data.names, function (i, val) { 
    $('<li></li>').appendTo($nameList).html(val); 
}); 

$('#container').append($nameList);

Exemple here.

Sans jQuery:

var container = document.getElementById('container'), 
    title = document.createElement('div'), 
    nameList = document.createElement('ul'), li; 

title.innerHTML = data.title; 
for (var i = 0; i < data.names.length; i++) { 
    li = document.createElement('li'); 
    li.innerHTML = data.names[i]; 
    nameList.appendChild(li); 
} 

container.appendChild(title); 
container.appendChild(nameList);

Exemple here.

Edit: En réponse à votre commentaire, vous manquait le paramètre Flickr specificjsoncallback pour faire la demande JSONP, ainsi que dans la structure de la réponse, le membre JSON names n'existe pas, je pense que vous voulez dire items.

Vérifiez votre exemple de flux fixe here.

Source

2009-09-08 00:41:52 CMS

+1, j'aime que vous avez deux exemples , un en pur JS et un en jQuery, et ils ont tous deux été testés :) – karim79

Merci à tous pour l'aide, je suis toujours coincé et je ne sais pas pourquoi. J'ai essayé cette méthode jquery avec un flux de test JSON à partir de flickr, mais rien ne se passe. Est-ce que je manque quelque chose de stupide? Voici le code, il n'y avait pas assez de place ici, donc c'est sur pastie. http://pastie.textmate.org/private/wqtv1pgtri0fpnrkczgifw Merci encore. – thatryan

Merci encore les gars, j'ai changé mon message original pour refléter quel est le problème actuel, j'espère que vous pouvez aider merci! – thatryan

Dans la fonction de rappel que vous allez simplement à travers chaque élément. Disons que vous vouliez ajouter les noms à un div avec l'id de namesDiv que vous pourriez faire ceci:

$.get("something.aspx", function(json) { 
    for(var i =0; i< json.names.length; i++) 
    { 
     $('#namesDiv').append(json.names[i]); 
    }

Source

2009-09-08 00:38:13 stimms

Il existe un plugin firefox qui formate les données json. https://addons.mozilla.org/en-US/firefox/addon/10869

Ceci suppose que vous voulez seulement savoir ce que les données JSON ressemble et donc à la programmation en elle ...

Source

2009-09-08 00:42:27 deostroll

Très long dans la dent, mais il ne prend soin de reconnaître que les propriétés de votre objet peuvent avoir leurs propres propriétés. Suppose qu'un élément DIV (ou similaire) existe avec un ID de "contenu".

function WriteObject(obj, tabs) 
{ 
    tabs = tabs || 0; 

    var padding = ""; 

    for(var i = 0; i < tabs; ++i) 
    { 
    padding += "\&nbsp;"; 
    } 

    for(var prop in obj) 
    { 
    if(typeof(obj[prop]) === "object") 
    { 
     if(obj[prop].constructor === Array) 
     { 
     var str = obj[prop].join(","); 
     $("#content").append(padding + prop + ": " + str + "<br />");   
     }  
     else 
     { 
     $("#content").append(padding + prop + "<br />"); 
     WriteObject(obj[prop], tabs + 1); 
     } 
    } 
    else 
    { 
     $("#content").append(padding + prop + ": " + (obj[prop] ? obj[prop] : "null") + "<br />");    
    } 
    } 
}

Source

2009-09-08 01:00:42

Vous pouvez la page ci-dessous:
Dans les navigateurs modernes vous n'avez plus besoin de la bibliothèque json2.js json.org

<html> 
<head> 
    <script src="http://www.json.org/json2.js"></script> 
</head> 
<body> 
    <pre id="res"></pre> 

    <script> 
     var json = { 
      "title":"No title", 
      "names":["", "dave", "jeff", "sean", "", ""], 
      "total_people":3 
     }; 
     document.getElementById('res').innerHTML = JSON.stringify(json, null, 2); 
    </script> 
</body> 
</html>

Source

2009-09-08 14:06:37 Mic

JSON et jQuery

Répondre

Questions connexes