Question

我有一个名为data的数组我需要在div中显示data array的每个值。这是我的函数

function myFunction(data)
{
    var result = "";
    for (var i = 0; i < data.length; i++) 
    {
        result +='NAME: ' + data[i].name + ', AGE: ' + data[i].age;
        console.log(result)
    }
    $('#info').text(result)
}

HTML：

<div id="info" style="width:750px;height:150px;border:1px solid"></div>

但它只显示数组中的最终名称和年龄。

console.log（result）将返回

NAME: xxx, AGE: 20
NAME: yyy, AGE: 30

我也尝试了这个

result +='NAME: ' + data[i].name + ', AGE: ' + data[i].age;

但我无法获得所有数据。

Answer 1

使用以下功能：

function myFunction(data)
{
    var result = "";
    for (var i = 0; i < data.length; i++) 
    {
        result += 'NAME: ' + data[i].name + ', AGE: ' + data[i].age + '<br/>';
    }
    $('#info').html(result)
}

注意：我使用html代替text来显示下一行。

在您的代码中，您每次都会更改#info的文字，因此您始终只获得最后一个值。

另一种解决方法是使用append而不是text。追加将文本添加到text只替换所有内容的位置：

function myFunction(data)
{
    var result = "";
    for (var i = 0; i < data.length; i++) 
    {
        result += 'NAME: ' + data[i].name + ', AGE: ' + data[i].age + '<br/>';
    $('#info').appen(result)
    }
}

模板字符串是在javascript中连接字符串的更好方法，如下所示：

result += `NAME: ${data[i].name}, AGE: ${data[i].age} <br/>`;

Answer 2

每次迭代都要为#info设置整个文本值。你可以尝试：

function myFunction(data)
{
    var result;
    for (var i = 0; i < data.length; i++) 
    {                
       result +='NAME: ' + data[i].name + ', AGE: ' + data[i].age + '<br/>';
       console.log(result)

    }

    $('#info').html(result);
}

Answer 3

您可以使用解决方案https://jsfiddle.net/hc3L98wd/

var data = [
  {name:'xxx',age:20},
  {name:'yyy',age:30}
];

var content = "";
$.each(data, function(i){
  content += `Name : ${data[i].name}  Age : ${data[i].age}<br/>`;
});

$('#info').html(content);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="info" style="width:750px;height:150px;border:1px solid"></div>

循环访问数据＆amp;准备好您的内容，然后将内容添加到您想要的div容器中。

我使用了ES6模板文字。

参考： JavaScript-Template_literals

希望这会对你有所帮助。

Answer 4

您必须在for循环之外定义var result="";。最好使用.html()，因为它允许您呈现像<br/>这样的HTML标记。检查代码段：

var data = [{name:'jack',age:10},{name:'Tom',age:12},{name:'Mira',age:14}]
function myFunction(data)
{
    var result="";
    for (var i = 0; i < data.length; i++) 
    {
        result += 'NAME: ' + data[i].name + ', AGE: ' + data[i].age +"<br/>";
        $('#info').html(result);
    }

}

myFunction(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="info" style="width:750px;height:150px;border:1px solid"></div>

在div

4 个答案: