Convert JSON string in html into JSON object

Question

I've retrieved some data in JSON format from MarkitOnDemand API, the JSON content I want is inside the body tag of the html string like this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery Autocompelete</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
</head>
<body>
{"Status":"SUCCESS","Name":"Apple Inc","Symbol":"AAPL","LastPrice":109.59,"Change":1.91,"ChangePercent":1.77377414561664,"Timestamp":"Wed Mar 30 15:59:00 UTC-04:00 2016","MSDate":42459.6659722222,"MarketCap":607630850970,"Volume":3211276,"ChangeYTD":105.26,"ChangePercentYTD":4.11362340870226,"High":110.41,"Low":108.6,"Open":108.64}</body>
</html>

The above code of html string is in the "data" string of my AJAX call below:

$(function(){
    $('#searchform').on('submit', function(event){
        event.preventDefault();

        var requestdata = 'symbol=' + $('#query').val();
        $.ajax({
            url: "receivesearch.php",
            method: "get",
            data: requestdata,
            success: function(data){  //html string in this data parameter

                //CONFUSED HERE

            }
        });
    });
});

But I failed to get the JSON string out of the body tag and parse it into JSON object...

Could anyone please help me with this problem? Thank you so much!!

Here is my php code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery Autocompelete</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
</head>
<body>
<?php
    if(isset($_GET['symbol'])){
        $lookupURL = "http://dev.markitondemand.com/MODApis/Api/v2/Quote/json?symbol=" . $_GET['symbol'];
        $jsonhtml = file_get_contents($lookupURL);
        echo $jsonhtml;
    }
?>
</body>
</html>

why would you send it that way and not as application/json output? Seems like a silly way to send json and also include extra scripts with it also — charlietfl
– charlietfl, Commented Mar 30, 2016 at 23:46
Have you tried adding headers: { Accept : "application/json; charset=utf-8", "Content-Type": "application/json; charset=utf-8" } to your ajax request? — Tim Ogilvy
– Tim Ogilvy, Commented Mar 31, 2016 at 0:05
Http Get methods cannot contain a payload so you cant use the data param in your $.ajax call. — Igor
– Igor, Commented Mar 31, 2016 at 0:23

Tim Ogilvy · Accepted Answer · 2016-03-31 04:22:02Z

3

The Markit On Demand API supports JSON, so there's something wrong with your original query.

Have a look at this URL for an example:
http://dev.markitondemand.com/MODApis/Api/v2/Quote/json?symbol=AAPL

It returns pure JSON data, which can be processed using $.parseJSON(data)

UPDATE: Try this code for example:

var requestData = 'symbol=AAPL';
$.ajax({
    url: "http://dev.markitondemand.com/MODApis/Api/v2/Quote/json",
    method: "get",
    data: requestdata,
    success: function(data){  //html string in this data parameter
        $symbolResponse = $.parseJSON(data);
    }
});

UPDATE 2: Use this PHP Code: (Just this code and nothing else)

<?php

if (isset($_GET['symbol'])) {
    header('Content-Type: application/json');
    $lookupURL = "http://dev.markitondemand.com/MODApis/Api/v2/Quote/json?symbol=" . $_GET['symbol'];
    $jsonhtml = file_get_contents($lookupURL);
    echo $jsonhtml;
}

?>

edited Mar 31, 2016 at 4:22

answered Mar 31, 2016 at 0:09

Tim Ogilvy

1,9731 gold badge25 silver badges37 bronze badges

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

7 Comments

Paul Over a year ago

So I tried to use dataType: "json" in my $.ajax(), but it couldn't retrieve the result of the JSON data. I used following code to call the api: if(isset($_GET['symbol'])){ $lookupURL = "dev.markitondemand.com/MODApis/Api/v2/Quote/json?symbol=" . $_GET['symbol']; $jsonhtml = file_get_contents($lookupURL); echo $jsonhtml; }

Paul Over a year ago

Thank you so much! It does work! But I just wonder why my original code using php as a proxy doesn't work, could you please give me some hint?

Tim Ogilvy Over a year ago

@Paul Have you tried getting your PHP proxy to call the URL as listed here: dev.markitondemand.com/MODApis/Api/v2/Quote/json ? Maybe post your PHP code in the original question.

Paul Over a year ago

Thank you again, Tim! My php code was added above in the original question now. @Tim Ogilvy

Tim Ogilvy Over a year ago

@Paul see my updated answer. Remove the html from your PHP file.

|

Lucero · Accepted Answer · 2016-03-30 23:52:26Z

2

You need to parse the result twice: once as HTML using $.parseHTML(), then you can get the text from that and pass this into $.parseJSON().

Something along these lines:

success: function(data){  //html string in this data parameter
    var html = $.parseHTML(data);
    var body = $(html).text();
    var json = $.parseJSON(body);
    // use the JSON data here
}

answered Mar 30, 2016 at 23:52

Lucero

60.4k9 gold badges127 silver badges154 bronze badges

2 Comments

Paul Over a year ago

Thank you, I've tried something similar with your code, however there is a mistake "SyntaxError: JSON.parse: unexpected character at line 5 column 3 of the JSON data", not sure why this happens.

Lucero Over a year ago

Well, the info with the PHP proxy would have been essential. My code would work fine if the body text was pure JSON data (which it was not because your proxy did not HTML-encode the result, so that any < or & in the JSON would render the HTML invalid).

Croot · Accepted Answer · 2016-03-31 00:42:58Z

-1

You have the option of JSON.parse(data), $.parseJSON(data), or the un-advised eval(data).

answered Mar 31, 2016 at 0:42

Croot

3311 silver badge10 bronze badges

Collectives™ on Stack Overflow

Convert JSON string in html into JSON object

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related