JSON:显示来自字符串的几个值

JSON: Showing several values from a string

本文关键字：几个 显示 字符串 JSON      更新时间：2023-09-26

我是JSON和Javascript的新手。我想弄清楚如何打印所有这些而不是其中的一个?

<p id="demo"></p>
<script>
var text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

我很抱歉重复@ david的回答，但更多的输出-添加一些像out变量收集所有值，然后输出它们:

var out='';
var text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
var obj = JSON.parse(text);
for(var i=0; i < obj.employees.length; i++ ) {
    out+=obj.employees[i].firstName + " " + obj.employees[i].lastName+'<br>';
}
document.getElementById("demo").innerHTML = out;

尝试使用for循环，你只是打印索引1的值在那里也许像这样的东西应该工作

var text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
obj = JSON.parse(text);
for (var i = 0; i < obj.employees.length; i++) {
  document.getElementById("demo").innerHTML += 
  obj.employees[i].firstName + " " + obj.employees[i].lastName + " ";
}

遍历对象，以便您可以向元素添加值:DD希望这对您有所帮助

可以在循环中显示。

for (var i = 0; i < obj.employees.length; i++) {
              document.getElementById("demo").innerHTML +=
                        obj.employees[i].firstName + " " + obj.employees[i].lastName;
            }

注意:obj.employees.length = 3(在本例中)

如果你让我做，我会这样做。代码已经过测试。试一试。我使用严格检查的自执行函数。利用javascript的原型特性。我假设您已经解析了JSON数据，并且可以使用。如果你需要更多的解释，请告诉我。

(function(){
    'use strict';
    var text = {
        employees: [
            {
                firstName:'john',lastName:'Dae'
            },
            {
                firstName:'Anna',lastName:'Smith'
            },
            {
                firstName:'Peter',lastName:'Jones'
            }
        ]
    };
    var Employee = function(data){
    //private vars goes here.
        this.employees = data.employees;
    };
    Employee.prototype.append = function(id_of_element){
        for(var i = 0;i<this.employees.length;i++){
            document.getElementById('demo').innerHTML += '<li>'+this.employees[i].firstName+ ' ' +this.employees[i].lastName+'</li>';
        }
    };
    var emp = new Employee(text);
    emp.append();
})();


var text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
obj = JSON.parse(text);
obj.employees.forEach(function(employee) {
  document.getElementById("demo").innerHTML += employee.firstName + " " + employee.lastName + "'n";
});
<pre id="demo"></pre>

为了简单(但不一定是性能)使用ES5的数组方法:

document.getElementById('demo').innerHTML =
     obj.employees.map(function(employee) {
         return employee.firstName + ' ' + employee.lastName;
     }).join('<br>');

或在ES6语法中:

document.getElementById('demo').innerHTML =
     obj.employees.map(employee => employee.firstName + ' ' + employee.lastName)
        .join('<br>');

注意以上两个方法是如何避免obj.employees[i]的重复解引用的。

注意:这不会在最后的名字后面放一个<br>，但如果这很重要，你应该把你的列表放在一个"块样式"的元素中，它会隐式地移动到下一行。

相关文章：