将 JSON 响应从 jquery ajax 提取到 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

Answer 1

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));

Answer 2

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.

Answer 3

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);
});

Answer 4

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.

Answer 5

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)