JSON request and generating (repeating) UI rows from response

Hi all,

Similar to the following post, I want to make an app that can pull a JSON file from an HTTP request:
parsing json

I didn’t really understand the solution given, and perhaps my requirement is slightly different?

Goal:

  • Install HTTP Request component (done)
  • Put a button on screen (done)
  • Setup remote server with a json file (done) It’s actually a PHP file which outputs json text.
  • On button click, run HTTP Request and pull this json file (done). (done)
  • in the AppGuyver app, have a Row, with 3 partitions (1 icon, 2 paragraphs) (done)

Need to do:

  • on button press, I want to parse the json from the httprequest and repeat this scrollable row filling in the items from the json.

I think I need to setup a page/app variable for local storage, or a Data source, but I thought the http request component could parse the response fine. I just don’t know how to iterate this response data and connect that to the Rows so it’s a repeated item. There will be 30 or 40 items in the the json max, and it follows the following structure:

[{"Results":[
	{"Date":"7.14pm Sat 10 Jul",
	"Where":"Some location",
	"Url":"http://link.com"},
	{"Date":"7.14pm Sat 10 Jul",
	"Where":"Some location",
	"Url":"http://link.com"},
	{"Date":"7.14pm Sat 10 Jul",
	"Where":"Some location",
	"Url":"http://link.com"},
	...
	
	]
}]

and the AppGuyver UI looks like this…

image

and the code:

Any help would be greatly appreciated,
Many thanks,
J

Thats easy. If youre using the HTTP Request flow function then do this:
Create a List-of-Objects variable with this schema (ill call it TestObj):
Capture

Set this variable = output of your HTTP Request, but bind it as a formula if you have to:
TestObj = outputs[“HTTP GET”].resBody

So now in your Row container just set the ‘Repeat with’ field to your variable (TestObj) and it will automatically repeat # of items. In your Row paragraphs just set their Content field to current.Date, current.Where, or current.Url you want to display.

You dont need to do anything complicated than that.

Hey John, thanks for the reply. Just need a little more detail - would you be ok going through the steps in a bit more detail. Just having issues setting up the variables and how to setup the API etc…

Many thanks,
J

I’ve followed your post, but I think I’ve gone wrong in the data var setting somewhere.

Ok, did that:

So here within the button component tap, I did the following:

HTTP Request > Set app Variable → alert output (debug)

I think the set app variable is not done right here. Do I need to map the json fields to the local app variable object fields, or does it automatically do that when the fieldnames are the same?

image

image

The Alert at the end does popup with the correct content from the HTTP Request, so the data pull is working, just I dont think it’s assigning to the local app variable correctly.

I set this Repeat, and set the fields to “current.date” and “current.where” etc, however the rows are not repeating and staying as a single row, with blank fields.

Row Repeat
image

Field 1
image

Field 2
image

So I think the issue is the Set app variable somehow, with the formula for assigning the value…

Many thanks,
J

Ok, I found the solution. It was my JSON file format. Before I had the structure to have one single element “Results” which contained the array of all the following objects:

[{"Results":[
	{"Date":"7.14pm Sat 10 Jul",
	"Where":"Some location",
	"Url":"http://link.com"},
	{"Date":"7.14pm Sat 10 Jul",
	"Where":"Some location",
	"Url":"http://link.com"},
	{"Date":"7.14pm Sat 10 Jul",
	"Where":"Some location",
	"Url":"http://link.com"},
	...
	
	]
}]

But I removed that outer parent node and just had an array of child nodes in the array like so:

[
	{"Date":"7.14pm Sat 10 Jul",
	"Where":"Some location",
	"Url":"http://link.com"},
	{"Date":"7.14pm Sat 10 Jul",
	"Where":"Some location",
	"Url":"http://link.com"},
	{"Date":"7.14pm Sat 10 Jul",
	"Where":"Some location",
	"Url":"http://link.com"},
	...
]

This solved the issue and my Repeater works now correctly giving one row per JSON record. I used “Set App Variable” and the Assigned Value was a formula with the following:

image

Many thanks for your help. Now I intend to use some JS to highlight certain rows (change icon image for row) based on some criteria.

J

1 Like

Sorry I couldnt get back to you earlier. That is great you got it working on your own!

You can actually use formulas to change icons or colors, you don’t need to get into JS to do that.

True, I’d prefer that way. Just struggling to get that to work too.

image

image

I’m testing by trying to do a SORT, but realistically, if one field in the data array contains certain text, I want to change the value of another field (or, better yet, make the first icon in the row a different icoin/colour)

image

Any thoughts?

Cheers,
J

In the case of changing the icon if for example ‘Where’ = “here” then…

For example - In the Icon Name field put a formula like this:
IF(repeated.current.Where == “here”, “here_icon”, “there_icon”)

do similar for the icon Color property:
IF(repeated.current.Where == “here”, “green”, “black”)

Thanks, that looks great. However in the Binding Type for the “set app variable” component, as a formula, you can only really type in one line (we’re not using the JS component).

image

So I assume I’d need to do this as a one-liner in the input field here in the screenshot?

Formulas are constructed as a single line, yes. But you can have formulas inside of formulas to get more complex.

You are awesome. Thank you.