如何使用 jquery 在 html 中显示我的 json 结果？

Question

Using jQuery ajax I am obtaining a json result which I am trying to display in a paragraph element with the id txtResult using jQuery. Here is the .done section of my ajax call

     .done(function(result, textStatus, jqXHR) {

        console.log(result);

        if (result.status.name == "ok") {
            $('#txtResult').html(result['data']);
        }
    })

and here is the json result as displayed in the console:

    data:
       countryCode: "IT"
       countryName: "Italy"
       distance: "0"
       languages: "it-IT,de-IT,fr-IT,sc,ca,co,sl"
    [[Prototype]]: Object
    status:
       code: "200"
       description: "success"
       name: "ok"
       returnedIn: "120 ms"
    [[Prototype]]: Object
    [[Prototype]]: Object

 ​I am obviously doing something wrong as, although the result is displayed in the console, nothing appears on the page. Can anyone set me straight?

Answer 1

You have to use JSON.stringify to conver json object to string

var str = JSON.stringify(result.data).replace(/",\"/gi, "<br />").replace(/"/gi, "").replace(/{/gi, "").replace(/}/gi, "") ;
$('#txtResult').html(str);

output

countryCode:IT
countryName:Italy
distance:0
languages:it-IT,de-IT,fr-IT,sc,ca,co,sl

Answer 2

Thanks to the comments above, I found that

    $('#txtResult').html(result.data.countryCode);

worked.