时间戳

首页 > 解决方案 > 用多维数组填充标题

javascript - 用多维数组填充标题

问题描述

我在 JavaScript 中有这个多维数组，我试图用它填充 HTML 中的标题我想填充这个标题，以便所有名字都在标题中单独打印出来。有没有一种简单的方法可以做到这一点，因为我不知道如何去做。任何帮助将不胜感激。

var personArr = [];
    var person = {firstName:"John", lastName:"Doe", age:21};
    var person2 = {firstName:"Paul", lastName:"Logan", age:22};
    var person3 = {firstName:"Sean", lastName:"Kim", age:32};
    var person4 = {firstName:"Ken", lastName:"Chow", age:12};
    
    personArr.push(person, person2, person3, person4);
    console.log(personArr);
<!DOCTYPE html>
    <html>
    <body>
    
    <h6></h6>
    <h6></h6>
    <h6></h6>
    <h6></h6>
    
    </body>
    </html>

标签： javascripthtml

解决方案

将 Jquery 添加到您的文件并使用 forEach 遍历每个数组元素。之后，您可以为每个单独的对象键添加 .text 元素

    <html>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var personArr = [];
var person = {firstName:"John", lastName:"Doe", age:21};
var person2 = {firstName:"Paul", lastName:"Logan", age:22};
var person3 = {firstName:"Sean", lastName:"Kim", age:32};
var person4 = {firstName:"Ken", lastName:"Chow", age:12};

personArr.push(person, person2, person3, person4);
console.log(personArr);

$(document).ready(() => {
  var p = 1;
  personArr.forEach(function(element) {
    $("#"+p).text(element.firstName);
    p+=1;
  });
})

</script>
<body>
  <h6 id="1"></h6>
  <h6 id="2"></h6>
  <h6 id="3"></h6>
  <h6 id="4"></h6>
</body>
</html>

你可以做这样的事情！

推荐阅读