javascriptjsontvostvmltvjs

Parsing JSON for multiple categories for TVOS


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");
}

Solution

  • 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)
    }