Question

我有一个Tree Species推荐器，它使用Google地图选择一个点，然后返回它周围的Tree Species列表。这个函数的原始版本只是从csv文件中打印出来的值，但是我调整了它来搜索实际的数据库，平均得出条件得分等等。我对Javascript很糟糕，不知道如何打印出我的搜索结果。

我发送到该页面的字典如下所示：

{“species_list”：[{“num_trees”：102，“species__trees_of_species__condition__score”：5，“species__id_species”：88，“avg_condition”：5.0，“species__name_scientific”：“Arbutus x marina”}，{“num_trees”： 828，“species__trees_of_species__condition__score”：4，“species__id_species”：88，“avg_condition”：4.0，“species__name_scientific”：“Arbutus x marina”}}}

我目前的功能如下：

function if_gmap_updateInfoWindow()
    {
    var lng = gmapmarker.getPosition().lng().toFixed(6)
    var lat = gmapmarker.getPosition().lat().toFixed(6)
    infoWindow.setContent("Longitude: " + lng + "<br>" + "Latitude: " + lat);
    document.getElementById("location-info").innerHTML = 'Lat / Long: ' + lat + ' x ' + lng;

    // Call the model api
    // TODO consts
    $.ajax({    
        url: '/species-guide/json/' + lat + '/' + lng,
        dataType: 'json',
        type: 'get',
        success:function(response){
            document.getElementById("species-recommendations").innerHTML = response['species_list'].join('<br>')
            console.log(response)
        }
    })
}

有“response ['species_list']。join（'＆lt; br＆gt;'）”在我的种类 - 推荐标签中打印[对象对象]列表，但我怎么告诉它打印种类名称和值？

Answer 1

如果你想在DOM中显示一个直接的JSON字符串，你可以这样做：

document.getElementById("species-recommendations").innerHTML = JSON.stringify(response.species_list, null, 2);

重要的部分是：JSON.stringify(response.species_list, null, 2)

这将使字符串化和＆＃34;美化＆＃34; JSON响应，为您添加换行符，缩进为2个空格。

如果你只是想打印键和值，你必须递归遍历每个对象：

resonse.species_list.forEach(species => {
  Object.keys(species).forEach(key => {
    // place `key` and `species[key]` in some element
  })
})

使用＆＃34;香草＆＃34;的问题JS做到这一点，显然是一个痛苦的屁股。这就是为什么库和框架（如Angular）被发明的原因：）

Answer 2

试试这个

var html = '<pre>' + JSON.stringify(response['species_list'], null, '\t') + '</pre>';

要获得格式化输出，您需要包含pre标记。

＆＃13;

var response = {"species_list": [{"num_trees": 102, "species__trees_of_species__condition__score": 5, "species__id_species": 88, "avg_condition": 5.0, "species__name_scientific": "Arbutus x marina"}]};
document.getElementById("species-recommendations").innerHTML = '<pre>' + JSON.stringify(response['species_list'], null, '\t') + '</pre>';

＆＃13;

<div id="species-recommendations"></div>

＆＃13;

在Javascript中打印JSON dict

2 个答案: