Why is my Async function returning Uncaught TypeError: (intermediate value) is not iterable

user_2065597 0
Viewed 6629

I ' am trying to retrieve some data from an async function without success, here is the code :

links(originalArray = "/views/layouts/footer-links.json"){
      
        let [template, dataset] = async function () {

            let html = null,     
            // Get the post data
            response = await fetch(originalArray),
             dataset = await response.json(),
            template = dataset.footerLinks.map(header=>{
                   const html =  `
                    <div class="cell medium-3">
                        <h4 title="${header.type}">${header.text}</h4> 
                        <ul class="menu vertical">
                        ${header.anchors.map(link=>`
                            <li> ${link.label} </li>
                        `).join("")}
                        </ul>
                    </div>
                    `; 
                    return html;
                }).join("");    ;  
            return html = {
                        template: template,
                        dataset: dataset
                    };  
        };
        console.log(("In getDataset:::. ",[template, dataset]));
        return [template, dataset];
     
    }

here is the error i am getting

enter image description here

i understand what the message means but i don't know how to get around it.

ecmascript-6 javascript
3 Answers

Like the other answers and comments said,

  • you're not calling the async function but trying to assign it to the array destructuring expression
  • you're not awaiting it and
  • it's returning an object not an array

You should just make the links method itself async. There's no way to avoid making it return a promise.

async links(originalArray = "/views/layouts/footer-links.json") {
    // Get the post data
    const response = await fetch(originalArray);
    const dataset = await response.json(),
    const template = dataset.footerLinks.map(header => {
        const html =  `
        <div class="cell medium-3">
            <h4 title="${header.type}">${header.text}</h4> 
            <ul class="menu vertical">
            ${header.anchors.map(link=>`
                <li> ${link.label} </li>
            `).join("")}
            </ul>
        </div>
        `; 
        return html;
    }).join("");    ;  
    console.log("In getDataset:::. ", [template, dataset]);
    return [template, dataset];
}
user_10485720

The reason Chrome complained is because it tried to destructure your function into variables. Since a function unlike an Array, Object among others is not iterable you received the error.

I found two major issues with your code.

  1. You did not call your IFFE (private scope)
  2. Your IFFE returns an object however you were destructuring [ template, dataset ] as expecting an array.
async links(originalArray = "/views/layouts/footer-links.json"){

    let { template, dataset } = await (async function () { // you have to await your async IFFE since "async" returns promises and "await" awaits and resolves promises

        let html = null,     
        // Get the post data
        response = await fetch(originalArray),
        dataset = (await response).json(), // I fixed this part for you. You have to await response and then call .json() since response is a Promise not an Object without "await"
        template = dataset.footerLinks.map(header => {
               const html =  `
                <div class="cell medium-3">
                    <h4 title="${header.type}">${header.text}</h4> 
                    <ul class="menu vertical">
                    ${header.anchors.map(link=>`
                        <li> ${link.label} </li>
                    `).join("")}
                    </ul>
                </div>
                `; 
                return html;
            }).join("");

        return {
            template, // you don't need "template: template"
            dataset
        };  
    })(); // call the IFFE

    console.log(("In getDataset:::. ",[template, dataset]));
    return [template, dataset];
 
}
user_131883850

It looks like you tried to destructure a function definition into variables template and dataset, without actually calling the function to return your expected result.

What you've done is this:

let [template, dataset] = async function () {}

I think what you intended to do was this:

let [template, dataset] = (async function () {}) ()

Or this:

const foo = async function () {} let [template, dataset] = foo()

Edit: Add a response.ok check if(response.ok) dataset = await response.json()

user_139560320
Related