Barcode scanner + web API

Hello there,

I’m currently creating an app as part of a project I’m working on. One of the functions of the app is to scan barcodes of food products and return information such as the brand name, item name and item description and give a health alert warning if the product in question may potentially cause a health concern for its user.

I am a complete beginner and have been looking at lots of videos and documentation on thunakble to help me code the app

I am only on the early stages of coding the app so for now, I just want the barcode scanner to be able to scan the barcode and find the corresponding information and display it on the label,.

I have used the barcode scanner component and web API competent to help me do this. I have also found a suitable API database that i’d like to send my barcodes to and get information from on Rapidapi (link below) but i’m not sure how to integrate it to my app so that I can get the information and display it.

Link to Database :Nutritionix - Nutrition Database API Documentation (msilverman) | RapidAPI
Here is what it looks like.

Here is an example of Json response I expect to get

and finally here is the code I have so far

for now, I am getting a null response back and I’m not sure why that is the case. The deadline for the project is fast approaching so any help would be much appreciated. Please and thank you!

1 Like

This is a long post but discusses the same idea. It should be a good start for you.

Hey @digitaldiaryofmscbvq :wave:

One suggestion for you to quickly up your API skills would be to check out academy.thunkable.com where we have several tutorials teaching you how to use apis in your app!

Here’s a starter tutorial

And a bit more advanced

1 Like

Hopefully the tutorials are helpful to you. You mention you’re a complete beginner and that your deadline is fast approaching but that you’re only on the early stages of coding. That information seems in conflict!

You’ve chosen a project that’s fairly difficult so you may need more time than you have to complete it.

It’s helpful that you posted a screenshot of your blocks. If you’re still stuck and need more help, make sure to post the actual text of the JSON response you’re getting. It’s hard to work from a screenshot.

2 Likes

i got a sample json response from rapidapi using endpoint 'get upc scan). i also have a sample response for the end point ‘get food search’ (see below)

i read the post of @digitaldiaryofmscbvq again - he’s doing a upc scan.

{42 items
"old_api_id":NULL
"item_id":"51c3d84097c3e6d8d3b54c95"
"item_name":"Chunky Soup, Classic Chicken Noodle"
"leg_loc_id":NULL
"brand_id":"51db37c1176fe9790a89907e"
"brand_name":"Campbell's"
"item_description":"Classic Chicken Noodle"
"updated_at":"2021-05-02T13:53:44.000Z"
"nf_ingredient_statement":"Water, Chicken Stock, Carrots, White Chicken Meat, Enriched Egg Noodles (Wheat Flour, Egg Whites, Eggs, Niacin, Ferrous Sulfate, Thiamine Mononitrate, Riboflavin, Folic Acid), Celery, Contains Less than 2% of: Chicken Fat, Modified Food Starch, Salt, Monosodium Glutamate, Sugar, Carrageenan, Potato Starch, Canola Oil, Spice, Beta Carotene for Color, Flavoring, Disodium Guanylate, Disodium Inosinate."
"nf_water_grams":NULL
"nf_calories":120
"nf_calories_from_fat":NULL
"nf_total_fat":3
"nf_saturated_fat":1
"nf_trans_fatty_acid":0
"nf_polyunsaturated_fat":NULL
"nf_monounsaturated_fat":NULL
"nf_cholesterol":30
"nf_sodium":790
"nf_total_carbohydrate":14
"nf_dietary_fiber":1
"nf_sugars":1
"nf_protein":9
"nf_vitamin_a_dv":NULL
"nf_vitamin_c_dv":NULL
"nf_calcium_dv":1.54
"nf_iron_dv":3.89
"nf_refuse_pct":NULL
"nf_servings_per_container":2
"nf_serving_size_qty":1
"nf_serving_size_unit":"cup"
"nf_serving_weight_grams":263
"allergen_contains_milk":NULL
"allergen_contains_eggs":NULL
"allergen_contains_fish":NULL
"allergen_contains_shellfish":NULL
"allergen_contains_tree_nuts":NULL
"allergen_contains_peanuts":NULL
"allergen_contains_wheat":NULL
"allergen_contains_soybeans":NULL
"allergen_contains_gluten":NULL
"usda_fields":NULL
}

response for get food search (for ‘vegetable burger’)

