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

The AJAX data submission did not go through as expected

How come the HTML page served by the express.js route isn't linked to a CSS stylesheet?

The encoding function in Javascript and manipulation of unicode characters

Building a JavaScript application with Node.js and MySQL to seamlessly interact with both offline and online databases

Guide on sharing a Vue project with other devices within a network

Attempting to incorporate the jquery-mousewheel plugin into the jquery cycle2 library

The destination you are trying to reach through a POST request at this time is unavailable

Investigating High Energy Usage on Vue.js Websites: Identifying the Root Causes

When utilizing jade.compile for compiling a jade template containing mixins or included partials

What is the process for creating a local repository for Node.js npm?

What mechanism does the useState() function utilize in React to fetch the appropriate state object and function for a functional component when employing the state hook?

Is it possible for me to generate HTML using JavaScript?

Changing the fill color of an SVG pattern remains unchanged

Is there a way to transmit the ENTER key press to the page setup dialog within Internet Explorer 7?

The Correct Way to Implement Google ReCaptcha

Exploring the angular js repeater component's context menu options

What is the best way to implement a nested lookup in MongoDB within a field?

Concealing Popover with internal click

Vue error: Uncaught promise rejection - RangeError: The computed value update has exceeded the maximum call stack size

Change the default direction of content scrolling in CSS and JavaScript to scroll upwards instead of