Help to resolve a JS error when connecting to an external API.

andyjhoey

Hi Xano community,

I was hoping i could get some expert advice regarding an issue I'm having with a custom weather api in webflow.

I was using Prakash's https://www.youtube.com/watch?v=HMsrFzoZYr0 tutorial on how to link up a API endpoint to Webflow. However when publishing the website the data will not show due to this JS error: Uncaught TypeError: Cannot read properties of undefined (reading 'forEach') at request.onload when hitting F12 in the chrome console.

It seems the issue is with the link between the JS variable and the API data is undefined somehow.

I'm terrible at JS and I'm really stuck on this issue, The good news is in Xano, the API is showing the data, and has been setup using a variable to filter unecessary data. The API key is working with no errors and if the webflow read only link you will see the JS i have put into the before body section of the website home page. I have also attached the JS used as an attachment.

My end goal is to have the data showing on the website when the page loads just like Prakash's does in the tutorial. I'm really stuck on this so any help would be fantastic!

API end point snippet for Xano if this helps:

https://www.xano.com/snippet/iBjRXW51

Screenshots attached

Webflow staging url: https://wswr.webflow.io/

Webflow read only link: https://preview.webflow.com/preview/wswr?utm_medium=preview_link&utm_source=designer&utm_content=wswr&preview=8c85235853e2efb4f99ec332fb9063a2&workflow=preview

dorilama

As you can see from your last screenshot (and the network tab of the dev tools on your live website) the data returned from the request is an array, not an object with a result property.

In your code try data.forEach

It seems also that many times the request returns a status 500 with this data: {"message":"Unable to locate var: weather_api.response.result.results"}, so you may want to check what happens in Xano

andyjhoey

Hi dorilama,

Thank you that did solve the initial undefined issue, and i fixed the 500 error on Xano's end.

However since this change a new issue has come up further down the JS code.

It now states substring is not a function, is that because it cant find the "results" before the substring?

dorilama

The data returned from you api is an array of objects (it looks like you have only one object in your array), so in your loop results is an object, it is not a string and if you try to transform it into a string you don't have the result you are expecting.

It's not clear what you want to do with this data.

Anyway copy pasting code without understanding what you are doing will bring you many errors. Try to grasp some basic concepts. I recommend https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/ as starting point

dorilama

The data returned by your api is an array of objects (you are actually returning only one element in your array).

Therefore in your loop results is an object, not a string. substring is not a method of objects, that's why you get this error.

It's not clear what do you want to do with this data.

Also copy/pasting code without understanding of what you are doing will cause many troubles.

If you want to learn a bit more I recommend https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/ as an excellent starting point.

dorilama

The data returned by your api is an array of objects (you are actually returning only one element in your array).

Therefore in your loop results is an object, not a string. substring is not a method of objects, that's why you get this error.

It's not clear what do you want to do with this data.

Also copy/pasting code without understanding of what you are doing will cause many troubles.

If you want to learn a bit more I recommend https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/ as an excellent starting point.

dorilama

The data returned by your api is an array of objects (you are actually returning only one element in your array).

Therefore in your loop results is an object, not a string. substring is not a method of objects, that's why you get this error.

It's not clear what do you want to do with this data.

Also copy/pasting code without understanding of what you are doing will cause many troubles.

If you want to learn a bit more I recommend https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/ as an excellent starting point.

dorilama

The data returned by your api is an array of objects (you are actually returning only one element in your array).

Therefore in your loop results is an object, not a string. substring is not a method of objects, that's why you get this error.

It's not clear what do you want to do with this data.

Also copy/pasting code without understanding of what you are doing will cause many troubles.

If you want to learn a bit more I recommend https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/ as an excellent starting point.

dorilama

The data returned by your api is an array of objects (you are actually returning only one element in your array).

Therefore in your loop results is an object, not a string. substring is not a method of objects, that's why you get this error.

It's not clear what do you want to do with this data.

Also copy/pasting code without understanding of what you are doing will cause many troubles.

If you want to learn a bit more I recommend https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/ as an excellent starting point.

dorilama

The data returned by your api is an array of objects (you are actually returning only one element in your array).

Therefore in your loop results is an object, not a string. substring is not a method of objects, that's why you get this error.

It's not clear what do you want to do with this data.

Also copy/pasting code without understanding of what you are doing will cause many troubles.

If you want to learn a bit more I recommend https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/ as an excellent starting point.

dorilama

The data returned by your api is an array of objects (you are actually returning only one element in your array).

Therefore in your loop results is an object, not a string. substring is not a method of objects, that's why you get this error.

It's not clear what do you want to do with this data.

Also copy/pasting code without understanding of what you are doing will cause many troubles.

If you want to learn a bit more I recommend https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/ as an excellent starting point.

andyjhoey

Hi dorilama,

okay so it looks like by converting the value to a string first fixes the issue.

 p.textContent = `${results.toString().substring(0, 15)}` // Limit to 15 chars

Now i have no more errors in the brower which is good,

But still no data pulling into the website, I will look into this with Xano to see why its blank,

thanks for the help!

andyjhoey

Hi dorilama,

okay so it looks like by converting the value to a string first fixes the issue.

 p.textContent = `${results.toString().substring(0, 15)}` // Limit to 15 chars

Now i have no more errors in the brower which is good,

But still no data pulling into the website, I will look into this with Xano to see why its blank,

thanks for your help!

andyjhoey

Hi dorilama,

I managed to fix this issue by converting the value to a string 1st.

p.textContent = `${results.toString().substring(0, 15)}`

Now no more errors in the browsers debug. The good news is it seems to be partially working i can see the element is getting cloned, but instead of showing all 69 values from the api on the live site, it just renders 1 thats states [object Object]? Very odd.

Any thoughts on the issue?

andyjhoey

Hi dorilama,

I managed to fix this issue by converting the value to a string 1st.

p.textContent = `${results.toString().substring(0, 15)}`

Now no more errors in the browsers debug. The good news is it seems to be partially working i can see the element is getting cloned, but instead of showing all 69 values from the api on the live site, it just renders 1 thats states [object Object]? Very odd.

Any thoughts on the issue?

dorilama

No more errors because you are converting the object into a string but this is not going to help you.

If you want do display a list of values as text from your api you have two options:

• return an array of texts from your api, something like ["text1","text2",...] (at the moment you are returning an array with a single object)
• transform the object into an array of values, in your case something like Object.values(data[0]).forEach... (it depends on what you want to actually display)

I think you can try the first method and transform the data in Xano before sending them to your frontend