Promise pending, fulfilled not returning

user_13323734 0
Viewed 3974

Trying to display data from a json. When I run my functions on the console, it shows:

Promise {} and [[PromiseState]]: "fulfilled"

But not actually returning anything.

getJobs = async () => {
try{
    response = await fetch("./data.json");
    const data = await response.json();
    return data;
} catch(error){
    console.log('Error getting data', error)
    }   
} 


renderJobs = async () => {
        const jobs = await getJobs();
        const view = `
            <div class='card-company'>
                ${jobs.map(companyName => `
                    <p>${companyName.company}</p>
                `).join('')}
            </div>
        `
        return view
}

I have all the p tags I need inside the property [[PromiseResult]] but nothing displaying in the document.

I have not been able to find anything like this, also if there's anything to improve in this snippet, I appreciate the feedback.

Thank you.

es6-promise async-await asynchronous javascript
4 Answers

Since these are async functions, you need to use await to get their final return value.

To log the HTML string, you can use console.log(await renderJobs());, and wherever you are running renderJobs() in your code, you will need to use await to get the HTML string as well.

Using console.log(renderJobs()); will return the promise pending message you described because async functions return a promise, not the result of the promise. Using await returns the fulfilled value of the promise it is used on.

user_83102770

Looks like an improper template to me. I'm not seeing a use for it in this case, anyways. Should be more like:

const M = tag=>document.createElement(tag);
const renderJobs = async () => {
  const jobs = await getJobs(), frag = document.createDocumentFragment();
  let d;
  for(let o of jobs){
    d =  M('div'); d.className = 'card-company'; d.textContent = o.company;
    frag.appendChild(d);
  }
  // you could append frag here or return and append later
  return frag;
}
user_24384230

try it

getJobs = () =>
      new Promise((resolve) => {
        fetch("./data.json").then((data) => {
          resolve(data);
        });
      });

    renderJobs = async () => {
      const jobs = await getJobs();
      const view = (
        <div class="card-company">
          ${jobs.map((companyName) => <p>${companyName.company}</p>).join("")}
        </div>
      );

      return view;
    };
user_147323250

I see an issue with how you are not handling an error. You need to return reject or throw an error. Otherwise, the promise will never be resolved

getJobs = async () => {
  try {
    const response = await fetch('./data.json')
    const data = await response.json()
    return data
  } catch (error) {
    console.log('Error getting data', error)
    return Promise.reject(error)
  }
}

renderJobs = async () => {
  let jobs = []
  try {
    jobs = await getJobs()
  } catch(error) {
   console.log('Error getting data', error)

  }
  const view = `
            <div class='card-company'>
                ${jobs
                  .map(
                    (companyName) => `
                    <p>${companyName.company}</p>
                `
                  )
                  .join('')}
            </div>
        `
  return view
}
user_38156050
Related