{
  "total_hits": 18287,
  "max_score": 11.912622,
  "hits": [
    {
      "_index": "f762ef22-e660-434f-9071-a10ea6691c27",
      "_type": "item",
      "_id": "5659ccfb2b5c188a7dd39fb3",
      "_score": 11.912622,
      "fields": {
        "item_id": "5659ccfb2b5c188a7dd39fb3",
        "item_name": "Veggie Burger - 1 veggie burger on bun",
        "brand_name": "Nutritionix",
        "nf_calories": 364.75,
        "nf_total_fat": 16.69,
        "nf_serving_size_qty": 1,
        "nf_serving_size_unit": "serving"
      }
    },
    {
      "_index": "f762ef22-e660-434f-9071-a10ea6691c27",
      "_type": "item",
      "_id": "59ae4bbab36fddff2587f91d",
      "_score": 2.1756563,
      "fields": {
        "item_id": "59ae4bbab36fddff2587f91d",
        "item_name": "Crispbread, Sesame",
        "brand_name": "Burger",
        "nf_calories": 340.59,
        "nf_total_fat": 5.5,
        "nf_serving_size_qty": 1,
        "nf_serving_size_unit": "serving"
      }
    },
    {
      "_index": "f762ef22-e660-434f-9071-a10ea6691c27",
      "_type": "item",
      "_id": "5be29021da8402c04ae1d8d3",
      "_score": 2.1134489,
      "fields": {
        "item_id": "5be29021da8402c04ae1d8d3",
        "item_name": "Wholemeal Rye",
        "brand_name": "Burger",
        "nf_calories": 343.46,
        "nf_total_fat": 1.6,
        "nf_serving_size_qty": 1,
        "nf_serving_size_unit": "serving"
      }
    },
    {
      "_index": "f762ef22-e660-434f-9071-a10ea6691c27",
      "_type": "item",
      "_id": "c64050870d534bd884c341f6",
      "_score": 1.7825067,
      "fields": {
        "item_id": "c64050870d534bd884c341f6",
        "item_name": "Vegetable Burger",
        "brand_name": "Wetherspoon",
        "nf_calories": 1130,
        "nf_total_fat": 37,
        "nf_serving_size_qty": 1,
        "nf_serving_size_unit": "serving"
      }
    },
    {
      "_index": "f762ef22-e660-434f-9071-a10ea6691c27",
      "_type": "item",
      "_id": "5c6664ebb41c18575fcaf075",
      "_score": 1.7697622,
      "fields": {
        "item_id": "5c6664ebb41c18575fcaf075",
        "item_name": "Vegetable Burger",
        "brand_name": "Tesco",
        "nf_calories": 178.9,
        "nf_total_fat": 5.9,
        "nf_serving_size_qty": 1,
        "nf_serving_size_unit": "serving"
      }
    },
    {
      "_index": "f762ef22-e660-434f-9071-a10ea6691c27",
      "_type": "item",
      "_id": "d3ea845258c0c9c523318dc4",
      "_score": 1.695627,
      "fields": {
        "item_id": "d3ea845258c0c9c523318dc4",
        "item_name": "Vegetable Burger",
        "brand_name": "Montana's BBQ & Bar",
        "nf_calories": 820,
        "nf_total_fat": 50,
        "nf_serving_size_qty": 1,
        "nf_serving_size_unit": "serving"
      }
    },
    {
      "_index": "f762ef22-e660-434f-9071-a10ea6691c27",
      "_type": "item",
      "_id": "5a4dd23589a89c361749c5e6",
      "_score": 1.5914009,
      "fields": {
        "item_id": "5a4dd23589a89c361749c5e6",
        "item_name": "Country Vegetable Burger",
        "brand_name": "Dragonfly",
        "nf_calories": 667.34,
        "nf_total_fat": 54,
        "nf_serving_size_qty": 1,
        "nf_serving_size_unit": "serving"
      }
    },
    {
      "_index": "f762ef22-e660-434f-9071-a10ea6691c27",
      "_type": "item",
      "_id": "c64050876fd666c9a0e63c92",
      "_score": 1.5914009,
      "fields": {
        "item_id": "c64050876fd666c9a0e63c92",
        "item_name": "Nf Vegetable Burger",
        "brand_name": "Wetherspoon",
        "nf_calories": 1130,
        "nf_total_fat": 42,
        "nf_serving_size_qty": 1,
        "nf_serving_size_unit": "serving"
      }
    },
    {
      "_index": "f762ef22-e660-434f-9071-a10ea6691c27",
      "_type": "item",
      "_id": "57399314859124c814cec7fa",
      "_score": 1.5764034,
      "fields": {
        "item_id": "57399314859124c814cec7fa",
        "item_name": "Garden Vegetable Burger",
        "brand_name": "Lightlife",
        "nf_calories": 100,
        "nf_total_fat": 3,
        "nf_serving_size_qty": 1,
        "nf_serving_size_unit": "serving"
      }
    },
    {
      "_index": "f762ef22-e660-434f-9071-a10ea6691c27",
      "_type": "item",
      "_id": "c6405087f6d61eeff013a373",
      "_score": 1.5764034,
      "fields": {
        "item_id": "c6405087f6d61eeff013a373",
        "item_name": "Kids Vegetable Burger",
        "brand_name": "Wetherspoon",
        "nf_calories": 530,
        "nf_total_fat": 13,
        "nf_serving_size_qty": 1,
        "nf_serving_size_unit": "serving"
      }
    }
  ]
}
2 Likes

