オブジェクトの配列を取って、それを選択肢の形でiframeに配置する

-1

私はjavascriptファイルにあるオブジェクトの配列を取って、配列内のオブジェクトを私のウェブサイト上の選択リストにすることに苦労しています。 HTMLとiframe。 iframe idを作成しましたが、どこから移動してウェブページに何かを表示させるかわかりません。オブジェクトの配列を取って、それを選択肢の形でiframeに配置する

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

乾杯

出典

2017-12-02 wertyj

あなたはそのためのiframeが必要ですなぜですか？ –

私は配列をとってウェブページ上に置くのが最良の選択ですが、 – wertyj

それはない:-)あなたはそれ以上のリスト（ul）のためにdivを使うことができます。スクリプトファイルの内容全体を投稿できますか？データを挿入するためにそれを使用したいのですか、それとも余分なスクリプトを使用したいのですか？ –

あなたがこれを行うことができます：を私は何を意味するかを説明するためにいくつかのコメントを書きました：あなたのfruits.jsで

<!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>

：

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 
    } 
});

出典

2017-12-02 20:01:08

私はjsのフィドルでこれを試してみたが、何もあなたがdocument.addEventListener（「DOMContentLoaded」を必要としないjsFiddleでhttps://jsfiddle.net/#&togetherjs=wLkLbtfj7L – wertyj

が起こっていません、機能（）{これをチェックアウト：。。それは働いたhttps://jsfiddle.net/9pd3dk10/ –

Waow !!あなたに非常に多くの – wertyj

オブジェクトの配列を取って、それを選択肢の形でiframeに配置する

答えて

関連する問題