Read json in fetch with javascript

Question

Below is code for fetch in javascript:

 fetch(url + "?" + o)
   .then(response => {
      if (response.ok) {
        resolve(response.text());
      } else {
      reject(response.json());  ///issue in read json data  how to read json?
                       
    }
 })
 .then(html => {
     debugger
     document.getElementById('partialresult').innerHTML = html;
 })
 .catch(err => {
   debugger
   console.log("Can’t access " + url + " response. Blocked by browser?" + err)
                    ´ 
   document.getElementById('partialresult').innerHTML = err;
 });

I need to read json if (!response.ok) i need to read the json data in catch or any where just div need to updated..

Return Json format:

{ success = false, message = "Operation failed." }

How to read json in fetch?

EDIT : server return succees in html and failure( error) in json ..html working fine and i need parse json data if failure case show in div

sory i am using c# ,,, it has 2 property success and message — Lajith
– Lajith, Commented Aug 31, 2020 at 10:19
resolve(response.text()); ... what is resolve - it's not defined anywhere ... perhaps you meant return response.text();? as that is how Promises chain — Jaromanda X
– Jaromanda X, Commented Aug 31, 2020 at 10:21

T.J. Crowder · Accepted Answer · 2020-08-31 10:43:38Z

1

In the code you've shown, you're trying to use resolve and reject identifiers that haven't been declared anywhere (that you've shown).

To settle the promise returned by then from within its callback, use return to return a value (or a promise to resolve to) or throw (or a rejected promise).

In a comment you've said:

Actually server return succees in html and failure( error) in json ..i need parse json data if failure case show in div

To handle that, I think I'd convert the server's error object into an Error and throw it; see comments:

fetch(url + "?" + o)
    .then(response => {
        if (response.ok) {
            // Read the HTML that comes with success
            return response.text();
        } else {
            // Read the JSON that comes with the error,
            // then use it as an error
            return response.json()
            .then(serverError => {
                throw new Error(serverError.message);
            });
        }
    })
    .then(html => {
        // Here, you have the HTML result
        document.getElementById('partialresult').innerHTML = html;
    })
    .catch(err => {
        // Here you have either a network error or an error
        // we caught above and used to create an Error instance
        document.getElementById('partialresult').innerHTML = err.message || String(err);
    });

edited Aug 31, 2020 at 10:43

answered Aug 31, 2020 at 10:21

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lajith Over a year ago

thank you very much ..Actually server return succees in html and failure( error) in json ..i need parse json data if failure case show in div

T.J. Crowder Over a year ago

@Ajt - Ah! I understand now. I've updated the answer.

T.J. Crowder Over a year ago

@Ajt - Re your suggested edit: The err object will be the Error thrown from the first then callback, which will have a message property on it, so the code is correct as-is.

Collectives™ on Stack Overflow

Read json in fetch with javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related