Question

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

问题是，它没有打印正确的输出。它打印＆＃34;命名人口资本货币＆＃34;。 JSON字符串是：

{ ＆＃34;国家＆＃34;：[ {＆＃34; name＆＃34;：＆＃34; France＆＃34;，＆＃34; population＆＃34;：＆＃34; 66000000＆＃34;，＆＃34; capital＆＃34;：＆＃34;巴黎＆＃34;，＆＃34;货币＆＃34;：＆＃34; eur＆＃34;}， {＆＃34; name＆＃34;：＆＃34; Germany＆＃34;，＆＃34; population＆＃34;：＆＃34; 82620000＆＃34;，＆＃34; capital＆＃34;：＆＃34;柏林＆＃34;，＆＃34;货币＆＃34;：＆＃34; eur＆＃34;}， {＆＃34; name＆＃34;：＆＃34; Norway＆＃34;，＆＃34; population＆＃34;：＆＃34; 5233000＆＃34;，＆＃34; capital＆＃34;：＆＃34;奥斯陆＆＃34;，＆＃34;货币＆＃34;：＆＃34; nok＆＃34;}， {＆＃34; name＆＃34;：＆＃34; Russia＆＃34;，＆＃34; population＆＃34;：＆＃34; 144526000＆＃34;，＆＃34; capital＆＃34;：＆＃34;莫斯科＆＃34;，＆＃34;货币＆＃34;：＆＃34; rub＆＃34;} ] }

我将不胜感激任何帮助。谢谢。

Answer 1

您需要遍历obj.countries并获取以下所有国家/地区：

var country = obj.countries[i];

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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

json javascript无法打印正确的输出

2 个答案: