jQuery .getJSON and .ajax get request both return null

Question

I am trying to load a json file with ajax to populate my html, and for whatever reason, when I try to do so the json that is returned from either a simple ajax call or .getJSON call is null. Here is my HTML:

<!doctype html>
<html>
  <head>
     <title>Lab 4 AJAX</title>
     <script type="text/javascript" src="resources/jquery-1.4.3.min.js"></script>
     <script src="lab4.js"></script>
  </head>
  <body>
    <div id="song-template">
      <a id="site" href="#"><img id="coverart" src="images/noalbum.png"/></a>
      <h1 id="title"></h1>
      <h2 id="artist"></h2>
      <h2 id="album"></h2>
      <p id="date"></p>
      <p id="genre"></p>
    </div>
  </body>
</html>

Here is a sample of the JSON I'm trying to load:

[
    {
        "name" : "Short Skirt, Long Jacket",
        "artist" : "Cake",
        "album" : "Comfort Eagle",
        "genre" : "Rock",
        "year" : 2001,
        "albumCoverURL" : "images/ComfortEagle.jpg",
        "bandWebsiteURL" : "http://www.cakemusic.com"
    }
]

And here is the javascript I am trying to load it with:

function updateHTML(json) 
{
    var templateNode = $("#song-template").clone(true);
    $("#song-template").remove();

    debugger;

    $.each(json, function(key, song)
    {
        var songNode = templateNode.clone(true);
        songNode.children("#site").href(song.bandWebsiteURL);
        songNode.children("#coverart").src(song.albumCoverURL);
        songNode.children("#title").text(song.name);
        songNode.children("#artist").text(song.artist);
        songNode.children("#album").text(song.album);
        songNode.children("#date").text(song.year);
        songNode.children("#genre").text(song.genre);
        $("body").append(songNode);
    });
}

$(document).ready(function()
{
    $("#site").click(function() 
    {
        $.getJSON("lab4.json", updateHTML);
        // $.ajax(
        // {
        //  url: "lab4.json",
        //  type: "GET",
        //  dataType: "json",
        //  success: updateHTML
        // });
    });
});

Both the getJSON and the ajax result in json being null when updateHTML is run. Any idea what could be causing this?

What response do you get from the server when calling lab4.json? — Mike Brant
– Mike Brant, Commented Oct 15, 2013 at 18:31
@tymeJV, I just looked at the network requests and there is an error - Origin null is not allowed by Access-Control-Allow-Origin. Do you know what could be causing this? — Logan Shire
– Logan Shire, Commented Oct 15, 2013 at 18:48

Explosion Pills · Accepted Answer · 2013-10-15 18:33:28Z

1

.href and .src are not jQuery methods. You need to write:

.attr("href", 
.attr("src",

http://jsfiddle.net/ExplosionPIlls/cwwCh/

answered Oct 15, 2013 at 18:33

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

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

5 Comments

Logan Shire Over a year ago

Thanks for that. I updated it but the ajax request is still coming back null.

Explosion Pills Over a year ago

@LoganShire what happens when you go to lab4.json in your browser? Make sure that the paths match too since you are using a relative path

Logan Shire Over a year ago

I just looked at the network requests and there is an error - Origin null is not allowed by Access-Control-Allow-Origin. Do you know what could be causing this?

Explosion Pills Over a year ago

@LoganShire is your URL for getJSON to another domain?

Logan Shire Over a year ago

No. It is a json file in the same directory as the javascript file.

Collectives™ on Stack Overflow

jQuery .getJSON and .ajax get request both return null

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related