Populate web data from a JSON Array using php

Question

I have been playing around with JSON for a few days and I really think it's a pretty cool way to interchange data making use of it... I am building an app using jquery mobile where I am trying to populate Json data, so far I have tried this approach:

From a json file named movie-details.json I have this:

{"movies":[{"id":"1","name":"Dabangg2","picUrl":"http:\/\/www.naz8.com\/images\/Dabangg2.jpg"},{"id":"2","name":"Talassh","picUrl":"http:\/\/www.naz8.com\/images\/talassh.jpg"},{"id":"3","name":"JAB TAK HAI JAAN","picUrl":"http:\/\/www.naz8.com\/images\/jthj.jpg"},{"id":"4","name":"Khiladi 786","picUrl":"http:\/\/www.naz8.com\/images\/khiladi786.jpg"}]}

and I can get the data via the following to dynamically create a detailed listview:

<script type="text/javascript">

 $.getJSON("movie-details.json", function(movies){
   //Start off with an empty list every time to get the latest from server
   $('#movieList').empty();

   //add the movie items as list
   $.each(movies, function(i, movie){
     $('#movieList').append(generateMovieLink(movie));
   });

   //refresh the list view to show the latest changes
   $('#movieList').listview('refresh');

 });

  //creates a movie link list item
 function generateMovieLink(movie){

  //debugger;
  return '<li><a href="javascript:void(0)'
        + '" onclick="goToMovieDetailPage(\''
        + movie.name 
        + '\',\''
        + movie.picUrl +'\')">' 
        + movie.name 
        + '</a></li>';
 }

 function goToMovieDetailPage(movieName, moviePicUrl){

  //create the page html template
  var moviePage = $("<div data-role='page' data-url=dummyUrl><div data-role='header' data-add-back-btn='true'><h1>"
                  + movieName + "</h1></div><div data-role='content'><img border='0' src='" 
                  + moviePicUrl + "' width=204 height=288></img></div><div data-role='footer' data-position='fixed'><h4>" 
                  + movieName + "</h4></div></div>");

  //append the new page to the page container
  moviePage.appendTo( $.mobile.pageContainer );

  //go to the newly created page
  $.mobile.changePage( moviePage );
 }  

</script>

how can I populate the data from a php file, for example movie-details.php:

<?php
include('connection.php');
$var = array();
$sql = "SELECT * FROM movies";
$result = mysqli_query($con, $sql);

while($obj = mysqli_fetch_object($result)) {
$var[] = $obj;
}
echo '{"movies":'.json_encode($var).'}';
?>

What variables do I have to declare to fetch the json data from the objet in the php file?

For example:

// JUST AN IDEA... I AM CONFUSED..

var url="....";

$.getJSON(url,function(...){

$.each(movie.movies, function(i,...)

Your help is greatly appreciated...

Answer 1

You should json encode the whole shebang.

echo json_encode(array("movies" => $var));

As for the jquery method, $.getJSON('<url>', ...) will work.

Answer 2

The easiest way for me is to just get the visual of the data as a tree from the console.

$.getJSON(url, function(data){  
    console.log(data) 
});