CODEWITHSUNDEEP
javascriptjqueryjson
thatryan
thatryan

Reputation: 1559

JSON and jQuery

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>

Upvotes: -1

Views: 396

Answers (5)

Mic
Mic

Reputation: 25184

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>

Upvotes: -1

Christian C. Salvad&#243;
Christian C. Salvad&#243;

Reputation: 828170

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.

Upvotes: 0

David Andres
David Andres

Reputation: 31811

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

Upvotes: -1

deostroll
deostroll

Reputation: 11995

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

Upvotes: -1

stimms
stimms

Reputation: 44104

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

Upvotes: 1

Related Questions