Guide: How to get JSON data from an Api using dictionaries (and show it on a dynamic cardview)

Recently Kodular has removed the Json component but has added the Dictionaries.

The Dictionaries can be used to obtain data from a Json in a simple way.

Using the dictionaries you don’t need to use any Json extension.

First of all, dictionaries are not a component. That’s why you won’t find it in the Designer.

You will find it in the block section:

In this example we are going to obtain the data from the Api newsapi.org

The idea is to get something like this:

We will use the Web component.

Here’s a screenshot of the components we used for the example.


I use a button to get the data, but it can be done when the screen is initialized. I also put a label, but it is for control, to see if I get the data right.

As with all Jsons, everything depends on the structure of the Json. But understanding how it works with an example, you can apply it to the particular json you get.

In newsapi you send the Api Key in the same url. Something like this:
https://newsapi.org/v2/top-headlines?country=us&apiKey=cf730d06a5ac456eb930b3sadafw3453

imagen

There are other Apis (like in Rapidapi) that tell you to send headers with api key values:

imagen

It is not necessary to send all the headers.

In this example you don’t need to send the value of the “x-rapidapi-host” header, because that already matches the base url.

So we send the other two data.

We get the data from the Json in the response content .

imagen

The Json obtained would be something like this (in this example I use the newsapi API)

To see it well formatted you can use the web https://jsonformatter.org/

As you can see in the picture all the information we need is inside “articles”

In this case we convert the response content to a list ( with the Web component block “JsonTextDecode”) .

Then in the variable “getArticles” we get the data inside “articles” (1) .

And then we get the other data inside “articles”.

We get data for:
2) “titles”
3) “images”
4)“content”

With this we already have the data stored in the variables.

All we have to do is put it on a cardview.

Here all the blocks:

And that’s it.

As I said before, it all depends on how the Json you receive is organized.

If there is no array (in this example the array is in “articles”) it may be that your Json only has objects. Something like this:

{
“source”: {
“id”: null,
“name”: “New York Times”
},
“author”: “Adam Nossiter, Constant Méheut”,
“title”: “George Floyd Protests Inspire Fresh Scrutiny of Policing in Europe, Too - The New York Times”,
“description”: “A history of discrimination has been brought to the surface. But so far, charges of systemic racism have been met mostly with official denial.”,
“url”: "https://www.nytimes.com/2020/06/12/world/europe/george-floyd-protests-europe-police.html",
“urlToImage”: “https://static01.nyt.com/images/2020/06/11/world/11FRANCE-POLICE-RACISM01sub/11FRANCE-POLICE-RACISM01sub-facebookJumbo.jpg”,
“publishedAt”: “2020-06-12T10:33:15Z”,
“content”: “Justice for Adama! shouted the crowd of some 20,000 people who gathered to hear Ms. Traoré speak, filling the sprawling plaza in numbers that surprised the French government, which had sought a ban.\r… [+1425 chars]”
}

then you should skip the block “list by walking key path”

imagen

And just do this:

NOTE:

A tip to know if there is an array or objects:

20 Likes

Good Job… It’s Really Helpful…

Thanks for this nice guide.:+1:

Nice and well explained guide @pepocero! :clap:
Never worked with Dictionaries before. This guide inspires me to try it.

Thank you and keep up the good work! :+1:

1 Like

In my wordpress website there was no need to request header & api key in the url.so should i flow the header request process

If you see the example I use, with Newsapi, you don’t need to request headers either. So you just put the URL and do the get

1 Like

Great guide :+1:

2 Likes

Great work @pepocero :heart:
Dictionary seems quite confusing to me :sweat_smile:

1 Like

@pepocero Good work and Great guide :ok_hand:

@pepocero Great Guide! The length of the guide tells us the time you utilised to help us.
Thank You once again for making such a detailed guide!

Thanks for your guide