Building a catalog from a JSON file

[Lisa Evans]

Our company has a backend for building simple apps that can contain a catalog, an events blog, a map, etc. We were building an app creator to then use this backend to make nice looking apps, but we've given that up because there are so many great tools like Tiggzi out there now! So I'm seeing if I can build an app using Tiggzi with the backend we already have.

So the catalog JSON file has items, each of which can have a name, a short html description, an image, etc. And then each item can have multiple children, each of which can have a name, short description, image, etc. And each of those children can have multiple children.

I've tried using a rest service to request this JSON file and build the automatic response, and that works fine. But when I then connect it up to a grid or list, all the nested children are put in to the top level list.

I'm just trying to work out what is the best approach to work out the parent/child relationships of each item in the catalog and nest them appropriately. Do you have any general advice for me? I'm not amazingly familiar with javascript, I'm more of a Python person, but I'm trying to learn my way around.

Here is a JSON url for a sample catalog that we've built for testing our backend: https://test-appbox.stirfirestudios.c...

[maxkatz]

Do you want to display all the information on one page or multiple pages. Multiple pages would be - here is a list, click on an item to get its details. Similar to this: http://docs.tiggzi.com/tutorials/buil...

[Lisa Evans]

Hi Max, sorry for the delay in replying. I would want multiple pages that reflect the structure that you get when you build the automatic response from the JSON file. I've looked at that tutorial before, but our backend only supplies the JSON file. It's kind of more like the situation in the RSS news app, which provides just a single xml file, only the file we are working with has several levels of items with children, which have children, which have children. I want to preserve that structure in a series of pages with lists and html panels.

[Maryna Brodina]

Hello! You would need to have mapping with the similar structure. For example:
if you want to map an array items to some container (Grid/Collapsible Block/Panel/etc) and array Children map to some other container (which is inside first one) then the data from array Children will be displayed on screen.

If you want to display data from array Children which is inside Children which is inside Items - you would need to create one more container (Grid/Collapsible Block/Panel/etc) and map data to that container.

But this structure will work only for one screen. If you want to do this for several screens you have to save Rest Service results to local storage and get that results using JavaScript

So if you have an array and inside that array another array and one more array - you would need to have container inside container and one more container to map results to those containers from array.

[Lisa Evans]

Hi Marina, I have played with similar approaches and they don't seem to work. For example, I've tried having a grid inside a grid, and mapping the children array to the second grid, but the app will end up putting the children in both grids, if you see what I mean? The mapping just doesn't seem to work well when there is any kind of recursion, if flattens the parent-child structure out and puts everything into the top level no matter what you do.

The problem with saving Rest Service results to local storage is that our backend doesn't work as a Rest Service, it will only give you the entire JSON file. So I suppose I need to save the whole JSON file to a variable and then write javascript to work out the parent-child structures in the catalogue and save them all into new arrays, and then use those. I was wondering if that would be a job for a generic service, but I'm not sure how to do it. I did read that you can use onSuccess to capture the entire JSON file into a variable, but I haven't even been able to work out how to do that yet.

If this is too difficult, I might just have to talk to the guy who coded the backend and see if he can change the way it works, but he's busy on more important projects at the moment.

[Maryna Brodina]

Hello! You are right that it's quite difficult and that Generic service can be used here. I'll ask our dev team and try to update.

[Lisa Evans]

Hi, I was wondering if there is any further information on this?

[Lisa Evans]

Oh dear, I had some time today to play around with this JSON file in javascript myself, I've realised the fault is in the construction of the JSON file! It's not being put together correctly. I'll have to sort it out with the guy who made our backend. Sorry for the false alarm.