# How to create nutrition app with ocr scanner?

**URL:** <https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955>\
**Category:** Questions about Thunkable X\
**Created:** [February 21, 2021, 5:28pm UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955 "2021-02-21T17:28:00Z")\
**Posts on this page:** 20\
**Page:** 4

<div class="post-metadata">

**Author:** ![celebytes20212iy4](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@celebytes20212iy4](https://community.thunkable.com/u/celebytes20212iy4)\
**Post date:** [March 2, 2021, 8:46pm UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/62 "2021-03-02T20:46:53Z")

</div>

When I connect it to my phone, it says that there is an error with the blocks. But when I try it on my computer the main label says “France, United States”. I want the nutrition score in the label not the countries.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [March 2, 2021, 10:41pm UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/63 "2021-03-02T22:41:29Z")

</div>

APIs can be really tricky. If you want to provide the info I asked about, I can take another crack at it. It’s also really important that you identify which property you want from the actual JSON response. When you say “nutrition score,” there isn’t a property called that. So you need to look through the JSON and find a specific property name.

---

<div class="post-metadata">

**Author:** ![celebytes20212iy4](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@celebytes20212iy4](https://community.thunkable.com/u/celebytes20212iy4)\
**Post date:** [March 2, 2021, 11:08pm UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/64 "2021-03-02T23:08:56Z")

</div>

I found this property for the nutrition score

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/5/85856875a6c567f4110c7807e891114e1bbd4c40.png)

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [March 2, 2021, 11:23pm UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/65 "2021-03-02T23:23:54Z")

</div>

I still don’t know which property you mean.

Can you specify the property name/value pair? For example:

**saturated\_fat\_value : 1.9**

 ![Screen Shot 2021-03-02 at 3.20.32 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/2/82434db34810a332f80461c2b326242d0d608132.jpeg)

If you’re wanting **all** of the values under “nutriscore\_data” (again, you have to be really exact when programming… it’s not enough to say you want the “nutrition score” or “nutrition” property because those don’t exist even though they may have those words _within_ a property name\*), that’s possible to do with lists but… I’d recommend keeping it really simple to start with and picking **one** property name to focus on.

\*A property name is kind of like a password in the sense that if you leave out a character or use uppercase instead of lowercase, it won’t be recognized. It has to match the JSON response exactly.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [March 2, 2021, 11:28pm UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/66 "2021-03-02T23:28:57Z")

</div>

The “nutriscore\_data” property has 32 sub-properties (hence the {32} after it). So while it’s technically possible to get the nutriscore\_data, it’s not very useful because you have to then get each property from within it. In the screenshot above, the sub-property names are things like sugars\_points, saturated\_fat, saturated\_fat\_points, fiber\_value, etc.

Those sub-properties are the ones you should choose from… for now.

---

<div class="post-metadata">

**Author:** ![celebytes20212iy4](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@celebytes20212iy4](https://community.thunkable.com/u/celebytes20212iy4)\
**Post date:** [March 2, 2021, 11:50pm UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/67 "2021-03-02T23:50:34Z")

</div>

I actually have to make this project for school and I need to include all the nutrition score and the nutrition grade in it. So how would I do that?

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/a/da15e4241d639246c3da6f9c207aa11507d81a31.png)

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [March 3, 2021, 12:33am UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/68 "2021-03-03T00:33:06Z")

</div>

I can help you get a single property and then you can look over the documentation, tutorial videos, etc. to learn about the rest. Be aware that a property with square brackets [2] indicates a JSON array which is handled by list blocks in Thunkable.

And I mentioned this before but JSON/API data is **difficult**. Expect to spend several hours to figure this out, at least.

These blocks will give you the “transportation\_score” property which currently has a value of 0 (zero).

Hopefully this will get you started!

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/9/f9ab43bfaacf4eec4cfe0f73ec7e1b73ab518e52.png)

---

<div class="post-metadata">

