CODEWITHSUNDEEP
jsonreact-nativefetch-api
alobe
alobe

Reputation: 101

LOG {"_U": 0, "_V": 0, "_W": null, "_X": null} inside fetch API

I am getting this error when I console data returned from function that fetch data from back end

{"_U": 0, "_V": 0, "_W": null, "_X": null}

here is below the code:

const events_data = [];
function getvals() {

    return fetch('http://PCIP:3000/users/timetable')
        .then((response) => response.json())

        .then((output) => {
            return addData(output, events_data);
        })


        .catch(error => console.log(error))
}

function addData(data, data2) {
    data.map((d) => {
        data2.push({
            title: d.name,
            startTime: genTimeBlock(d.day, d.start_time),
            endTime: genTimeBlock(d.day, d.end_time),
            location: d.location,
            extra_descriptions: [d.extra_descriptions],
        });
    });
}


const data = getvals();
console.log(data); // the error come from here

I have checked answers here but nothing worked for me

fetch API always returns {“_U”: 0, “_V”: 0, “_W”: null, “_X”: null}

How do I access promise callback value outside of the function?

Upvotes: 1

Views: 2424

Answers (2)

AKHIL BELLAM
AKHIL BELLAM

Reputation: 21

Function for API call:

  export const getApplication = async (URL, headers) => {
    let data;
    await fetch.get(URL, headers).then(res => data = res.data).catch(err => err);
    return data;
  }

You can call the API from anywhere after importing it:

      getApplication(`your url`, {
        headers: {
          Authorization: AUTH_TOKEN,
        },
      }).then(res => console.log(res)).catch(err => console.log(err));

Upvotes: 0

S.N.B
S.N.B

Reputation: 813

This is because the fetch promise has not return a response yet,

There two way to solve the issue , first you create another async funciton and use it to await for the response

const events_data = [];
async function getvals() {

    return fetch('http://PCIP:3000/users/timetable')
        .then((response) => response.json())

        .then((output) => {
            return addData(output, events_data);
        })


        .catch(error => console.log(error))
}

function addData(data, data2) {
    data.map((d) => {
        data2.push({
            title: d.name,
            startTime: genTimeBlock(d.day, d.start_time),
            endTime: genTimeBlock(d.day, d.end_time),
            location: d.location,
            extra_descriptions: [d.extra_descriptions],
        });
    });
}

async function waitForResponse() {
let resp = await getvals();

return resp;
}

const data = waitForResponse();
console.log(data); // the error come from here

The other way would be using state hooks, passing the return obj to state hook on response.

Upvotes: 1

Related Questions