Using $.each() within $.getJSON

Using jquery: Using $.each() within $.getJSON on newest questions tagged jquery – Stack Overflow

This is for a jQuery Mobile app using version 1.0.1.

I’m trying to get data from my getmovies.php file, which outputs JSON, to use in a jQuery function which appends the data to an unordered list on my HTML page.

My HTML page displays correctly, but the getMoviesList() function does not append any list items, so the content area is left blank.

My guess is that there is something wrong with my $.each() function. I’m more comfortable with PHP, but trying to get more familiar with jQuery and JSON for moving data around within jQuery Mobile apps.

getmovies.php outputs JSON as follows:

{"movieID":"65086","title":"The Woman in Black","poster":"\/kArMj2qsOnpxBCpSa3RQ0XemUiX.jpg"},

My Javascript is as follows:

var serviceURL = "";

var movies;

$('#moviesPage').bind('pageinit', function(event) {

function getMoviesList() {
  $.getJSON(serviceURL + 'getmovies.php', function(data) {
    $('#moviesList li').remove();
    movies = data.items;
    $.each(movies, function(index, movie) {
      $('#moviesList').append('<li><a href="movie-details.html?movieID=' + movie.movieID + '">' +
      '<img src="posters/' + movie.poster + '"/>' +
      '<h4>' + movie.title + '</h4>' +
      '<p>Other details...</p>' +

My HTML looks like this:

<div id="moviesPage" data-role="page">

  <div data-role="content">

    <ul id="moviesList" data-role="listview" data-filter="true"></ul>

  </div><!-- /content -->

</div><!-- /page -->

I’m trying to modify the following example app to meet my needs:

Thanks for any help you can offer.

See Answers

Using jquery: using-jquery

Leave a Reply