Unable to parse data with API, please help?

Questions about Thunkable
1

Hi All,

I am trying to consume a news app API. all I am trying to do is setting the URL of API (includes the key) and fetching the image of first news article on an image component. Not sure what is going wrong and Thunkable on running the app doesn’t even shows the error but goes blank instead (super irritating as how we are suppose to debug if something is not right).

URL of API with Key:
http://newsapi.org/v2/top-headlines?sources=google-news-in &apiKey=0d9cacd76c4a49ffa0f295214bcbdea8

Thunkable blocks:

image
image1147×418 22.9 KB

JSON Viewer:

image
image1166×436 26.8 KB

API JSON response:
{
“status”: “ok”,
“totalResults”: 9,
“articles”: [
{
“source”: {
“id”: “google-news-in”,
“name”: “Google News (India)”
},
“author”: “Kumar Shakti Shekhar”,
“title”: “Gujarat local body election results: BJP reigns supreme, Congress slides as AAP rises”,
“description”: “India News: The counting for the Gujarat local body elections on Tuesday has thrown up almost the same results as those of the municipal corporation polls declare”,
“url”: “Gujarat local body election results: BJP reigns supreme, Congress slides as AAP rises | India News - Times of India”,
“urlToImage”: “https://static.toiimg.com/thumb/msid-81296985,width-1070,height-580,imgsize-233016,resizemode-75,overlay-toi_sw,pt-32,y_pad-40/photo.jpg”,
“publishedAt”: “2021-03-02T16:20:00+00:00”,
“content”: “Results of the Nagar Palika, Taluka Panchayat and District Panchayat polls across Gujarat give a crystal clear mess https://t.co/dJERzTyu5X\r\n— Narendra Modi (@narendramodi) 1614687609000”
},
{
“source”: {
“id”: “google-news-in”,
“name”: “Google News (India)”
},
“author”: “Radhika Ramaseshan”,
“title”: “Will Bengal, Tamil Nadu put a spanner in the BJP’s well-oiled election machinery?”,
“description”: “India News: Unlike the Congress, which was happy as long as it dominated Delhi, the BJP believes in a clean sweep both at the Centre and the states.”,
“url”: “https://timesofindia.indiatimes.com/india/will-bengal-tamil-nadu-put-a-spanner-in-the-bjps-well-oiled-election-machinery/articleshow/81275896.cms”,
“urlToImage”: “https://static.toiimg.com/thumb/msid-81275870,width-1070,height-580,imgsize-1,resizemode-75,overlay-toi_sw,pt-32,y_pad-40/photo.jpg”,
“publishedAt”: “2021-03-01T13:29:00+00:00”,
“content”: “India News: Unlike the Congress, which was happy as long as it dominated Delhi, the BJP believes in a clean sweep both at the Centre and the states.”
}
]
}

Looking forward to positive response!

2 Likes
2

First of all, thank you for providing so many details including the full API url and screenshots of the blocks and the JSON data. That makes helping you so much easier and faster.

I actually think your blocks are correct. :man_shrugging:

I’ll try it myself and see what happens…

1 Like
3

The URL of the API component starts with https://Jasonviewer.stack.hu…

Are you sure about it?

4

Good catch! The blocks are correct… the url is wrong.

Also, you might not want to post a full API key here on the forums. Anyone can use your key and you might even get charged money for that use.

1 Like
5

Um no, actually this is the link for the JSON Viewer.

6

OK @tatiang, will take care of this from now on.
Even I thought at a certain point of time, that the API had some error.
P.S. You and @muneer are my favorite members of the Thubkable community. :blush:

1 Like
7

Sure, but your “set ApiNews’s URL to” block needs to use the url http://newsapi.org/v2/top-headlines?sources=google-news-in&apiKey=0d9cacd76c4a49ffa0f295214bcbdea8

And thank you for the kind words. There are quite a few very helpful and knowledgeable people here.

2 Likes
8

Hey!
Tried this too, yet in the Preview, the screen is disappearing.

9

If you get a white screen, that usually means that you are trying to get a property that doesn’t exist.

Can you post a link to your project? Or if not, then a screenshot of your blocks – assuming they’ve changed?

1 Like
10

Hey, All thank you so much, its all working now.

Steps to fix:

  1. Change URL to proper API url (I mistakenly added Json viewer url. Thanks @tatiang . @muneer for catching that).
  2. Any project with API doesn’t work with LiveTest (I mean on computer). You have to test the same on Thunkable live on mobile device.

I know , it was silly on my part on putting bad URL and expecting the app to work on Computer. Two learning from here.

Thanks everyone for the collaboration!

Thunkable community rocks!! :rocket: :rocket: :rocket:

@thecodingmasterabeer

2 Likes
11

Just a point of clarification: APIs sometimes do work when Live Testing in a browser. But they often do not. I haven’t figured out why some do and some don’t.

1 Like
12

Thanks.