Javascript: Accessing the values from JSON Object Array

Question

I receive a JSON string returned from a remote Webservice. Something like this:

[{
    "id": "001",
    "link": "<a href=\"https://www.google.com\">Google</a>"
}, {
    "id": "002",
    "link": "<a href=\"https://www.yahoo.com\">Yahoo!</a>"
}]

But then when i try to parse it in my Javascript, i have problem parsing it. I tried:

var response_string = '[{"id":"001","link":"<a href=\"https://www.google.com\">Google</a>"},{"id":"002","link":"<a href=\"https://www.yahoo.com\">Yahoo!</a>"}]';
console.log("Output (1) --> ", response_string);

response_string = JSON.stringify(response_string);
console.log("Output (2) --> ", response_string);

var response_object = JSON.parse(response_string);
console.log("Output (3) --> ", response_object);

console.log("Value: " + response_object[0].id);
console.log("Value: " + response_object[0]['id']);

Then the outputs are like:

Output (1) -->  [{"id":"001","link":"<a href="https://www.google.com">Google</a>"},{"id":"002","link":"<a href="https://www.yahoo.com">Yahoo!</a>"}]

Output (2) -->  "[{\"id\":\"001\",\"link\":\"<a href=\"https://www.google.com\">Google</a>\"},{\"id\":\"002\",\"link\":\"<a href=\"https://www.yahoo.com\">Yahoo!</a>\"}]"

Output (3) -->  [{"id":"001","link":"<a href="https://www.google.com">Google</a>"},{"id":"002","link":"<a href="https://www.yahoo.com">Yahoo!</a>"}]

Value: undefined

Value: undefined

How do i access the values inside this object please?

Answer 1

You cannot simply copy-paste the raw response as-is and use it as a string literal, since the string literals have their own syntactic rules.

One of those - is using escape sequences, is where you've made a mistake.

If you want to use it in place you must escape every backslash manually, like

 var response_object = JSON.parse('[{"id": "001","link": "<a href=\\\\"https://www.google.com\\\\">Google</a>"}, {"id": "002","link": "<a href=\\\\"https://www.yahoo.com\\\\">Yahoo!</a>"}]'); // --------------------------------------------------------------^^-----------------------^^----------------------------------------------^^----------------------^^ console.log("Value: " + response_object[0].id);

For the code that retrieves the JSON string from a remote server you don't need to make any alterations and simply JSON.parse() would parse it just fine.

So assuming response_string contains the whole response from a remote server with a mentioned JSON string (without any additional processing), then this:

var response_object = JSON.parse(response_string);
console.log("Output (3) --> ", response_object);

code would work.

Answer 2

The problem is that the webservice sends invalid JSON.

{"JSON": "This is "not" valid JSON" }

The quotation marks in any JSON have to be escaped :

{"JSON": "This is \"valid\" JSON" }

Any Unicode character except " or \\ will be treated by parser as it was.

The " represents termination, while \\ is treated differently depending on which character comes after it. For example \\n , here the letter n comes after \\ it will be treated as newline character. Below picture taken from json.org describes it better:

So, you should report this bug to the webservice providers. It has to be fixed.

Answer 3

Parse json like this

var res = JSON.parse('[{"id": "001","link": "<a href=\\"https://www.google.com\\">Google</a>"}, {"id": "002","link": "<a href=\\"https://www.yahoo.com\\">Yahoo!</a>"}]');
console.log(res);
console.log(res[0].id);