Create Pages from JSON

[Bad Addy]

I have a json with a book pages, and each book is different I would like to create it so pages are created based on the book size.

Using the template I can do this, but to add static pages when I do not know the length of the book is a little silly.

I have this code, which shows part of the JSON and the code I am trying to add to the existing page. But I get no errors, and I do not know where the new HTML is being appended.

precode
"page18": {
"audio": "link to page audio",
"text": "Her room was bright again and Chloe was happy about that. She turned to the lamp and looking back was a big smilely face, with a small noise and two eyes. 'Hello' said the lamp shade. 'My name is Percy, Percy Shade' he continued and finished with a warm smile.",
"images": {
"pageImage": "page8_image.jpg"
}
},

Code: Select all

 "page19": { 
     "audio": "link to page audio", 
     "text": "Her room was bright again and Chloe was happy about that. She turned to the lamp and looking back was a big smilely face, with a small noise and two eyes. 'Hello' said the lamp shade. 'My name is Percy, Percy Shade' he continued and finished with a warm smile.", 
     "images": { 
         "pageImage": "page8_image.jpg" 
     } 
 }, 

 "page20": { 
     "audio": "link to page audio", 
     "text": "Her room was bright again and Chloe was happy about that. She turned to the lamp and looking back was a big smilely face, with a small noise and two eyes. 'Hello' said the lamp shade. 'My name is Percy, Percy Shade' he continued and finished with a warm smile.", 
     "images": { 
         "pageImage": "page8_image.jpg" 
     } 
 } 

};

//Get page Count
var pages;
var PageCount = 0;
for (pages in book) {
PageCount++;
}
console.log(PageCount);

//Load pages into variable
var newPages = '';
for(p=0; p == PageCount; p++) {
newPages += '<div data-role="page" style="min-height: 768px;" dsid="page'+p+'" id="page'+p+'" class="type-interior ui-page ui-page-theme-a" data-theme="a" data-url="page'+p+'" tabindex="0">Test Text<>';
}

&#47;&#47;console&#46;log(newPages);
&#47;&#47;Post variables to screen
$(newPages)&#46;appendTo('div[data-role="page"]');

/code/pre

Do you have any ideas on this ?

[Bad Addy]

Thank you for the quick reply.....

I have completed this by doing this:

precode
"page19": {
"audio": "link to page audio",
"text": "Her room was bright again and Chloe was happy about that&#46; She turned to the lamp and looking back was a big smilely face, with a small noise and two eyes&#46; 'Hello' said the lamp shade&#46; 'My name is Percy, Percy Shade' he continued and finished with a warm smile&#46;",
"images": {
"pageImage": "page8_image&#46;jpg"
}
},

Code: Select all

 "page20": { 
     "audio": "link to page audio", 
     "text": "Her room was bright again and Chloe was happy about that. She turned to the lamp and looking back was a big smilely face, with a small noise and two eyes. 'Hello' said the lamp shade. 'My name is Percy, Percy Shade' he continued and finished with a warm smile.", 
     "images": { 
         "pageImage": "page8_image.jpg" 
     } 
 } 

};

&#47;&#47;Get page Count
var pages;
var PageCount = 0;
for (pages in book) {
PageCount++;
}

&#47;&#47;Load pages into variable
var newPages = '';
var i = 2;
while(i < PageCount) {
newPages += '<div data-role="page" style="min-height: 768px;" dsid="page'+i+'" id="page'+i+'" class="type-interior ui-page ui-page-theme-a" data-theme="a" data-url="page'+i+'" tabindex="0">etc etc etc<>';
i++;
}

$(document)&#46;ready(function() {
&#47;&#47;Post variables to screen
$('body')&#46;append(newPages);
});
/code/pre

The key was having it load when the page was ready, hence the:

precode
$(document)&#46;ready(function() {
&#47;&#47;Post variables to screen
$('body')&#46;append(newPages);
});
/code/pre

So you can create dynamic pages using templates from file, or database or even storage

[Alena Prykhodko]

Great. Thank you for update.
Your solution may be helpful for other users!

[Bad Addy]

do I get a shinny yellow star then :p

[Maryna Brodina]

Sure:)