画像を含むすべてのjsonオブジェクトを印刷しますか？

「alleLand」ボタンをクリックすると、名前、町、写真などのJSONオブジェクトをすべて印刷しようとしています。 JSONを使うのが本当に新しいので、私が何をしているのか分かりません。誰かが助けてくれると願っています！画像を含むすべてのjsonオブジェクトを印刷しますか？

<body> 
    <div> 
     <h3 id="header">Mitt feriested</h3> 
     <label>Land: 
      <input id="land" type="text"> 
     </label> 
     <input id="sokLand" class="landBtn" type="button" value="Søk etter land"> 
     <input id="alleLand" class="landBtn "type="button" value="Velg alle destinasjoner"> 
    </div>  

    <script src="scripts/jquery-3.2.0.min.js"></script> 
    <script> 

     var feriestederJSON = { landliste: [ 
      {"land": "Tyskland", 
      "by": "Munchen", 
      "bildeAvBy": "munchen.jpg" 
      }, 
      {"land": "Tyskland", 
      "by": "Berlin", 
      "bildeAvBy": "berlin.jpg" 
      }, 
      {"land": "Spania", 
      "by": "Barcelona", 
      "bildeAvBy": "barcelone.jpg" 
      }, 
      {"land": "Spania", 
      "by": "Palma", 
      "bildeAvBy": "palma.jpg" 
      }, 
      {"land": "Norge", 
      "by": "Oslo", 
      "bildeAvBy": "oslo.jpg" 
      }, 
      {"land": "Norge", 
      "by": "Bergen", 
      "bildeAvBy": "bergen.jpg" 
      }, 
     ]}; 

     $(function() { 
      $(document).on('click','#alleLand',function() { 
       var antallLand = feriestederJSON.landliste.length; 
       for(var i = 0; i < antallLand; i++){ 
        var land = feriestederJSON.landliste[i].land; 
        var by = feriestederJSON.landliste[i].by; 
        var bildeAvBy = feriestederJSON.landliste[i].bildeAvBy; 
       } 
      }); 
     } 
    </script> 

</body>

出典

2017-05-30 Sophie Parker

正確に "印刷" とはどういう意味ですか？ページにHTMLを書く？ – SteamDev

$(function() { 
 
      $(document).on('click','#alleLand',function() { 
 
       var antallLand = feriestederJSON.landliste.length; 
 
       for(var i = 0; i < antallLand; i++){ 
 
        var land = feriestederJSON.landliste[i].land; 
 
        var by = feriestederJSON.landliste[i].by; 
 
        var bildeAvBy = feriestederJSON.landliste[i].bildeAvBy; 
 
        $('#DivOutPut').append(land + '<br />' + by+'<br />'+bildeAvBy + '<br />' + '<br />'); 
 
       } 
 
      });

<div id="DivOutPut"></div>

は、単にあなたがあなたのリストを保持するために使用します新しい要素を作る、ループの外に新しいjavascriptの変数を作成し、HTML文字列を追加しますそれに見せたい次に、作成した要素のinnerHTMLを変数に置き換えます。

例要素：

<ul id="land_list"></ul>

コードに加え：

var output_html = ''; 

    for(var i = 0; i < antallLand; i++){ 
     var land = feriestederJSON.landliste[i].land; 
     var by = feriestederJSON.landliste[i].by; 
     var bildeAvBy = feriestederJSON.landliste[i].bildeAvBy; 

     output_html += '<li>' + land + ', ' + by + ', <img src="' + bildeAvBy + '" /></li>';    
    } 

    document.querySelector("#land_list").innerHTML = output_html;

編集 - コードが実行されないので、： 要素自体にonclickを使う方が良いでしょうかjQueryベースのイベントリスナーではなく、JavaScriptベースのイベントリスナーです。リスティングメソッドを関数に移動し、その関数をクリックして実行します。

<input id="alleLand" class="landBtn "type="button" value="Velg alle destinasjoner" onclick="list_json_data();">

Javascriptを：

function list_json_data() { 
    var feriestederJSON ... // Make sure to replace this 
    var output_html = ''; 

    for(var i = 0; i < antallLand; i++){ 
     var land = feriestederJSON.landliste[i].land; 
     var by = feriestederJSON.landliste[i].by; 
     var bildeAvBy = feriestederJSON.landliste[i].bildeAvBy; 

     output_html += '<li>' + land + ', ' + by + ', <img src="' + bildeAvBy + '" /></li>';    
    } 

    document.querySelector("#land_list").innerHTML = output_html; 
}

出典

2017-05-30 14:22:08 Potato

私はこれを動作させることはできません。私はまだalleLandボタンを押しても出力が得られません。すべてが正しいように見えますが。 –

@SophieParkerがソリューションに追加情報を追加しました – Potato

これまでのところすべてが正しいようです。あなたはプリンタを使ってそれを印刷したい、あるいは単純にhtmlとしてWebページで見たいと思っています。 html要素で出力するには、divと言って、そのdivに結果を追加するための行を追加するだけです。あなたのコードは以下のようになることがあります。

出典

2017-05-30 14:13:39 Zeni

私はそれをhtmlとしてWebページで見たいと思います。しかし、私はこの時点で私が何を押しても何の結果も得られません。 –

html要素を追加するだけで、結果を配置してその中にすべてを追加したいdivを指定します。 – Zeni

画像を含むすべてのjsonオブジェクトを印刷しますか？

答えて

関連する問題