The API doesn’t return valid JSON. The necessary data is clearly there but I’m not sure how to access it without having a valid JSON response.

It needs to look more like this:

{"item_id":"5e4254d33249841a7f09bfc6",
"item_name":"Organic French Fried Onions",
"brand_id":"51db37b1176fe9790a898469",
"brand_name":"O Organics",
"updated_at":"2021-09-13T15:46:02.000Z",
"nf_ingredient_statement":"ORGANIC ONIONS, ORGANIC PALM OIL, ORGANIC BUCKWHEAT, SALT.",
"nf_calories":40,
"nf_calories_from_fat":27,
"nf_total_fat":3,
"nf_saturated_fat":0.5
}

That can be pasted into Best JSON Viewer and JSON Beautifier Online and viewed using the Tree Viewer button.

1 Like

the initial response i got was from the rapidapi playground - i don;t know why it came that way - split unappropriately at the quote marks!
i coded the call and got this directly after a call from thunkable blocks. it looks better:


{"old_api_id":null,"item_id":"611a6dd237e00600080fc2f6","item_name":"Very Young Small Sweet Peas","leg_loc_id":null,"brand_id":"51db37e4176fe9790a89a52a","brand_name":"Le Sueur","item_description":null,"updated_at":"2021-09-13T17:02:14.000Z","nf_ingredient_statement":"SWEET PEAS, WATER, SUGAR, SALT.","nf_water_grams":null,"nf_calories":100,"nf_calories_from_fat":9,"nf_total_fat":1,"nf_saturated_fat":0,"nf_trans_fatty_acid":0,"nf_polyunsaturated_fat":null,"nf_monounsaturated_fat":null,"nf_cholesterol":0,"nf_sodium":550,"nf_total_carbohydrate":23,"nf_dietary_fiber":7,"nf_sugars":8,"nf_protein":8,"nf_vitamin_a_dv":null,"nf_vitamin_c_dv":null,"nf_calcium_dv":4,"nf_iron_dv":15,"nf_refuse_pct":null,"nf_servings_per_container":1,"nf_serving_size_qty":1,"nf_serving_size_unit":"can","nf_serving_weight_grams":240,"allergen_contains_milk":null,"allergen_contains_eggs":null,"allergen_contains_fish":null,"allergen_contains_shellfish":null,"allergen_contains_tree_nuts":null,"allergen_contains_peanuts":null,"allergen_contains_wheat":null,"allergen_contains_soybeans":null,"allergen_contains_gluten":null,"usda_fields":null}
3 Likes

this is all you need for processing the response:
image

2 Likes

Your JSON response is OK. It seems that you are pasting the output of a JSON Formatter web page.

Just remove the first comment inserted by the JSON Formatter (42 items) and add the comma between each key:value pair to get it back the way it should be. The last change is to convert NULL to lowercase null.

2 Likes

Ah! I couldn’t get it to work after removing “42 items” and adding commas after each value. I knew “NULL” was the problem but didn’t know the solution. Well done!

2 Likes

I totally understand. I was initially supposed to have a mentor helping me in all this however, The mentor themselves aren’t familiar with what I was trying to do so I was kind of left on my own to figure everything out.

I wish I had reached out here sooner! Thank you all so much for all the responses! I’ll apply what you guys have suggested and see if that works out for me. Thanks again!