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:

37 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:

3 Likes

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

2 Likes

@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!

1 Like

Thanks for your guide

1 Like

I didn’t understand why you multiplied by 20 to create the content label (news). Could you please explain?01

Just to ensure every created gets an unique id I think. As duplicate will give you error.

Instead, I preferred to create another Dynamic_Label and set the content to it, so I don’t need to multiply the id

I don’t know what you mean. If you see the blocks what I do is create another label, and I assign another id. I multiply by 20 so I don’t have repeated ids. But you can do any mathematical operation to not have repeated ids.

If you look carefully I create 2 dynamic labels

Why did I follow the above method and I successfully obtained 2 api requests, but when I applied for the third request, an error occurred? I continued to use the previous method to obtain them, but I could not successfully separate them again. Successfully separate them and extract perfect data, or will there still be errors? Sorry, I can’t export block pictures normally, so I have to I introduced the data into the list display component, and after the division of the introduced variables, only allowed me to choose to extract 1. When I chose to get the second paragraph, an error occurred, telling me that the error when I chose to extract the value of the list 2, but the selection was strange. 2/3/4 but continue to get normal data. Does anyone understand why this is happening? Sorry, this is my first attempt to request an api. I am very happy that my request for the first two apis succeeded. Please help me, I still need to complete 5 requests are successful

:grimacing:Sorry, I accidentally converted the block into an arbitrary component block, but it is no problem for now

imagen
How can I find the api of a site, ie the value 2 in the photo above (I would be glad if you could help me

@Aykut the above picture is from rapidapi

I’ll try to clear it … The API address is located on the API website or on some API’s website (mentioned above). The “owner” of the API shows you these addresses (sometimes called an endpoint).