How to view Json responses from an Api (newsapi for example) on a cardview

I’ve been looking for a long time for how to put an api result in Json format on a CardView.
But unfortunately there is no step by step guide to do something like this…

I’ve finally made it and I want to share it with the community.

The result looks like this:


Note: In this example can not see the icon to share because it can’ t be seen in the companion

In this example we are going to use the newsapi.org API.

First of all we create our link on the api website. We make sure that the result obtained is a valid Json file.

If we paste the link into the web browser and hit the enter we will get the result of the api:

What we’re seeing is a mess. But it doesn’t matter. To get an idea of the data it shows us, we can paste the same in the web JSON Formatter & Validator and we’ll see it sorted in a slightly more visual way.

The most important thing to keep in mind is the word the Json starts with. In this case we see that everything is contained inside “articles”.

Then we see that each data has its objects and values. We have author, title, description, urlToImage, url…

Here we must have in clear which are the data that we want to obtain.
In the example, we are going to obtain the values of content, and urlToImage

Now in Kodular we will use these components:

NOTE: Here in this example I have used the Cardview extension by Andres Cotes.

We create our project (or we use an existing one, it doesn’t matter) and we create a variable for articles, another one for each one of the data we want to obtain, in this case urlToImage and content. We initialize them as empty lists.

We also created a text variable (decodeJson) to decode the Json with the web component. This converts the son into lists.

blocks%20apinews2

Here we assign the url of the api to the web component and access it with Web1.Get.

Then we’ll use these blocks:

First we decode the Json. Then what we do is separate “articles” from the rest of the data.

Then into the FOR EACH we fill the lists with the values we want to obtain. In this case “content” and “urlToImage”.

Finally we complete the cardview with the obtained lists and we indicate that it shows it in a vertical scroll arrangement.

If we want to get more values, we just have to create more variables and add items to the lists inside the for each

4 Likes

This is a great little example. Just what I need to learn the basics of working with JSON data.

Though… it looks like something is missing. I’ve searched everywhere. Can’t find that last block section, in the available blocks of Creator. Where do I find this Call CardVew1.Type2? sample_code_1

From the color, (purple), looks like a procedure. Can’t find it in the CardView1 object properties, or under Procedures. OR… anywhere else for that matter. Also, went through the other 4 reply threads on this guide. And did a search. Found the topic, “How to set image on cardview”. And others. No luck there.

So… either I’m missing something OR… maybe the CardView extension has been updated since this guide was originally published in Dec, 2019. And there is an alternative way of doing this?

Any help appreciated.

I really used this extension:

The blocks are these:

But it’s the same thing. What’s important is what comes before that. Fill in the variables with the list of data we want.

You can create a Procedure to create the cardviews.

EDIT:

You can check this, I’m sure it’ll help:

https://docs.kodular.io/guides/component-examples/dynamic-cards/

Thanks for the link to Dynamic Cards @pepocero. That’s another bookmark. But for now, I’d like to get the simple CardList working before I move on the Dynamic CardLists.

I read in another post that the CardView extension only recognizes image attributes if the all the Paddings were set to zero. Did that. Didn’t help. I’ve checked and double checked my code. Still that that CardView1.Type2 block is not available.

I don’t think you have the right version of the extension. On the extension page (which is the AppyBuilder page) you can download the latest version they have published there.

This is the direct link that is posted in that post:

https://community.appybuilder.com/uploads/default/original/2X/5/5c97df8ad28e9b3845aacdb689324dce648dbec8.aix

If you install it over the one you already have, it updates.

That kind of worked. I added the life.inventor.CardView.aix file to my Assets and now, in my Web1 block choices, I find MANY new function selections. But… no Call CardView1.Type2 selection.

Kodular Creator is an online platform. So I would expect that it would dynamically load the latest extension versions. This one here looks newer than the default version. But I suspect there may yet be an even newer one, to complete this JSON Guide. I see no mention of it in the CardView Docs.

Then found this Extensions Directory. Is this something I need to buy?

Thanks again @pepocero! I appreciate you taking the time to help me here.

I think you’re not installing the extension. I don’t know if you know how to install and use extensions.

Once the extension is installed you don’t have to search for it in Web1 blocks

You don’t have to upload the extension in assets.

You have to install the extension.

How to install an extension:






Then you have to drag the installed extension

Then you have to upload these files to assets:
Material Icon Regular
Roboto Medium


Where it says “FontIcon”, put the file “MaterialIconsRegular” (1).
Where it says “FontText” put the file RobotoRegular (2)

Now you should be able to see the blocks correctly:

1 Like

That worked!! You’ve gone above and beyond here, (especially with the step by steps how to install an extension.) MANY thanks!! From myself AND anyone else who might want to try this Guide.

I did find one error in the original code The one line Set Label1.text to get global decodeJson should read Set Label1.text to get response Content.

One last thing… Now that I’m getting the CardView populating correctly, I noticed the original screenshot, (at the very top of this thread), is scrollable. My current code does not scroll. When I get this working I will upload the finished .aia file for anyone else who is interested.

PS: @pepocero … if you send me a private message, I’ll put a little something in your payPal tip jar.

1 Like

For card views I always use the vertical scrolling arrangement.
image
But if it works for you without scrolling, use what works best for you.

There’s no need for that. I have learned a lot thanks to the community and the people who help and make guides and tutorials. It’s my way of returning to the community for everything I’ve learned…

2 Likes

Okay! Here it is! The finished project. One minor addition. After going to the newsapi.org site, you’ll need to enter your own ApiKey here.
enter apikey
Download the full project here:
JSON_example.aia (110.8 KB)

Again… many, many thanks to @pepocero.

2 Likes

3 posts were split to a new topic: Duplicate JSON thread