JSON and jQuery

Question

I have this thing working mostly. What I don't get is, if I have the file on my desktop and drag it into a browser, it works. If I upload the same file to my website and visit it, it displays nothing in Firefox. Last night it worked in Safari, but today it does not. Is something really weird in this code? Here is the pastie in case pasting all this in here does not work :)

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

stimms · Accepted Answer · 2009-09-08 00:38:13Z

1

In the callback function you would just go through each element. Let's say you wanted to append the names to a div with the id of namesDiv you might do this:

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

answered Sep 8, 2009 at 0:38

stimms

44.3k31 gold badges104 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christian C. Salvadó · Accepted Answer · 2009-09-08 06:01:53Z

0

You can create HTML elements programmatically, to build an HTML List for example:

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

Example here.

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

Example here.

Edit: In response to your comment, you were missing the Flickr specific parameter jsoncallback to make the JSONP request, and also in the structure of the JSON response the names member doesn't exists, I think you mean items.

Check your feed example fixed here.

edited Sep 8, 2009 at 6:01

answered Sep 8, 2009 at 0:41

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

3 Comments

karim79 Over a year ago

+1, I love that you've got two examples, one in pure JS and one in jQuery, and they've both been tested :)

thatryan Over a year ago

Thanks everyone for the help, I am still stuck though and do not know why. I tried this jquery method with a test JSON feed from flickr, but nothing is happening. Am I missing something stupid? Here is the code, was not enough room here, so it's on pastie. pastie.textmate.org/private/wqtv1pgtri0fpnrkczgifw Thanks again.

thatryan Over a year ago

Thanks again guys, I changed my original post to reflect what the current problem is, I hope you can help thanks!

deostroll · Accepted Answer · 2009-09-08 00:42:27Z

-1

There is a firefox plugin which formats json data. https://addons.mozilla.org/en-US/firefox/addon/10869

This is assuming you only want to learn what the json data looks like and hence start programming in it...

answered Sep 8, 2009 at 0:42

deostroll

12k22 gold badges94 silver badges168 bronze badges

Comments

David Andres · Accepted Answer · 2009-09-08 01:00:42Z

Very long in the tooth, but it does take care to recognize that properties of your object may have their own properties as well. Assumes a DIV element (or similar) exists with an ID of "content."

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

Mic · Accepted Answer · 2009-09-08 14:06:37Z

-1

You can try the page below:
In modern browsers you don't need anymore the json2.js library from 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>

answered Sep 8, 2009 at 14:06

Mic

25.2k9 gold badges62 silver badges71 bronze badges

Collectives™ on Stack Overflow

JSON and jQuery

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related