I am using FETCH API to get a value stored in a json file. That value has to go into a variable.

The problem is - the variable ends up holding [object Object] as value.

var title = fetch('URL/out.json', {mode: 'cors'});

In the htaccess of the server hosting the json file, there is the line

  Header set Access-Control-Allow-Origin "*"

The json is as follows

 {
   lollol
}

I think the json might be the culprit.

I cannot find the reason for [object Object] to be the variable value.

Can I use Fetch to get a hosted text file? I tried - couldn't get it work. - just thinking of an alternative.

I am using FETCH API to get a value stored in a json file. That value has to go into a variable.

The problem is - the variable ends up holding [object Object] as value.

var title = fetch('URL/out.json', {mode: 'cors'});

In the htaccess of the server hosting the json file, there is the line

  Header set Access-Control-Allow-Origin "*"

The json is as follows

 {
   lollol
}

I think the json might be the culprit.

I cannot find the reason for [object Object] to be the variable value.

Can I use Fetch to get a hosted text file? I tried - couldn't get it work. - just thinking of an alternative.

• javascript
• html
• json
• fetch-api

• Actually it should return [object Promise], unless you are using a polyfill. – Bergi Commented Dec 15, 2015 at 5:59

5 Answers 5

Try using .then() as described here:

fetch('URL/out.json', {mode: 'cors'}).then(function(response) {
    return response.blob();
}).then(function(response) {
    // process response
});

you need to stringify the object to convert it into JSON string.

try JSON.stringify(theObject)

fetch API is very promise-oriented fetch returns a promise with a response object as a param you then need to call a method on the response to give you another promise with the result

heres an example i did. On the first .then() i called .json on the response so can i get my results on the next .then()

export function newVideoAsync(videoData, url) {
  return (dispatch) => {
    return fetch(url, {
      method: 'POST',
      headers: {
        'content-type': 'application/json'
      },
      body: JSON.stringify(videoData)
    })
    .then(response => response.json())
    .then(jsonData => {
      dispatch(videoSuccess(jsonData))
      console.log(jsonData);
      // find video id to redirect to that video
      // client side redirect to '/video/:id'
      browserHistory.push('/')
    })
    .catch(err => dispatch(videoError(err.message)));
  };
};

https://davidwalsh.name/fetch

For anyone still experiencing this issue while following correct fetch syntax, please try to do these next steps (before pulling your hair out :)):

1. clean cache from your project
2. remove and reinstall external libs/modules
3. restart your project

This works fine

var myRequest = new Request('URL');
var title;
fetch(myRequest).then(function(response) {
    return response.text().then(function(text) {
        title= text; 
        alert (title);
    });
});