Question

当我尝试这个时，HMTL页面只显示最后一个对象，而不是所有对象。

这是我的JavaScript文件

var family = {
  aaron: {
    name: 'Aaron',
    age: 30
  },
  megan: {
    name: 'Megan',
    age: 40
  },
  aaliyah: {
    name: 'Aaliyah',
    age: 2
  }
}

var list = function(family) {
  for (var prop in family) {
    var elList = document.getElementById('aaron-family').innerHTML = prop;
  }
}

list(family);

这是我的HTML文件

<html>
<head>
  <title>Aaron's Test With Objects</title>
</head>
  <li id="aaron-family">Hey, this is where it goes</li>
<footer>
  <script src="objects.js"></script>
</footer>
</html>

Answer 1

嗯，你在那里遇到了几个问题（<li>标签没有父<ol>或<ul>标签等等......但我还是假设主要错误是您要将每个后续输出替换为innerHTML的每个分配。

解决方案：将已编译的数组分配给innerHTML（使用join在值之间包含空格）

var list = function(family) {
  var names = [];
  for (var prop in family) {
    names.push(prop.name);
  }
  document.getElementById('aaron-family').innerHTML = names.join(' ');
}
list(family);

Answer 2

谢谢你们！这是我提出的最终解决方案：

JS

var family = {
  aaron: {
    name: 'Aaron',
    age: 30
  },
  megan: {
    name: 'Megan',
    age: 40
  },
  aaliyah: {
    name: 'Aaliyah',
    age: 2
  }
}

var list = function(family) {
  for (var prop in family) {
    document.getElementById('aaron-family').innerHTML += '<li>' + prop + '</li>';
    console.log(prop);
  }
}

HTML

<html>
<head>
  <title>Aaron's Test With Objects</title>
</head>
<ul id="aaron-family">
</ul>
<footer>
  <script src="objects.js"></script>
</footer>
</html>

我确定它可以被重构，但它在视觉上有效。

Answer 3

删除elList因为没有意义......

然后改变

document.getElementById('aaron-family').innerHTML = prop;

要

document.getElementById('aaron-family').innerHTML += prop;

这样您就不会经常将innherHTML设置为prop。此外，您可能会发现将函数更改为以下内容更好，以防止不断获取元素。

function list(family) {
  var elList = document.getElementById('aaron-family');
  for (var prop in family) {
    elList.innerHTML += prop;
  }
}

希望这会有所帮助：）

Answer 4

这种将这种数据格式呈现为HTML的动态方式

const elList = document.getElementById('aaron-family')

function convertObjectsToArrayOfObjects(family) {
    const filteredData = []
    for(person in family){
          filteredData.push(family[person])
     }
    return filteredData;
 }

function elList(family) {
   const familyData = convertObjectsToArrayOfObjects(family)
   elList.innerHTML = `
      ${
        familyData.map(person => {
          return `
            <h1>name: ${person.name}</h1>
            <h2>age: ${person.age}</h2>
          `   
       })
     }
  `
}

list(family);

Answer 5

只是不需要定义函数

html文件：

public function generatedPdf($id_siswa){
    //Provide image chart for pdf
    file_get_contents('http://siswaku/chart/'+$id_siswa); //this is not work to save image in storage

    //Provide data for pdf
    $kompetensi = Kompetensi::join('bidang_kompetensi', function($join){
        $join->on('kompetensi.id_bidang','=','bidang_kompetensi.id')
        ->select('nama_bidang');
    })
    ->where('id_siswa', $id_siswa)
    ->where('active', 1)
    ->get()
    ->groupBy('nama_bidang');

    return ['kompetensi' => $kompetensi];
}

var family = {
    aaron: {
        name: 'Aaron',
        age: 30
    },
    megan: {
        name: 'Megan',
        age: 40
    },
    aaliyah: {
        name: 'Aaliyah',
        age: 2
    }
}

for (var prop in family) {

    document.getElementById('aaron-family').innerHTML += '<li>' + prop + '</li>';

}

将JavaScript对象列表显示为HTML列表项

5 个答案: