循环使用数组填充网页而不使用HTML但使用Javascript

Question

I'm studying Javascript and I find an interesting question which ask me to Render the model data from library.js in the library, artists and albums view. This means that instead of serving static HTML, I will iterate through every track to create the library view, through every artist to create the artists view and through every album to create the albums view. Since tracks reference artists and albums by _id, I will have to resolve these first in order to populate the library view. As ip I have that since all pages are going to use the same app.js, it will be convenient to add a different class in the body of my HTML pages and based on this class render the correct view. For example the body of the library view can have the class library. This exercise is based on the creation of a music player. I have already create some code to store the tracks and the artists using two different javascript files (what the exercise asks to me). Then I have this two files:

LIBRARY.JS

model.tracks.push('t1', 'Live like therse no tomorrow', 'Selena Gomez', '', 251);
model.tracks.push('t2', 'The scientist', 'ColdPlay', '', 250);
model.tracks.push(_id, title, artist, file, duration);

Where model is:

var model = {
user: [],
artists: [],
albums: [],
playlist: [],
tracks: []
};

APP.JS

window.onload = function(){
// implement the logic to render the views here. Of course, you can call other functions
// to avoid having a huge function
var myStringArray = model.tracks;
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
    alert(myStringArray[i]);
    //Do something
}

Is this idea right for my code or I have to change it? How can transport everything in my web page only working on the javascript??

Answer 1

1. your idea is basically right (the model has to be filled with data dynamically - JSON, make a render function, which would be called from onload handler)

2. I suggest to call REST services delivering the JSON data (large data, changing data), or create a string variable with deflated JSON data and inflate it by the script (static data, offline app)