14

私は JavaScript の初心者で、オブジェクトの配列を HTML で表示したいと考えています。

データの形式は次のようになります。

[
  {"key":"apple","value":1.90},
  {"key":"berry","value":1.7},
  {"key":"banana","value":1.5},
  {"key":"cherry","value":1.2}
]

それらを表示するために、3 つの列 (id、名前、関連性) を持つリストを使用したいと考えています。ID は 1 から自動的に増加します。

それを表示するためのJavaScriptコードを書く方法を誰か教えてもらえますか?

学ぶための資料や例を教えてください。

4

9 に答える 9

5

次のようなことができます。

var table = document.createElement("table");

//Add a header
var header = document.createElement("tr");

var idHeaderCell = document.createElement("th");
var nameHeaderCell = document.createElement("th");
var relevanceHeaderCell = document.createElement("th");

header.appendChild(idHeaderCell);
header.appendChild(nameHeaderCell);
header.appendChild(relevanceHeaderCell);

table.appendChild(header);

//Add the rest of the data to the table
for(var i = 0; i < data.length; i++) {
    var id = (i + 1);
    var name = data[i].key;
    var relevance = data[i].value;

    var tr = document.createElement("tr");

    var idCell = document.createElement("td");
    var nameCell = document.createElement("td");
    var relevanceCell = document.createElement("td");

    idCell.appendChild(document.createTextNode(id));
    nameCell.appendChild(document.createTextNode(name));
    relevanceCell.appendChild(document.createTextNode(relevance));

    tr.appendChild(idCell);
    tr.appendChild(nameCell);
    tr.appendChild(relevanceCell);

    table.appendChild(tr);
}
于 2013-07-16T18:34:50.500 に答える
1

リストを反復処理し、この方法で各項目のデータを取得します (データが data という var にあると仮定します)。

for (var i = 0; i < data.length; i++) {
  var id = i + 1;
  var name = data[i].key;
  var relevance = data[i].value;
}

次に、各ループの変数で何かを行い、必要に応じて出力します。

于 2013-07-16T18:31:14.183 に答える
1

あなたが何を求めているのか完全にはわかりません。あなたの投稿のタイトルは、前の回答で述べたように JSON.stringfy を探しているようですが、そうではないようです。

HTML リストを作成しようとしていますか? 必要性をもう一度説明していただけますか？あなたがやろうとしていることは複雑ではないと思います。あなたがやろうとしていることの詳細と目的をもう少し詳しく教えていただければ、私たちはあなたを助けることができると確信しています.

JSON オブジェクトをループして HMTL を表示しようとしていると思います。次の純粋な JavaScript の例を試してください。

var fruits = JSON.parse('[{"key":"apple","value":1.90}, {"key":"berry","value":1.7}, {"key":"banana","value":1.5}, {"key":"cherry","value":1.2} ]');

var tbl = document.createElement('table');
var thead = document.createElement("thead");
var tbody = document.createElement("tbody")

var tr_head = document.createElement("tr");

var th_id = document.createElement("th");
var th_name = document.createElement("th");
var th_price = document.createElement("th");

th_id.textContent = "Id";
th_name.textContent = "Name";
th_price.textContent = "Price";

tr_head.appendChild(th_id);
tr_head.appendChild(th_name);
tr_head.appendChild(th_price);

thead.appendChild(tr_head);

for(var i = 0, j = fruits.length; i < j; i++) {
    var tr_body = document.createElement("tr");

    var td_id = document.createElement("td");
    var td_name = document.createElement("td");
    var td_value = document.createElement("td");

    td_id.textContent = i;
    td_name.textContent = fruits[i].key;
    td_value.textContent = fruits[i].value;

    tr_body.appendChild(td_id);
    tr_body.appendChild(td_name);
    tr_body.appendChild(td_value);

    tbody.appendChild(tr_body);
}


tbl.appendChild(thead);
tbl.appendChild(tbody);

 console.log(tbl);
于 2013-07-16T18:39:28.120 に答える
1

多分このように：

function obj2htmltable(obj) {
    var html = '<table>';
    for (var key in obj) {
        var value = obj[key].toString();
        html += '<tr><td>' + key + '</td><td>' + value + '</tr>';
    }
    html += '</table>';
    return html;
}

ネストされた構造 (オブジェクト内のオブジェクト) の場合、obj2htmltable() はそれ自体を再帰的に呼び出すことができます。

function obj2htmltable(obj) {
    var html = '<table>';
    for (var key in obj) {
        var item = obj[key];
        var value = (typeof(item) === 'object') ? obj2htmltable(item) : item.toString();
        html += '<tr><td>' + key + '</td><td>' + value + '</tr>';
    }
    html += '</table>';
    return html;
}
于 2019-06-13T17:14:08.440 に答える