Ensure that my program is halted until the xmlhttprequest has completed

Question

Ensure that my program is halted until the xmlhttprequest has completed

It seems like I've overcomplicated this problem for myself. In my page, I have 2 XMLHTTPRequests - the first request retrieves data from an API and fills my elements with this data. However, one of the fields in my elements requires a second request to a different endpoint using a value received from the first request, but it always ends up being filled with undefined.

I understand that this is happening because of the asynchronous nature of the request, where the site continues loading without waiting for the request to complete. I tried making the second request synchronous, but the issue persists (now causing the site to freeze briefly). I also attempted to use async/await, but my text editor gave me an error saying "await has no effect on the type of this expression," and now I'm at a standstill.

I believe my struggle stems from a lack of experience and understanding of asynchronous JavaScript (this is my first application using it).

Below is the code snippet:

let ourGrid = document.getElementById("res");
let searchValue;

function search() {
    searchValue = document.getElementById("search").value;
    getFoods(`https://api.spoonacular.com/recipes/findByIngredients?ingredients=${searchValue}&number=2&apiKey=${apikey}`);
}

function getFoods(url) {
    let xhr = new XMLHttpRequest();
    xhr.responseType = 'json';
    xhr.onreadystatechange = () => {
        if(xhr.readyState == XMLHttpRequest.DONE) {
            setFoods(xhr.response);
        } else {
            return "error";
        }
    };
    xhr.open('GET', url);
    xhr.send();
}

function setFoods(json) {
    if(json.length == 0) {
        alert(`No results found for ${searchValue}`);
    }else{
        ourGrid.innerHTML = json.map(foodLogic).join("");
    }
}

function foodLogic(foodItem) {
     return `<div class="imageItem"><img src="${foodItem.image}"></div>
     <div class="infoItem"><h2>${foodItem.title}</h2>
     <p class="summary">${requestSummary(foodItem.id)}</p>
     <p class="more"><a href="./moreInfo.html" target="_blank">More</a></p></div>`;
}

function requestSummary(id) {
    let url2 = `https://api.spoonacular.com/recipes/${id}/summary?apiKey=${apikey}`;
    let xhr2 = new XMLHttpRequest();
    xhr2.onreadystatechange = () => {
        if(xhr2.readyState == XMLHttpRequest.DONE){
            return returnSummary(JSON.stringify(xhr2.response));
        }
    };    
    xhr2.open('GET', url2, false);
    xhr2.send();
}

function returnSummary(json) {
    return json.summary;
}

javascript ajax xmlhttprequest

Answer 1

Answer №1

Another option is to utilize promises or callbacks. Execute the second function only after the first one has completed and pass the data to a single function that handles everything.

Retrieve the summary right here and send it to the next function.

function getFoods(url){
    let xhr=new XMLHttpRequest();
    xhr.responseType='json';
    xhr.onreadystatechange=()=>{
        if(xhr.readyState==XMLHttpRequest.DONE){
            let summary = requestSummary(xhr.response.id);
            setFoods(xhr.response, summary); //pass summary
        }else{
            return "error";
        }
    }
    xhr.open('GET',url);
    xhr.send();
}

Now that you have access to the summary in setfoods, you can use it as needed

function setFoods(json,summary){
    if(json.length==0){
        alert(`no results found for ${searchValue}`);
    }else{
    ourGrid.innerHTML=json.map(foodLogic).join("");
    // You now have access to the summary, feel free to use it
    } 
}

Answer 2

Another option is to utilize promises or callbacks. Execute the second function only after the first one has completed and pass the data to a single function that handles everything.

Retrieve the summary right here and send it to the next function.

function getFoods(url){
    let xhr=new XMLHttpRequest();
    xhr.responseType='json';
    xhr.onreadystatechange=()=>{
        if(xhr.readyState==XMLHttpRequest.DONE){
            let summary = requestSummary(xhr.response.id);
            setFoods(xhr.response, summary); //pass summary
        }else{
            return "error";
        }
    }
    xhr.open('GET',url);
    xhr.send();
}

Now that you have access to the summary in setfoods, you can use it as needed

function setFoods(json,summary){
    if(json.length==0){
        alert(`no results found for ${searchValue}`);
    }else{
    ourGrid.innerHTML=json.map(foodLogic).join("");
    // You now have access to the summary, feel free to use it
    } 
}

Answer 3

Answer №2

I successfully tackled the issue by storing all the ids and subsequently requesting them one by one after the website and initial content from the first request had loaded. Instead of using ajax, which wasn't effective for me initially (I consulted a tutorial on it), I utilized fetch requests to achieve this. I then targeted each summary element in the HTML and filled them in sequence.

Here's the code snippet:

let grid = document.getElementById("res");
let searchValue;
let arrId = [];

function search() {
    searchValue = document.getElementById("search").value;
    getFoods(`https://api.spoonacular.com/recipes/findByIngredients?ingredients=${searchValue}&number=2&apiKey=${key}`);
}

