Data not showing in Webflow - ForEach record error I think??

carri

I watched the webflow data display video a few times and couldn't get it to work. I also watched one by Ben Parker that is similar but the forEach is different and made more sense to me. I tried to combine them. I think I did something wrong right here:

// This is called a For Loop. This goes through each object being passed back from the Xano API and does something.
      // Specifically, it says "For every element in Data (response from API), call each individual item WorkCats"
      data.records.forEach(record => {

It is finally actually making the call to the endpoint which is progress for me. But no data is showing. ChatGPT stopped working for me but it helped me get here.

Here is the whole script. If anyone could point me in the right direction I would greatly appreciate it.

<script>


// Create a variable for the API endpoint. In this example, we're accessing Xano's API
let xanoUrl = new URL('https://xcxy-j9wd-xcgb.n7.xano.io/api:v4SNfXUV/');


// Define a function (set of operations) to get WorkCats information.
// This will use the GET request on the URL endpoint
function get() {


	// Create a request variable and assign a new XMLHttpRequest object to it.
	    // XMLHttpRequest is the standard way you access an API in plain Javascript.
	    let request = new XMLHttpRequest();


    // Define a function (set of operations) to get WorkCats information.
    // Creates a variable that will take the URL from above and makes sure it displays as a string. 
    // We then add the word 'WorkCats" so the API endpoint becomes https://x715-fe9c-6426.n7.xano.io/api:Iw1iInWB/WorkCats
    let url = xanoUrl.toString() + 'work_category';


    // Remember the 'request' was defined above as the standard way to access an API in Javascript.
    // GET is the verb we're using to GET data from Xano
    request.open('GET', url, true)


    // When the 'request' or API request loads, do the following...
    request.onload = function() {


        // Store what we get back from the Xano API as a variable called 'data' and converts it to a javascript object
        let data = JSON.parse(this.response)


        // Status 200 = Success. Status 400 = Problem.  This says if it's successful and no problems, then execute 
        if (request.status >= 200 && request.status < 400) {


            // Map a variable called cardContainer to the Webflow element called "Cards-Container"
            const work_category = document.getElementById("listing")


            // This is called a For Loop. This goes through each object being passed back from the Xano API and does something.
            // Specifically, it says "For every element in Data (response from API), call each individual item WorkCats"
            data.records.forEach(work_category => {
				let posting = document.createElement("div");
		        posting.setAttribute("class", "cat-card-item shadow-small");
		        listing.appendChild(posting);
		        let linkblock = document.createElement("a");
		        linkblock.setAttribute("class", "blog2-header_item-link w-inline-block");
		        posting.appendChild(linkblock);
		        let linkwrapper = document.createElement("div");
		        linkwrapper.setAttribute("class", "blog2-header_image-wrapper");
		        let catimg = document.createElement("img");
		        catimg.setAttribute("class", "blog2-header_image");
		        linkwrapper.appendChild(catimg);        
		        let bottomwrapper = document.createElement("div");
		        bottomwrapper.setAttribute("class", "blog2-header_item-content");
		        let textwrapper = document.createElement("div");
		        textwrapper.setAttribute("class", "blog2-header_item-content-top");
		        bottomwrapper.appendChild(textwrapper);        
		        let titlewrapper = document.createElement("div");
		        titlewrapper.setAttribute("class", "blog2-header_title-wrapper");
		        textwrapper.appendChild(titlewrapper);        
		        let title = document.createElement("h3");
		        title.setAttribute("class", "h5");
		        title.textContent = record.fields.work_cat_name;
		        titlewrapper.appendChild(title);        
		        let desc = document.createElement("div");
		        desc.setAttribute("class", "text-size-regular");
		        desc.textContent = record.fields.desc;
		        textwrapper.appendChild(desc);
		                				})
        }
    }


    // Send WorkCats request to API
    request.send();
}

</script>

Chris Coleman

Hey, Carri. Do you still need assistance here? If so, can you share any errors that appear in your browser's development console when loading the page? That will give us a clue as to what's happening.

carri

No. I abandoned Webflow.