I am creating a page within my TVOS app that parses my json based on 2 different categories ("full live sets" and "live single"). I'm using a catalogTemplate to put categories on the left and results on the right.
With the below code, the first category loads as expected because it's grabbing the first grid. How would I expand this for a second category (and up to 10 or so categories?).
function getJSONDocument(url, category) {
var templateXHR = new XMLHttpRequest();
var fullURL = baseURL + url;
var loadingScreen = loadingTemplate();
templateXHR.responseType = "document";
templateXHR.addEventListener("load", function() {parseJson(templateXHR.responseText);}, false);
templateXHR.open("GET", fullURL, true);
templateXHR.send();
}
function parseJson(information) {
var results = JSON.parse(information);
let parsedTemplate = templateDocument()
navigationDocument.pushDocument(parsedTemplate)
//this works for templateDocument, but can only do one category / section / grid
let grid = parsedTemplate.getElementsByTagName("grid").item(0)
let section = grid.getElementsByTagName("section").item(0)
//this doesn't work parsedTemplate.getElementsByTagName("grid").item(1)
// doesn't work grid.getElementsByTagName("section").item(1)
//create an empty data item for the section
section.dataItem = new DataItem()
//create data items from objects
let newItems = results.map((result) => {
// this function requires each JSON entry to have an ID and a type
// the type is chosen in the xml in <lockup prototype="type">.
// should be set to whatever type you want to pull
let objectItem = new DataItem(result.type, result.ID);
objectItem.thumb = baseURL + result.thumb;
objectItem.title = result.title;
return objectItem;
});
//add the data items to the section's data item; 'images' relates to the binding name in the protoype where items:{images} is all of the newItems being added to the sections' data item;
section.dataItem.setPropertyPath("images", newItems)
}
function templateDocument() {
// to allow for different pages, this function needs to be called
// by passing a type with this function (templateDocument(livemusic))
let template = `<?xml version="1.0" encoding="UTF-8" ?>
<document>
<catalogTemplate>
<banner>
<title>Live Music</title>
</banner>
<list>
<section>
<listItemLockup>
<title>JSON</title>
<decorationLabel>heh</decorationLabel>
<relatedContent>
<grid>
<prototypes>
<lockup prototype="live single">
<img binding="@src:{thumb};" width="250" height="376" />
<title binding="textContent:{title};" />
</lockup>
</prototypes>
<section binding="items:{images};" />
</grid>
</relatedContent>
</listItemLockup>
<listItemLockup>
<title>JSON</title>
<decorationLabel>heh</decorationLabel>
<relatedContent>
<grid>
<prototypes>
<lockup prototype="full live set">
<img binding="@src:{thumb};" width="250" height="376" />
<title binding="textContent:{title};" />
</lockup>
</prototypes>
<section binding="items:{images};" />
</grid>
</relatedContent>
</listItemLockup>
</section>
</list>
</catalogTemplate>
</document>`;
return new DOMParser().parseFromString(template, "application/xml");
}
function parseJson(information) {
var results = JSON.parse(information);
let parsedTemplate = templateDocument()
navigationDocument.pushDocument(parsedTemplate)
//this works for templateDocument, but can only do one category / section / grid
let liveFullGrid = parsedTemplate.getElementsByTagName("grid").item(1)
//the array counting here starts again with 0 because its counting from inside grid #1
let liveFullSection = liveFullGrid.getElementsByTagName("section").item(0)
let liveSingleGrid = parsedTemplate.getElementsByTagName("grid").item(0)
let liveSingleSection = liveSingleGrid.getElementsByTagName("section").item(0)
//create an empty data item for the section
liveFullSection.dataItem = new DataItem()
liveSingleSection.dataItem = new DataItem()
//liveSingleSection.dataItem = new DataItem()
//create data items from objects
let newItems = results.map((result) => {
// this function requires each JSON entry to have an ID and a type
// the type is chosen in the xml in <lockup prototype="type">.
// should be set to whatever type you want to pull
let objectItem = new DataItem(result.type, result.ID);
objectItem.thumb = baseURL + result.thumb;
objectItem.title = result.title;
return objectItem;
});
//add the data items to the section's data item; 'images' relates to the binding name in the protoype where items:{images} is all of the newItems being added to the sections' data item;
liveFullSection.dataItem.setPropertyPath("images", newItems)
liveSingleSection.dataItem.setPropertyPath("images", newItems)
}