显示数组中的值[重复]答案

【问题标题】：Display values from array [duplicate]显示数组中的值[重复]
【发布时间】：2017-04-25 11:02:23
【问题描述】：

当用户单击按钮时，我希望以下数据以下列格式显示在我的网页上：

car1 - id:1346 - 类型 BMW

car2 - id: 1379 - 霍顿型

等等……

我该如何做呢？我试过这个：

document.getElementById('message').innerHTML = car1

但显示的只是'[object Object]'

    var car1 = {id:"1346", type:"BMW"};
    var car2 = {id:"1379", type:"Holden"};
    var car3 = {id:"2580", type:"Ford"};
    var cararray = [car1, car2, car3];

【问题讨论】：

您需要在对象上使用 JSON.stringify 以文本形式显示它。

标签： javascript arrays

【解决方案1】：

我建议您使用项目符号列表 (ul) 并从 cararray 数组中追加元素。

var cararray = [{id:"1346",type:"BMW"},{id:"1379",type:"Holden"},{id:"2580",type:"Ford"}], 
    content = document.getElementById('message'),
    btn = document.getElementById('btn');

cararray.forEach(function(v,i) {
    var el = document.createElement('li');
    el.innerHTML = `car${i+1} - id: ${v.id} - type: ${v.type}`;
    content.appendChild(el);
});

btn.addEventListener('click', function() {
    content.style.display = 'block';
});

ul {
  list-style-type: none;
}

<button id='btn'>reveal list</button>
<ul id='message' hidden></ul>

【讨论】：

【解决方案2】：

您可以使用.<property> 访问汽车的信息，这里的<property> 是.id 或.type。

要获取所有汽车，您需要循环访问cararray，并在每个循环中将其添加到消息中。

var car1 = {id:"1346", type:"BMW"};
var car2 = {id:"1379", type:"Holden"};
var car3 = {id:"2580", type:"Ford"};
var cararray = [car1, car2, car3];

var message = '';

for (var i = 0; i < cararray.length; i++) {
    var car = cararray[i];
    
    message += "car" + (i + 1) + " - id:" + car.id + " - type " + car.type + "\n";
}

alert(message);

以alert(message) 为例，您可以将其替换为document.getElementById('message').innerHTML = message，并在消息中附加汽车时使用<br /> 而不是\n。

【讨论】：

不确定为什么这会被否决，因为在使用“document.getElementById('message').innerHTML = car1”时 OPs 问题显示“[object Object]”。汽车阵列不是问题的一部分
1：如果可以只使用 sn-ps，请不要使用 jsfiddle。 2：您忽略了 OP 想要渲染多辆汽车这一事实。
@Cerbrus 答案已更改并已记录反馈。谢谢
好多了！请注意，如果 OP 想要将此 message 添加到他的 HTML 中，\n 将不起作用。
@Cerbrus 已编辑

【解决方案3】：

你已经明确写出了你不想渲染的变量，你不能将一个对象转换为字符串。你可以这样做：

document.getElementById('message').innerHTML = "id:" + car1.id + " - type " + car1.type
//Return id:1346 - type BMW

或者像这样：

document.getElementById('message').innerHTML = JSON.stringify(car1)
//Return {"id":"1346","type":"BMW"}

【讨论】：

【解决方案4】：

您可以使用循环来迭代您的数组并显示您需要的内容

var car1 = {
  id: "1346",
  type: "BMW"
};
var car2 = {
  id: "1379",
  type: "Holden"
};
var car3 = {
  id: "2580",
  type: "Ford"
};
var cararray = [car1, car2, car3];

function display() {
  let message = "";
  cararray.forEach((car,i)=>message += "car"+(i+1)+" - id:"+car.id+" - type "+car.type+"</br>");
  document.getElementById('message').innerHTML = message;
}

<button onclick="display()">Display</button>
<p id="message"></p>

【讨论】：

@Downvoter 为什么？

【解决方案5】：

    <html>
    <head>
    <script>
    function myFun()
    {
        var car1 = {id:"1346", type:"BMW"};
        var car2 = {id:"1379", type:"Holden"};
        var car3 = {id:"2580", type:"Ford"};
        var cararray = [car1, car2, car3];
        var cart="";
        for(var x=0; x<cararray.length; x++)
        {
          if(x==cararray.length)
            cart = cart + "car"+x+ "- id:"+cararray[x].id+" - type "+cararray[x].type;
          else
            cart = cart + "car"+x+ "- id:"+cararray[x].id+" - type "+cararray[x].type+ "<br>";
        }
        document.getElementById('message').innerHTML = cart;
    }
    </script>
    <head>
    <body onload="myFun()">
    <div id="message"></div>
    </body>
    </html>

试试这个简单的解决方案。希望它对你有用！

【讨论】：

我可以知道投反对票的原因吗？
Divyesh：想象一下如果你有 100 辆汽车，这段代码会是什么样子......你为什么不使用cararray？
此解决方案仅针对此特定问题先生。
我知道循环的概念，但这种问题可能很难理解
@Cerbrus OP 没有要求使用汽车阵列。他举了一个例子，这是行不通的，我们的解决方案解决了这个问题。为正确的解决方案投票