are credentials required for an API?

David Richardson

I have a simple API CRUD endpoint that works in a browser.  However in my script it does not appear to work and fails when testing for 200 success code.  The API as copied from Chrome Dev Tool (with quotes included):
xanoUrl = "https://x8ki-letl-twmt.n7.xano.io/api:arLEd2EP/artistMember/61ffb97c85b43c04fec34eba"

The page is: https://preview.webflow.com/preview/davids-cool-project-9b22c7?utm_medium=preview_link&utm_source=designer&utm_content=davids-cool-project-9b22c7&preview=454984bc0992fefc4eb788f0bcda7382&pageId=62041bba317cee75c1c6a9b4&workflow=preview

The following code is straight out of xano-webflow-api-simple.js
function getArtist()  {
  let request = new XMLHttpRequest(); 
  request.open('GET', xanoUrl, true)
  if (request.status >= 200 && request.status < 400) {
  const myArray = JSON.parse(this.response);... then code using the data that never executes.  Don't know why.  Seems 'request.status' fails: !=>200[credentials false.jpg]So not sure why the API fails to load the JSON payload from the script.

Ray Deck

The problem is asynchronicity in this script. Your code from line 69 forward needs to wait for the request.open() call to complete. If you change the third argument in request.open from true to false, it will freeze your process until the request comes back. (Source: Mozilla docs) That's not best practice in JavaScript, but it might be ok in a non-user-facing script, and it should get you past your immediate issue. Can discuss other alternatives depending on the context for this script.

David Richardson

Hi Ray
Appreciate the help.  I did change that value to false but no joy.  I did check the value of the request.status and it is undefined at the line 69 breakpoint  and 0 (zero) at the next line - line 70.  Zero value fails the if conditional statement.
[request false.jpg]I am aware of asynchronicity and coding a 'promise' and setting up function to be async to retrieve results. 

So while I am familiar with the "promise" code concept, its structure and execution is beyond my coding skills at the moment.  "await" and timeout functions may be necessary to permit proper execution.

Putting function in the async stack in the appropriate sequence might be a solution - but may need some professional help with this page to get the results I desire until my coding chops catch up with my ambitions.

Sidebar:  Webflow notes to users when they should use "defer" when loading source files in the header to let the DOM to complete loading.  

https://javascript.info/script-async-defer 

Ray Deck

Ah, I thought this was a command line script! running open with false is not going to work in a browser context. My apologies. I think you want something like:

async function getArtist() { //Note I added the async keyword at the start to enable the "await" in following lines
  const result = await fetch(xanoUrl); //Note I replaced the xmlhttprequest with the fetch function available in modern browsers
  const myArray = await result.json();
  let artistBio = myArray._artist...

and so on, leaving your code in place after that line.

Yes, best practices for web flow can want to defer some of these initializations, which is more in the weeks.

If the suggestion doesn't quite get you where you want to be, professional help is what I do - feel free to reach out if you want a 1-1 session. 

David Richardson

I was able to get this code to work using async / promise / await.[artist resolved.jpg]Accessing the payload values required noodling around with the dot notation to get what I needed.  Okay for a single result.  Probably different for an array of items.
Hope this helps someone.