**Author:** ![celebytes20212iy4](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@celebytes20212iy4](https://community.thunkable.com/u/celebytes20212iy4)\
**Post date:** [March 3, 2021, 12:55am UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/69 "2021-03-03T00:55:56Z")

</div>

Thank you!  
For the nutrition score would I have to “initialize each app variable” for the nutritional information and then add it on the “get property of object” block?

---

<div class="post-metadata">

**Author:** ![celebytes20212iy4](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@celebytes20212iy4](https://community.thunkable.com/u/celebytes20212iy4)\
**Post date:** [March 3, 2021, 1:21am UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/70 "2021-03-03T01:21:47Z")

</div>

Should it be something like this?

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/6/f64786cb55bc02b0e4c7265c07a2d5098c1f4682.png)

---

<div class="post-metadata">

**Author:** ![celebytes20212iy4](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@celebytes20212iy4](https://community.thunkable.com/u/celebytes20212iy4)\
**Post date:** [March 3, 2021, 12:50pm UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/71 "2021-03-03T12:50:27Z")

</div>

I decided to do only calories, saturated fat, sugars, salt, fiber, proteins, nuts, fruit and vegetables for the nutrition score, instead of doing all 32.

---

<div class="post-metadata">

**Author:** ![celebytes20212iy4](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@celebytes20212iy4](https://community.thunkable.com/u/celebytes20212iy4)\
**Post date:** [March 3, 2021, 10:22pm UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/72 "2021-03-03T22:22:17Z")

</div>

I shortened it a bit, and added the list. Is there anything I need to fix?

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/0/a0e76fa47cde41231f93f90b4aa37c5fedf6bffd.png)

---

<div class="post-metadata">

**Author:** ![celebytes20212iy4](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@celebytes20212iy4](https://community.thunkable.com/u/celebytes20212iy4)\
**Post date:** [March 4, 2021, 1:13am UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/73 "2021-03-04T01:13:13Z")

</div>

Can someone help me solve this or let me know what else I need to add? Sorry for sounding rude I just need to get this project finished very soon.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [March 4, 2021, 1:51am UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/74 "2021-03-04T01:51:23Z")

</div>

I just posted a tutorial that shows how to correctly parse JSON. I hope it’s helpful.

> [@API JSON Tutorial (Video)](https://community.thunkable.com/t/api-json-tutorial-video/1140575):
>
> Using APIs in Thunkable and understanding how to parse JSON to get certain data from the API response is both a popular and a difficult aspect of using Thunkable. It’s not so much difficult because of Thunkable but because every API url format is different, every API documentation is different, every JSON response is different, etc. In this video, I spend a lot of time talking you through some best practices. It’s not a quick tutorial because if you rush through setting up an API in Thunkable, …

---

<div class="post-metadata">

**Author:** ![celebytes20212iy4](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@celebytes20212iy4](https://community.thunkable.com/u/celebytes20212iy4)\
**Post date:** [March 4, 2021, 2:38am UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/75 "2021-03-04T02:38:31Z")

</div>

Thank you!

---

<div class="post-metadata">

**Author:** ![celebytes20212iy4](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@celebytes20212iy4](https://community.thunkable.com/u/celebytes20212iy4)\
**Post date:** [March 4, 2021, 9:35pm UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/76 "2021-03-04T21:35:54Z")

</div>

I looked at the tutorial, which was very helpful! I decided to use the property “nutriscore\_grade”. I tried parsing the information like the video but I’m not sure if the blocks that I did are correct. Also I wasn’t sure what number to put in the get block.  
This is the url I used: [https://world.openfoodfacts.org/api/v0/product/04963406](https://world.openfoodfacts.org/api/v0/product/04963406)  
Could you please let me know what I need to fix?

These are my blocks so far.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/5/65359669088c8b380bdee5483acc62e24e5d8bca.png)

Thank you!

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [March 4, 2021, 10:49pm UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/77 "2021-03-04T22:49:44Z")

</div>

I’m glad it was helpful. The “nutriscore\_grade” property is inside of the “product” property that’s inside of the object. So that’s it… just two of the “get property of object” blocks are needed for that value.

There are websites that will help you find the “path” to a JSON property. I don’t tend to use them but if you copy and paste your full JSON response text into [https://jsonpathfinder.com](https://jsonpathfinder.com), you can expand the “product” property and then click on “nutriscore\_grade”. At the top will be the path:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/0/a0d6dcc8c73f8b1480bacb352d00527eb84d8e25.png)

It says “x.product.nutriscore\_grade” and I’m assuming the “x” is the object in this case. So “product” is the first property and “nutriscore\_grade” is the second. There’s nothing more than that so again, only two “get property of object” blocks are needed to get that value instead of the 7 blocks in your screenshot.

---

<div class="post-metadata">

**Author:** ![celebytes20212iy4](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@celebytes20212iy4](https://community.thunkable.com/u/celebytes20212iy4)\
**Post date:** [March 4, 2021, 11:46pm UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/78 "2021-03-04T23:46:11Z")

</div>

Okay! Thank you so much!  
I fixed that but when I try to test it, there is just a blank white screen that shows up.  
These are my blocks:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/3/237bb3812f0717fbe3f1068e0e81ca3a053fdf55.png)

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [March 5, 2021, 12:59am UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/79 "2021-03-05T00:59:26Z")

</div>

Is it possible that your product doesn’t have that property? What barcode number are you testing it with?

This works fine for me (returning the value “e”), using the url that you provided earlier, [https://world.openfoodfacts.org/api/v0/product/04963406:](https://world.openfoodfacts.org/api/v0/product/04963406:)

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/4/84bc73bbb3198a540adc2af7f1f8810e39f4f310.png)

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [March 5, 2021, 1:01am UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/80 "2021-03-05T01:01:46Z")

</div>

You’re also not checking the green “error” block for the barcode scanner. That’s a recipe for disaster!

---

<div class="post-metadata">

**Author:** ![celebytes20212iy4](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@celebytes20212iy4](https://community.thunkable.com/u/celebytes20212iy4)\
**Post date:** [March 5, 2021, 2:47am UTC](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955/81 "2021-03-05T02:47:17Z")

</div>

I’m not sure how to check the green “error” box. Could you explain me how to check it?

[Previous page](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955.md?page=3)

[Next page](https://community.thunkable.com/t/how-to-create-nutrition-app-with-ocr-scanner/1113955.md?page=5)
