Note: This demo assumes you have already completed the Converting mySQL data to JSON with php demo
 

Load data from a json api into memory, flow into page
For this demo we are going to load a subset of the movies data (only PG films) into through a stand-alone API, which outputs it as json. We will load the data into memory through a jQuery ajax call. You can see the output directly by opening http://demos.webdev.iyaserver.com/json/jsonoutput.php.

Save to your computer the start-file below (save it as a php file, but for our deo today it could be a pure html file since we do not have any php needed for this demo):
https://demos.webdev.iyaserver.com/json/data_records_start.txt
(Review: Javascript data objects, webpage object manipulation, data objects, arrays of JS objects)
You can load a series of data entries into a single JS variables array, and access them through their array positions:

let topmovies = ["Die hard", "Ace ventura", "Star wars"];
console.log(topmovies);
console.log(topmovies[2]);
You can also create a data object mapping name/property to value, and access data through the property name:

let person1 = { "name":"patrick dent", "title":"associate dean", "email" : "dent@usc.edu" };
console.log(person1);
console.log(person1.title) ;
And you can combine the two to save and access a series of objects:

let testmovies = [
	{
		"title" : "star wars",
		"genre" : "Sci-Fi",
		"rating" : "PG"
	},
	{
		"title" : "die hard",
		"genre" : "Action",
		"rating" : "R"
	},
	{
		"title" : "Ace Ventura",
		"genre" : "Comedy",
		"rating" : "PG-13"
	}
]

console.log(testmovies);
console.log(testmovies[0]);
console.log(testmovies[0].title);
So, take a look at the JS set up below that loads three movies, in a format/field structure that should look familiar:

let movies = [
    {
        "title":"5th Day of Peace",
        "release_date":null,
        "award":null,
        "label":"Simitar",
        "sound":"Dolby TrueHD",
        "genre":"Drama",
        "rating":"PG",
        "format":"Fullscreen, Widescreen"
    },
	{
		"title":"Absence of Malice ",
		"release_date":null,
		"award":null,
		"label":"Columbia TriStar",
		"sound":"Dolby TrueHD",
		"genre":"Drama",
		"rating":"PG",
		"format":"Fullscreen, Widescreen"
	},
	{
		"title":"Air Bud ",
		"release_date":null,
		"award":null,
		"label":"Buena Vista",
		"sound":"Dolby TrueHD",
		"genre":"Children's/Family",
		"rating":"PG",
		"format":"Fullscreen, Widescreen"
	},
	{
		"title":"All of Me ",
		"release_date":null,
		"award":null,
		"label":"Trimark",
		"sound":"Dolby TrueHD",
		"genre":"Comedy",
		"rating":"PG",
		"format":"Fullscreen, Widescreen"
	}
	]
Ok, so let's look at the structue of the data above, in that format, loads into an array (rows of data for) "movies" (restricted to a set of PG movies) from the db: https://demos.webdev.iyaserver.com/json/data_records_start.txt.

In our starter code, a variable is created in memory named "movies", then jQuery code calls the json api (http://demos.webdev.iyaserver.com/json/jsonoutput.php) and saves the query output/recordset (in json format) into that movies variable through:

    $.ajax({
        url: "http://demos.webdev.iyaserver.com/json/jsonoutput.php",
        type: "GET",
        datatype: "jsonp"
        }).done(function(data) {
            movies = JSON.parse(data);
            output(); // call output function ONCE above is complete
        }); // end ajax block
Note: below that code there is an "output" function that is called at the successful completion of the api call.

So note that the output function (called at the successful completion of the calling/loading of the api data) does some test console.log outputs.

So having loaded/run the page/code, try trying the following two lines directly into the javascript console:

console.log(movies[10])
console.log(movies[10].genre)
You can see that we can access individual entries (movies). We would not really do the first (all columns of the data), but we can access each record and field for output.

Ok, now let's start integrating that data into the existing page (html objects) .

 

(Review) Data record page
So we've loaded (saved as your own page) the file https://demos.webdev.iyaserver.com/json/data_records_start.txt. Again, this page has already loaded the records/query data into the movies variable.

Notice the page already outputs the following into the console.log, to see/test the data:

console.log(movies); console.log(movies[1]; console.log(movies[1].title);
Btw, you can delete those lines or leave them in (since they are only displaying in the javascript console).

Ok, now look at the structure of the page. Notice that it displays one (fake/empty) movie record, with each component (title, genre, etc.) in an html object with an ID. Also notice there are two "next" and "previous" buttons, and below them a "status" box.

So first off, reviewing our JS, we can change the content of the data "boxes" in JS by changing/setting their innerHTML (we could also use jQuery). So try the code entering below into the console:

document.querySelector("#title").innerHTML = 'Star Wars';
document.querySelector("#genre").innerHTML = 'Sci-Fi';
document.querySelector("#status").innerHTML = 'Record 1 of 122';
Ok, so we need to set up a function that loads the data (from the json). Let's write a new function at the bottom of the last script block (below the output function):

const settitle=function(){

    // record data
    document.querySelector("#title").innerHTML = 'Star Wars';
    document.querySelector("#genre").innerHTML = 'Sci-Fi';
   
    // load overall results data
   document.querySelector("#status").innerHTML = 'Record 1 of 122';
}
And now let's move onto using the i variable, which we will use to pull one row of array data, and call that function once right after we create it:

let i=0;
const settitle=function(){

    // record data
    document.querySelector("#title").innerHTML = movies[i].title;
    document.querySelector("#genre").innerHTML = movies[i].genre;
    document.querySelector("#rating").innerHTML = movies[i].rating;
    document.querySelector("#label").innerHTML = movies[i].label;
    document.querySelector("#screen").innerHTML = movies[i].format;
    document.querySelector("#audio").innerHTML = movies[i].sound;

    // load overall results data
    document.querySelector("#status").innerHTML = "(Record " + i + "  of " + movies.length + ".)";
}
But wait, none of that is being triggered/executed yet. We need to make sure it is not "run" until the page loads, including the successful completion of calling the json script and the api populating the movies variable. So edit the ajax script to add calling settitle(). You can choose to leave in or remove the test "output" function:

    $.ajax({
        url: "http://demos.webdev.iyaserver.com/json/jsonoutput.php",
        type: "GET",
        datatype: "jsonp"
        }).done(function(data) {
            movies = JSON.parse(data);
            output(); // call output function ONCE above is complete
			settitle();
        }); // end ajax block
But our index variable is 1 lower than what the consumer would think (row 0 from the array is really record/movie 1, so let's just adjust the setttitle function when we display i:

    // load overall results data
    document.querySelector("#status").innerHTML = "(Record " + (i+1) + "  of " + movies.length + ".)";
And finally, let's add JS event triggers to each arrow that increases or decreases i, then re-calls settitle():

document.querySelector("#next").addEventListener("click", function(){
    i++;
    settitle();
})

document.querySelector("#prev").addEventListener("click", function(){
    i--;
    settitle();
})
Now try out the buttons. We are able to "move" between the records loaded into memory. But wait, just like with implementing pagination with php, what if we run out of records (no more Next) or try to go below zero? So we should edit our code to account for that:

document.querySelector("#next").addEventListener("click", function(){
    i++;
    if (i > movies.length - 1) { i=0 }
    settitle();
})

document.querySelector("#prev").addEventListener("click", function(){
    i--;
    if(i<0) { i = movies.length - 1 }
    settitle();
})
Ok, now we've got a page that lets the user move between records without reloading!

You can see this page in action at data_records_json.php and the underlying code at data_records_json.txt.