json javascript没有打印正确的输出

Posted 2023-03-05

【中文标题】json javascript没有打印正确的输出

【英文标题】：json javascript not printing the correct output

【发布时间】：2018-08-22 03:52:16

【问题描述】：

我是 javascript 新手，我正在尝试将有效的 json 字符串转换为表格。这是我的代码：

function printTable()
    var txt = $("#txtInput").val();
    var obj;
    try 
        obj = JSON.parse(txt);
     catch (e) 
        alert(e);
    
    var str = "<thead><th>name</th> <th>population</th> <th>capital</th> <th>currency</th> </thead>";
    var tr;
    for (var i = 0; i < obj.length; i++)
        var country = obj[i];
        str+="<tr><td>";
        str+=country.name+"</td>";
        str+="<td>"+country.population+"</td>";
        str+="<td>"+country.capital+"</td>";
        str+="<td>"+country.currency+"</td>";
    
    $("#table").append(str);

问题是，它没有打印正确的输出。它打印“名称人口资本货币”。 JSON 字符串是：

“国家”：[ “名称”：“法国”，“人口”：“66000000”，“资本”：“巴黎”，“货币”：“欧元”， “名称”：“德国”，“人口”：“82620000”，“资本”：“柏林”，“货币”：“欧元”， “名称”：“挪威”，“人口”：“5233000”，“资本”：“奥斯陆”，“货币”：“挪威克朗”， “名称”：“俄罗斯”，“人口”：“144526000”，“资本”：“莫斯科”，“货币”：“擦” ]

如果有任何帮助，我将不胜感激。谢谢。

【问题讨论】：

您的代码从不将</table> 附加到字符串。

@Pointy 你为什么这么说？

@Ele 哦，我猜("#table") 可能是页面上已经为空的表格元素；那好吧。但是，我过去在使用 IE 时遇到问题，将普通的 <tr> 行添加到没有包装器 <tbody> 的表中。

@Pointy 关于tbody的好点

【参考方案1】：

您需要遍历obj.countries 并获取每个国家/地区如下：

var country = obj.countries[i];

另一个考虑因素是在 tbody 标记中添加 TR。

function printTable()
     var txt = ' "countries": [ "name": "France", "population": "66000000", "capital": "Paris", "currency": "eur", "name": "Germany", "population": "82620000", "capital": "Berlin", "currency": "eur", "name": "Norway", "population": "5233000", "capital": "Oslo", "currency": "nok", "name": "Russia", "population": "144526000", "capital": "Moscow", "currency": "rub" ]';
     
    var obj;
    try 
        obj = JSON.parse(txt);
     catch (e) 
        alert(e);
    
    var str = "<thead><th>name</th> <th>population</th> <th>capital</th> <th>currency</th> </thead><tbody>";
    var tr;
    for (var i = 0; i < obj.countries.length; i++)
    
        var country = obj.countries[i];
        str+="<tr><td>";
        str+=country.name+"</td>";
        str+="<td>"+country.population+"</td>";
        str+="<td>"+country.capital+"</td>";
        str+="<td>"+country.currency+"</td>";
    
    $("#table").append(str + "</tbody>");



printTable();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table"></table>

【参考方案2】：

我建议使用更像下面的东西，这样就不会有太多的字符串连接：

<table id="countryTable"></table>

Javascript

json = ' "countries": [ "name": "France", "population": "66000000", "capital": "Paris", "currency": "eur", "name": "Germany", "population": "82620000", "capital": "Berlin", "currency": "eur", "name": "Norway", "population": "5233000", "capital": "Oslo", "currency": "nok", "name": "Russia", "population": "144526000", "capital": "Moscow", "currency": "rub" ] ';

obj = JSON.parse(json);

obj.countries.forEach(displayCountry);

function displayCountry(country,index)
  var table = document.getElementById("countryTable");
    var row = table.insertRow(0);
  var name = row.insertCell(0);
  var population = row.insertCell(1);
  var capital = row.insertCell(2);
  var currency = row.insertCell(3);

  name.innerhtml = country.name;
  population.innerHTML = country.population;
  capital.innerHTML = country.capital;
  currency.innerHTML = country.currency;

JS Fiddle