从JavaScript对象创建HTML表格 [英] Create HTML table from JavaScript object

问题描述

数据的格式如下所示：

我的JavaScript是一个初学者，想要在HTML中显示一个对象数组。
$ b

  [
 {key：apple，value：1.90}，
 {key：berry ，value：1.7}，
 {key：banana，value：1.5}，
 {key：cherry，value：1.2} 
 
 
 
 
 
 
我想用三列（id，name，relevance）列表来显示他们。 
 
 
 任何人都可以告诉我如何编写一个javascript代码来显示它吗？
 
  
 
解决方案
 
解释
 
 
 
你想要的是用HTML填充一个表格（或另一个DOMElement），用你的JavaScript动态地执行，一旦页面被加载并且你的JSON对象被接收到。
 
 
 
你想要遍历该对象。这样做的最好方法是使用 for 循环，并确保我们的循环变量对于我们对象的长度保持有效（所有属性）。  
 
 
获取JSON对象长度的最佳方法是通过 myJSONObject.length ：您可以选择 myJSONObject 并返回它们的计数。
 
 
 
您可以通过以下方式访问存储在JSON对象中的值：对于循环（假设定义的循环变量名为 i ）： myJSONObject [i] .theAttributeIWantToGet  $ b 
 
 
 
价格格式细分
 
 
 
现在，这些价格需要有适当的格式，不是吗？因此，我们将检查任何值属性在之后的少于2 个字符。 0 。在写入格式化的值之前，我们还添加了一个 $ 。以下是它的工作原理： 
 
 
 
 
 
  obj [i] .value.toString（） .substring（startIndex，length） 
 
 
 
 
 
我们要检查 。 sign，所以我们的startIndex将是这个点在我们字符串中的位置。
 
 
  obj [i] .value.toString（ ）.substring（obj [i] .value.toString（）。indexOf（'。'），length） 
 
 
我们现在需要设置长度。我们希望找到所有点的长度，所以我们将整个字符串的长度放在一个安全的位置。
 
 
 
最终结果： obj [i] .value.toString（）。substring（obj [i] .value.toString（）。indexOf（'。'），obj [i] .value.toString（）。length）< 2  
 
 
 
 
 
这将返回true或false。如果确实如此：点后面的数字少于2位！
 
 
 
 
 
 
我们添加 if if 语句和最后一个零：
 
 
  if（obj [i] .value.toString（）。substring（obj [ i）.value.toString（）。indexOf（'。'），obj [i] .value.toString（）。length）< 2）
 obj [i] .value + =0;  
 
 
 
 
 
 
 
 
 
 
 <  为什么我使用 innerHTML 而不是 appendChild（） 。
 
 
 
 
 
 
 
 
 
 
  JSFiddle  
 
 
 < h2> HTML  
 
 
 < table> 
< tbody id =tbody>< / tbody> 
< / table> 
  
 
 
 
 JSON 
 
 
 
  [{
key：apple，
value：1.90 
}，{
key： berry，
value：1.7 
}，{
key：banana，
value：1.5 
}，{
key：cherry，
value：1.2 
}] 
  
 
 
 
 JavaScript 
 
 
 
 注意：此时，JSON对象将被命名为 obj   
 
 
  var globalCounter = 0; 
 var tbody = document.getElementById（'tbody'）; 
 
 for（var i = 0; i  var tr =< tr>; 
 $ b $ *验证添加最后一位小数0 * / 
 if（obj [i] .value.toString（）。substring（obj [i] .value.toString（）。indexOf （'。'），obj [i] .value.toString（）。length）< 2）
 obj [i] .value + =0; 
 
 / *不能忘记$符号* / 
 tr + =< td> + obj [i] .key +< / td> +< td> $+ obj [i] .value.toString（）+< / td>< / tr>; 
 
 / *我们将表格行添加到表格主体* / 
 tbody.innerHTML + = tr; 
} 
  





JSFiddle

I am a beginner of JavaScript and want to display an array of objects in HTML.

The format of the data is like this:

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

I want to use a list with three columns (id, name, relevance) to display them. And the id can increase from 1 automatically.

Could anyone tell me how to write a javascript code to display it?

Please give me some materials or examples to learn.

解决方案

Explanation

What you want is to fill a table (or another DOMElement) in HTML, with your JavaScript, which is executed dynamically once the page is loaded and your JSON object is received.

You want to loop through the object. The best way to do so would be with a for loop, and making sure our looping variable remains valid for the length of our object (all its attributes).

The best way to get the length of a JSON object is through myJSONObject.length: You select the keys of myJSONObject and return their count.

You can access the values stored in your JSON Object the following way, in your for loop (assuming the looping variable defined is named i): myJSONObject[i].theAttributeIWantToGet

---

Price formatting breakdown

Now, those prices need to have a proper format, don't they? So we'll check if any of the value attribute has less than 2 characters after the . within them. If they do, we add another decimal 0. We also add a $ before writing the formatted value. Here is a breakdown of how it works:

• obj[i].value.toString().substring(startIndex, length)

  • We want to check the length after the . sign, so our startIndex will be the position of this dot within our string.
  • obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'),length)
  • We now need to set the length. We want to find the length of all what's after the dot, so we'll take the length of the whole string just to be safe.

  • Final result: obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'), obj[i].value.toString().length) < 2

    • This will return true or false. If it's true: There's less than 2 digits after the dot !

  • We add the if statement and the last zero:

  • if (obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'), obj[i].value.toString().length) < 2) obj[i].value += "0";

---

Also: Why I use innerHTML instead of appendChild().

---

Solution

JSFiddle

HTML

<table>
    <tbody id="tbody"></tbody>
</table>

JSON

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

JavaScript

Note: The JSON object will be named obj in this instance.

var globalCounter = 0;
var tbody = document.getElementById('tbody');

for (var i = 0; i < obj.length; i++) {
    var tr = "<tr>";

    /* Verification to add the last decimal 0 */
    if (obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'), obj[i].value.toString().length) < 2) 
        obj[i].value += "0";

    /* Must not forget the $ sign */
    tr += "<td>" + obj[i].key + "</td>" + "<td>$" + obj[i].value.toString() + "</td></tr>";

    /* We add the table row to the table body */
    tbody.innerHTML += tr;
}

JSFiddle

这篇关于从JavaScript对象创建HTML表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！