Extract JSON response from jquery ajax to html div

Question

I could not retrieve data to jquery div element but i can see ajax response in firebug.

$(document).ready(function () {
    $.ajax({
        url: "https://m.lowes.com/CatalogServices/product/nvalue/v1_0?nValue=4294857975&maxResults=6&showURL=1&rollUpVariants=1&showUrl=true&storeNumber=0595&priceFlag=rangeBalance&showMarketingBullets=1&callback",
        dataType: "jsonp",
        success: function (data) {
            var returnedData = JSON.parse(data);
            $('#result').html(returnedData);
        }
    });
})

this is my response.for example my url contains data productCount:64 ,I should extract productCount from ajax success and display it in html div id result

your dataType change to 'json', Can you post also what you getting in your response? — Genina Anne Gabuten
– Genina Anne Gabuten, Commented Apr 5, 2017 at 11:11
No, jsonp is correct as it looks like they are using it for cross-domain — FD3
– FD3, Commented Apr 5, 2017 at 11:13
what is your result element ? try .html(data) directly if its an textbox use value instead of html like this jsfiddle.net/v02x36fp/1 — Vinod Louis
– Vinod Louis, Commented Apr 5, 2017 at 11:14

Shakti Phartiyal · Accepted Answer · 2017-04-05 11:10:40Z

6

When you parse out the JSOn data you use it like so:

var parsed_data = JSON.parse(JSON_DATA);
$('#result').html(parsed_data.key);

So if your parsed_data is somewhat like:

{name:"test",age:12}

then you use it like:

$('#result').html(parsed_data.name); //it will give you test

if you really want to print out the whole data use JSON.stringify(obj) like so:

$('#result').html(JSON.stringify(parsed_data));

answered Apr 5, 2017 at 11:10

Shakti Phartiyal

6,3043 gold badges29 silver badges46 bronze badges

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

Comments

S. Byron · Accepted Answer · 2017-04-05 11:16:42Z

1

In your code you are returning a json and you are trying to insert ino the div it, into the div you can only insert html code instead json.

Try to inspect the json you are returning and in case you need to insert each element into the div, do it, but don't do for all.

The html() method doesn't know what you want to assign, it only insert an html.

answered Apr 5, 2017 at 11:16

S. Byron

314 bronze badges

Comments

alpham8 · Accepted Answer · 2017-04-05 11:17:13Z

1

You need to iterate over your json data in returnData. You are not able to put json directy into html. You need to convert / parse / iterate it before. So, for example:

$.each(returnedData, function (index, value) {
    // do stuff with it, e. g.:
    //  $('#result').html($('#result').html() + value);
});

answered Apr 5, 2017 at 11:17

alpham8

1,3722 gold badges15 silver badges32 bronze badges

Comments

Deckerz · Accepted Answer · 2017-04-05 11:23:43Z

0

https://jsfiddle.net/m8udusps/

The code here actually works. However it says there is a problem when it is parsing the JSON. You needed to add crossDomain: true, to allow it to actually get the results.

answered Apr 5, 2017 at 11:23

Deckerz

2,60417 silver badges33 bronze badges

Comments

Rodrigo · Accepted Answer · 2020-03-25 21:15:40Z

Having received a supposed JSON struct like:

{
  "Field1": "value1",
  "Field2": "value2"
}

This code gets the values of the keys (just first key in this example). Result is an alert message with Data: value1:

                $.ajax({
                    'url' : './localurl',
                    'type' : 'GET',
                    'success' : function(data) {
                        alert("Data: "+data.Field1);
                    },
                    'error' : function(request,error) {
                        alert("Error in response: "+JSON.stringify(data));
                    }
                });

In this case Field1 is the key received and it is directly accesible through data variable, so it is not necessary to do the JSON.parse(data) (in fact this JSON.parse produce an error)

Collectives™ on Stack Overflow

Extract JSON response from jquery ajax to html div

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related