How to isolate different parts of a JSON object?

Question

I'm using an API (https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?) that gets me this object (a random quote with author):

?({"quoteText":"Life is so constructed that an event does not, cannot, will not, match the expectation. ","quoteAuthor":"Charlotte Bronte","senderName":"","senderLink":"","quoteLink":"http://forismatic.com/en/16af75b8b4/"})

How would I be able to isolate Life is so constructed that an event does not, cannot, will not, match the expectation. from "quoteText": and place it somewhere in my HTML code.

Same thing with isolating: Charlotte Bronte from "quoteAuthor": and placing it somewhere in my HTML code. Bonus points, sometimes the "quoteAuthor": field is left blank, not sure what to do when that happens.

I know how to place this entire JSON object in my HTML code, I just need some help isolating certain parts of the JSON object, and placing them separately.

Any help would be deeply appreciated!

**JSON.parse()** will help you. https://www.w3schools.com/js/js_json_parse.asp . So basically you will convert this string representation into a valid `object` and then access the values via its property names. — Rajshekar Reddy, Jun 15 '17 at 14:41
what you mean by isolating? If its a json you can just access to the keys of the object `jsonObject.quoteText` will return `Life is so constructed that an event does not, cannot, will not...` — nicowernli, Jun 15 '17 at 14:44
Possible duplicate of [Parse JSON in JavaScript?](https://stackoverflow.com/questions/4935632/parse-json-in-javascript) — Rajshekar Reddy, Jun 15 '17 at 14:44
What is the questionmark in front? It is not a valid JSON object with this questionmark. — treecon, Jun 15 '17 at 14:55

score 0 · Answer 1 · answered Jun 15 '17 at 14:48

You can access certain keys from a JSON object by using the . "operator".

In your case, let's say you saved the JSON in a var called quote, quote.quoteText would equal "Life is so constructed that an event does not, cannot, will not, match the expectation. "

var quote = {"quoteText":"Life is so constructed that an event does not, cannot, will not, match the expectation. ","quoteAuthor":"Charlotte Bronte","senderName":"","senderLink":"","quoteLink":"http://forismatic.com/en/16af75b8b4/"};

document.querySelector("#div").innerHTML = quote.quoteText;
document.querySelector("#from").innerHTML = quote.quoteAuthor;

Quote:
<pre id="div"></pre>

From: <span id="from"></span>

You should look into w3school's JSON tutorial

score 0 · Accepted Answer · answered Jun 15 '17 at 20:01

Since you are retrieving in JSONp format, remember that you need to set the dataType to jsonp so that jQuery can parse it properly. Once you have done that, in the jqXHR.done callback you can simply access the actual JSON response.

What you receive is simply an object, which contains data in the format of key-value pairs. In order to access the value, say Life is so constructed that..., you will have to retrieve it by its key, which is quoteText. Using dot notation and assuming that the object is stored in a variable, say response, then the quote can be accessed using response.quoteText. See proof-of-concept example below:

$(function() {
  var request = $.ajax({
    url: 'https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?',
    dataType: 'jsonp'});
    
  request.done(function(response) {
    // 'response' is the entire JSON returned
    console.log(response.quoteText);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to isolate different parts of a JSON object?

2 Answers2