获取对象数组并以选择的形式将其放置在 iframe 中答案

【问题标题】：Taking an array of objects and placing it in iframe in the form of choices获取对象数组并以选择的形式将其放置在 iframe 中
【发布时间】：2017-12-02 19:18:35
【问题描述】：

我正在努力获取我的 javascript 文件中的一组对象，并使用 html 和 iframe 将数组中的对象制作成我网站上的选择列表。我创建了一个 iframe id，但我不知道从那里去哪里让一些东西出现在网页上。

HTML 代码

<!DOCTYPE html>
<html>
<head>
<title>Assessed Assignment A8</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="fruits.js"></script>


</head>
<body>

<iframe id="Containers"></iframe>



</body>
     </html>

Javascript 代码

items = [{"title":"Apple"},{"title":"Orange"},{"title":"Pear"},{"title":"Banana"}];

我基本上是想让它看起来像这样：https://gyazo.com/9877c7ae75c3d0f2425c31642e48cc01

干杯

【问题讨论】：

为什么需要 iframe？
我认为这是获取数组并放置在网页上的最佳选择
不，它没有 :-) 你可以只使用 div 或更好的列表 (ul)。您可以发布脚本文件的全部内容吗？你想用它来插入数据还是要为此使用额外的脚本？
哦，我明白了，我没有意识到这一点。不，这就是我所有的脚本，但我想用一个单独的 javascript 来试试这个，就像我现在一样。是的，我想用它来插入数据:)

标签： javascript html arrays object iframe

【解决方案1】：

您可以这样做：我写了一些 cmets 来解释我的意思：

<!DOCTYPE html>
<html>
<head>
<title>Assessed Assignment A8</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="fruits.js"></script>
</head>
<body>

<ul id="containers"></ul>

</body>
</html>

在你的 fruits.js 中：

document.addEventListener('DOMContentLoaded', function() { // wait for content to load in order to be sure you can select your dom nodes
    var items = [{"title":"Apple"},{"title":"Orange"},{"title":"Pear"},{"title":"Banana"}];
    var myListElement = document.getElementById('containers'); // select your DOM - list element
    for (prop of items) { // traverse your object items
       myListElement.innerHTML += '<li>'+prop.title+'</li>'; // add listitems containing the values from the item object
    }
});

【讨论】：

我在 js fiddle 上试过了，但什么也没发生jsfiddle.net/#&togetherjs=wLkLbtfj7L
在 jsFiddle 你不需要 document.addEventListener('DOMContentLoaded', function() { . 看看这个：jsfiddle.net/9pd3dk10
np！很高兴我能帮上忙！你只需要关心 "for (prop of items)" 。这是 ES2015，旧版浏览器不支持。 developer.mozilla.org/de/docs/Web/JavaScript/Reference/…
嗨，我一直在我的 html 文件上尝试这个，但它根本不起作用。出于某种原因，它仅适用于 jsfiddle？什么都没有出现
在您的 html 文件中，您需要再次使用“document.addEventListener('DOMContentLoaded', function() {”，或者只是将脚本放在结束正文标记之前