How do I access json data from ajax-returned HTML?

Question

I'm trying to retrieve json item data from an Ajax call which returns both html and json. My javascript below returns a success message, which is helpful; I'm just not sure how to access the data. I'm trying to access newPrice from this response:

Data Loaded: <pre>Array
(
[point] => 86
[claimId] => 3594
[type] => yeh
)
</pre>{"data":{"newPrice":88,"lockedInPrice":86},"errors":[],"success":true,"code":200}

My code is below. I'm specifically trying to return only the newPrice value:

var newData = $.ajax({ 
    type: "POST",
    url: takeurl,
    dataType: "html",
    data: { point: point, claimId: id, type: val }
    })
    .success(function(data) { 
        alert("Data Loaded: " + data);
        //newPrice = data.newPrice; -- returned undefined?
        console.log(newPrice);
        })

    .error(function() { alert("not yet"); })
    .complete(function(data) { 
        console.log('complete 1' );
    });

// Set another completion function for the request above
newData.complete(function(data){ 
    console.log("second complete" );
    });


return false;
 });

Thank you!

Μenelaοs · Accepted Answer · 2013-04-12 20:51:01Z

4

It seems you have both HTML and JSON in the response. Usually the response is only JSON and responds with content type application/JSON. This is a bit unorthodox though doable to use the response.

You can use substring and indexof to cut out the HTML part "" and then create a javascript object with the JSON.

var data = "<pre>Array\n(\n[point] => 86\n[claimId] => 3594\n[type] => yeh\n)\n</pre>{\"data\":{\"newPrice\":88,\"lockedInPrice\":86},\"errors\":[],\"success\":true,\"code\":200}";

alert("Data Loaded: " + data);
var n = data.indexOf("</pre>{");
data = data.substring(n+6);
var result = JSON.parse(data);
alert("JSON.newPrice:"+result.data.newPrice);

The JSON.parse() method is used to convert the JSON string to a JSON object.

edited Apr 12, 2013 at 20:51

answered Apr 12, 2013 at 20:38

Μenelaοs

24.5k20 gold badges98 silver badges166 bronze badges

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

3 Comments

ezze Over a year ago

As an alternative you can also use a regular expression to remove HTML something like this: data = data.replace(/^.*<\/pre>/, ''). This will work though only if HTML part always ends with </pre> tag.

Μenelaοs Over a year ago

True, I do need to start using those more. Computers are so fast that the additional overhead is non-existent, and they help out for more complex problems.

dilettante Over a year ago

Thanks both. Both the indexof method and the regex idea worked beautifully. I went with regex only because it was a little less code in the end, and my unnecessary code is easy to express...

ezze · Accepted Answer · 2013-04-12 20:39:02Z

0

If you want to access a response as JSON it must be returned with application/json content type and look like a valid JavaScript plain object. Also set a dataType of jQuery.ajax call to json.

answered Apr 12, 2013 at 20:39

ezze

4,1502 gold badges42 silver badges65 bronze badges

Comments

SRI · Accepted Answer · 2015-12-13 06:52:51Z

0

To avoid getting HTML with "pre" tags in Json Response from Controller use below code snippet.

var result= objectData;
return Json(result, "text/html");

answered Dec 13, 2015 at 6:52

SRI

3003 silver badges5 bronze badges

Collectives™ on Stack Overflow

How do I access json data from ajax-returned HTML?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related