JSONファイルからHTMLにデータを挿入

JSONファイルから、選択した内容に応じて、各ループごとにドロップダウンボックスからデータを取得しようとしています。私は自分のコードをこのようにしたい：ドロップダウンボックスで値の年をクリックすると、選択された同じ年のファイルからすべてのオブジェクトの値がテーブルに表示されます。JSONファイルからHTMLにデータを挿入

<!DOCTYPE html> 
<html> 
    <body> 
    <form>Select a YEAR : 
     <select id="Selections"> 
     <option value="year1">year1</option> 
     <option value="year2">year2</option> 
     </select> 
    </form> 
    <button type="button" onclick="run()">Try it</button> 
    <p id="result"> </p> 
    <script> 
     function run() { 
      var x = document.getElementById("Selections").value; 
      if (x == "year1") { 
       document.getElementById("result").innerHTML = "the first year"; 
       $.getJSON("year1.json", function(json) { 
        $.each(json, function (i,item){ 
         $('#tblinfo').append('<tr> <th>'+item.year+'</th> 
          <th>'+item.eposide+'</th></tr>'); 
         }) 
        }); 
      } else if (x == "year2") { 
       document.getElementById("result").innerHTML = "the second year"; 
       $.getJSON("year2.json", function (json) { 
        $.each(json, function (i,item){ 
        $('#tblinfo').append('<tr> <th>'+item.year+'</th> 
         <th>'+item.eposide+'</th></tr>'); 
        }) 
       }); 
      } 
     } 
    </script> 
    <table id="tblinfo" border=" 1px solid black" style="width:100%"></table> 
    </body> 
</html>

私のJSONファイル：ここで

は私のコードです

year1.jsonは次のとおりです。

[ 
    {"year":"1995", "eposide":"1"}, 
    {"year":"1995", "eposide":"2"}, 
    {"year":"1995","eposide":"3"} 
]

year2.jsonは次のとおりです。

[ 
    {"year":"1994", "eposide":"1"}, 
    {"year":"1994", "eposide":"2"}, 
    {"year":"1994","eposide":"3"} 
]

なんだかテーブルの値を取得できません。

出典

2017-12-04 reeena11

テンプレートリテラルを使用しない限り、あなたは空白行を持つことができない - 。このニーズを一行であることを '$（ '＃のtblinfoは、'）（ ' '+ item.year +' ' +アイテムを追加します.eposide + ''）; ' – mplungjan

ブラウザコンソールにスローされたエラーはありますか？構文上の問題がありますが、コピー/ペーストエラーの可能性があります – charlietfl

エラーメッセージが表示されますか？ '＃result' HTMLの変更が見えますか？ – showdev

-1

<!doctype html> 
<html> 
<body> 
    Select YEAR : 
    <select id="Selections" onchange="run()"> 
     <option value="0">choose:</option> 
     <option value="1">year1</option> 
     <option value="2">year2</option> 
    </select> 
    <p id="result"></p> 
    <template id="temp"> 
     <span class="year"></span> 
     <span class="episode"></span><br> 
    </template> 

    <script> 
    let url; 
    function run(){ 
     let e=document.querySelector("#Selections"); 
     let year=e.options[e.selectedIndex].value; 
     if(year==1)url="year1.json"; 
     else if (year==2)url="year2.json"; 
     getJson(); 
    } 

    async function getJson() { 
     let temp=document.querySelector("#temp"); 
     let container = document.querySelector("#result"); 
     let jsonObjects = await fetch(url); 
     let items = await jsonObjects.json(); 
     container.innerHTML=""; 
     items.forEach(function(item) { 
      let clon = temp.cloneNode(true).content; 
      clon.querySelector(".year").textContent = item.year; 
      clon.querySelector(".episode").textContent = item.eposide; 
      container.appendChild(clon); 
     }); 
    } 
    </script> 
    </body> 
</html>

出典

2017-12-04 22:18:33 Helle

少しの説明が参考になります。何が問題なのですか？あなたのコードはそれをどのように解決しますか？ – showdev

@showdevこのコードは最新のブラウザでしか実行されません – mplungjan

このソリューションは私のためには機能しませんでしたが、なぜわからないのですか – reeena11

JSONファイルからHTMLにデータを挿入

答えて

関連する問題