Cannot parse JSON object containing escape characters

Question

I'm new to javascript and just learning AJAX calls and parsing JSON objects so I know I'm just missing something obvious. I can retrieve the JSON string from my API but I cannot parse it correctly. I'm not sure if I'm sending a JSON object that cannot be parsed or just trying to read the fields in the wrong way. Thanks for taking the time to read this and your help is greatly appreciated I'm just at a loss for where to go next.

I can get the JSON string by this.responseText but when I try to access the field Title I only get undefiend. I'm trying to access it this way: this.responseText.title I've also tried: this.responseText[title] and this.responseText["title"]

"{\"Id\":220,\"Title\":\"Drawtober 19\",\"YearCreated\":0,\"DatePublished\":\"2018-12-14T03:27:05.51\"}"

is what I get from the AJAX call and my attempt to get the title:

var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                let x = this.responseText;
                let firstTest = JSON.parse(x[0]);
                let secondTest = JSON.parse(x.Title);
            }
        };
        xhttp.open("GET", "http://www.faithfulimagination.com/api/artwork/220", true);
        xhttp.send();
        }

I'm expecting to see "Drawtober 19" and all I get is 'undefined'

EDIT

The issue was originally in my API as Barmar pointed out. I was calling JsonConvert.SerializeObject and returning a string rather than returning just the object. Calling JSON.parse(x) twice worked perfectly as did fixing my API and only having to call it once.
Thank you all for answering so quickly! It seems everyone picked up on my problem right away.

Just let obj = JSON.parse(x); and then you can do obj.Title. — trincot
– trincot, Commented May 11, 2019 at 9:11

Barmar · Accepted Answer · 2019-05-11 09:13:04Z

8

Your response is encoded twice, so you need to decode it twice:

let data = JSON.parse(JSON.parse(x));
let title = data.Title;

There's no good reason for double encoding. If faithfulimagination.com is your site, you should fix it.

answered May 11, 2019 at 9:13

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

2 Comments

Charles Cole Over a year ago

Thanks Barmar! That was the exact problem. As you suggested the issue rested originally in my API. Calling JsonConvert.SerializeObject() and returning it as a string was double encoding it.

Waseem Sarwar Over a year ago

it helped me same for php. i was trying to decode "[\"United Arab Emirates\",\"United States\",\"Pakistan\"]" but it fail, then twice decoded it worked $jst = json_decode(json_decode($request->countries), true);

Jack Bashford · Accepted Answer · 2019-05-11 09:12:07Z

0

Just use JSON.parse(x) to parse the full object:

const x = "{\"Id\":220,\"Title\":\"Drawtober 19\",\"YearCreated\":0,\"DatePublished\":\"2018-12-14T03:27:05.51\"}";
const res = JSON.parse(x);
console.log(res);

.as-console-wrapper { max-height: 100% !important; top: auto; }

answered May 11, 2019 at 9:12

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Comments

Steven Spungin · Accepted Answer · 2019-05-11 09:12:54Z

0

You need to parse the response string into an object using JSON.parse(this.responseText). Your property will be on the object returned by that method.

JSON.parse(this.responseText).Title

answered May 11, 2019 at 9:12

Steven Spungin

29.5k7 gold badges97 silver badges85 bronze badges

Comments

Beingnin · Accepted Answer · 2019-05-11 09:24:39Z

0

xhr requests returns only json string. You have to parse it to javascript object before using. However let firstTest = JSON.parse(x[0]); returns only invalid because the object x is not an array

var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                let x = JSON.parse(this.responseText);
                //let firstTest = JSON.parse(x[0]); Invalid because x is not an array
                let secondTest = JSON.parse(x.Title);
            }
        };
        xhttp.open("GET", "http://www.faithfulimagination.com/api/artwork/220", true);

        xhttp.send();
        }

answered May 11, 2019 at 9:24

Beingnin

2,4622 gold badges23 silver badges44 bronze badges

Collectives™ on Stack Overflow

Cannot parse JSON object containing escape characters

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related