function getFoods(url) {
    let xhr = new XMLHttpRequest();
    xhr.responseType = 'json';
    xhr.onreadystatechange = () => {
        if (xhr.readyState == XMLHttpRequest.DONE) {
            setFoods(xhr.response);
        } else {
            return "error";
        }
    }
    xhr.open('GET', url);
    xhr.send();
}

function setFoods(json) {
    if (json.length == 0) {
        alert(`no results found for ${searchValue}`);
    } else {
        grid.innerHTML = json.map(foodLogic).join("");
        fetchIds();
    }
}

function foodLogic(foodItem) {
    arrId.push(foodItem.id);
    return `<div class="imageItem"><img src="${foodItem.image}"></div>
    <div class="infoItem"><h2>${foodItem.title}</h2>
    <p class="summary"></p>
    <p class="more"><a href="./moreInfo.html" target="_blank">More</a></p></div>`;
}

function fetchIds() {
    let items = grid.getElementsByClassName("infoItem");
    for (let i = 0; i < arrId.length; i++) {
        fetch(`https://api.spoonacular.com/recipes/${arrId[i]}/summary?apiKey=${key}`)
        .then(response => response.json())
        .then(data => {
            console.log(data);
            items[i].getElementsByClassName("summary")[0].innerHTML = data.summary;
        });
    }
}

Answer 4

I successfully tackled the issue by storing all the ids and subsequently requesting them one by one after the website and initial content from the first request had loaded. Instead of using ajax, which wasn't effective for me initially (I consulted a tutorial on it), I utilized fetch requests to achieve this. I then targeted each summary element in the HTML and filled them in sequence.

Here's the code snippet:

let grid = document.getElementById("res");
let searchValue;
let arrId = [];

function search() {
    searchValue = document.getElementById("search").value;
    getFoods(`https://api.spoonacular.com/recipes/findByIngredients?ingredients=${searchValue}&number=2&apiKey=${key}`);
}

function getFoods(url) {
    let xhr = new XMLHttpRequest();
    xhr.responseType = 'json';
    xhr.onreadystatechange = () => {
        if (xhr.readyState == XMLHttpRequest.DONE) {
            setFoods(xhr.response);
        } else {
            return "error";
        }
    }
    xhr.open('GET', url);
    xhr.send();
}

function setFoods(json) {
    if (json.length == 0) {
        alert(`no results found for ${searchValue}`);
    } else {
        grid.innerHTML = json.map(foodLogic).join("");
        fetchIds();
    }
}

function foodLogic(foodItem) {
    arrId.push(foodItem.id);
    return `<div class="imageItem"><img src="${foodItem.image}"></div>
    <div class="infoItem"><h2>${foodItem.title}</h2>
    <p class="summary"></p>
    <p class="more"><a href="./moreInfo.html" target="_blank">More</a></p></div>`;
}

function fetchIds() {
    let items = grid.getElementsByClassName("infoItem");
    for (let i = 0; i < arrId.length; i++) {
        fetch(`https://api.spoonacular.com/recipes/${arrId[i]}/summary?apiKey=${key}`)
        .then(response => response.json())
        .then(data => {
            console.log(data);
            items[i].getElementsByClassName("summary")[0].innerHTML = data.summary;
        });
    }
}

Ensure that my program is halted until the xmlhttprequest has completed

Answer №1

Answer №2

Similar questions

Please move the scroll down and then back up after an Ajax request because the scroll position has been reached

Converting an object of objects into an associative array using Javascript and JSON

Validation error occurred while attempting to send form data to the Contact Form 7 API through Next.js

Steps to prevent specific links from being clickable in React Native's webview component

AJAX requests sent from different origins to AWS S3 may encounter CORS errors on occasion

Shift the attention from the text box to the AJAX combobox when the enter key is pressed

Limiting a user's ability to directly interact with JSP pages

Sharing information through a hyperlink to a Bootstrap popup window

Checking for the status of a checked box when the ::after pseudo-element is added after the box is marked

Can you provide me with the sequelize query that is equivalent to this raw query?

Exploring methods to access the state of a component nested within a slot in Vue

Guide for accessing and interpreting a random folder arrangement using JavaScript located alongside index.html

PHP/JSON formatting

How to enable CORS in Flask while avoiding the "Response to preflight request does not have an HTTP ok status" issue

How can one implement an AJAX login feature in the Yii framework?

What is the most efficient way to incorporate MongoDB into your codebase using ES6-style

"Utilizing jQuery to integrate an Ajax-powered Gauge using Google Visualization API

Addressing simple JavaScript "async" AJAX requests that are sequenced and reliant on each other

Encountering a Nuxt error where properties of null are being attempted to be read, specifically the 'addEventListener' property. As a result, both the default

Having trouble getting an Angular directive to bind a click event to an external element?