Not able to get the values from this function

Question

The fetch works fine, but the "title" array has no values in it after pushing the values from the fetch data.

    function getdata(){
    const title = [];
    const body = [];
     const url = 'https://jsonplaceholder.typicode.com/posts';
      fetch(url)
     .then(response => response.json())
     .then(data => {
        //  console.log(data)                        /*This works just fine*/
         data.forEach(posts => {
            title.push(posts.title)
            body.push(posts.body)
            })
     })
    //  const onlytentitle = title.slice(0,9);     
    //  return onlytentitle;
        return title;     
}
const titled = getdata();
console.log(titled);

You're returning title before it's been processed by the promise chain. — RamblinRose, Mar 07 '20 at 15:57

Sohail Ashraf · Accepted Answer · 2020-03-07T16:02:57.227

2

fetch is an async function and you are returning title from outside the fetch, so your function will return the title before the fetch request complete.

Try this.

function getdata() {
  const title = [];
  const body = [];
  const url = "https://jsonplaceholder.typicode.com/posts";
  return fetch(url)
    .then(response => response.json())
    .then(data => {
      data.forEach(posts => {
        title.push(posts.title);
        body.push(posts.body);
      });
      return title;
    });

}
(async function() {
  const titled = await getdata();
  console.log(titled);
})();

With async/await

async function getdata() {
  const title = [];
  const body = [];
  const url = "https://jsonplaceholder.typicode.com/posts";
  let response = await fetch(url);
  let data = await response.json();
  data.forEach(posts => {
    title.push(posts.title);
    body.push(posts.body);
  });
  return title;
}
(async function() {
  const titled = await getdata();
  console.log(titled);
})();

edited Mar 07 '20 at 16:02

answered Mar 07 '20 at 15:57

Sohail Ashraf

10,078
2
26
42

Why not refactor the code to use async/await pattern in toto. – RamblinRose Mar 07 '20 at 16:00
Thanks for your input, I have added async/await. – Sohail Ashraf Mar 07 '20 at 16:03
@Sohail - so i need a global variable which holds the values of the "titled" which is inside the function of the anonymous async call. so can u please tell me how to do that. – Hrithik Anchaliya Mar 07 '20 at 17:04
just declare the `titled ` variable ouside the function with `let`. e.g. `let titled; (async function() { titled = await getdata(); console.log(titled); })();` – Sohail Ashraf Mar 07 '20 at 17:06
but when i console log it outside of the function it says "undefined" , but i want that to hold all the values. – Hrithik Anchaliya Mar 07 '20 at 17:12
yes, because the titled hold value returned from an async function. – Sohail Ashraf Mar 07 '20 at 17:13

Not able to get the values from this function

1 Answers1