2017-12-04 13 views
-3

私は単純なことを持っています:このJSONをテーブルに読み込む

書籍のオブジェクトを持つJSONがあり、すべての書籍にタイトル、著者、年があります。私は...のリストから1つのオプションを選択し、table.I'veがW3からの例を使用しますが、今私はこだわっていると、それが必要として何も動作で選択されたプロパティを表示したいと思い

Link's here

function change_myselect(sel) { 
    var obj, dbParam, xmlhttp, myObj, x, txt = ""; 
    obj = { "table":sel, "limit":20 }; 
    dbParam = JSON.stringify(obj); 
    xmlhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
      myObj = JSON.parse(this.responseText); 
      txt += "<table border='1'>" 
      for (x in myObj) { 
       txt += "<tr><td>" + myObj[x].name + "</td></tr>"; 
      } 
      txt += "</table>" 
      document.getElementById("demo").innerHTML = txt; 
     } 
    }; 
    xmlhttp.open("GET", "generated.json", true); 
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xmlhttp.send("x=" + dbParam); 
} 
+0

はあなたのコードが動作しないのですか? – epascarello

+0

あなたの質問にいくつかのコードを記入してください。 – ppovoski

答えて

0

問題は、それがオブジェクトであり、あなたはそれをループしようとしているデバッガのライン

console.log(myObj) 

を見つけることは非常に簡単です。配列を保持しているオブジェクトのキーをループしたいとします。

console.log(myObj.books); 
0

あなたはオブジェクトに単一のプロパティbooksを反復処理の代わりに、プロパティが含まれている配列を反復しています。これに代えて

:このような

for (x in myObj) { 
    txt += "<tr><td>" + myObj[x].name + "</td></tr>"; 
} 

トライ何か:うまく

myObj.books.forEach((book) => { 
    txt += "<tr><td>" + book[sel.toLowerCase()] + "</td></tr>"; 
}); 
+0

データがロードされましたが、書籍名だけが表示されます。選択? – Matt

+0

@Matt返されたデータを保持するオブジェクトを作成します。名前はキー、ブックオブジェクトは値です。次に、TDをクリックすると、オブジェクト内の名前を検索し、他のプロパティを表示できます。 – Barmar

+0

@Matt - try 'book [sel.toLowerCase()]' - 答えが更新されました... htmlに小文字でオプション値を入れた場合、これは小文字にする必要はありません – Robbie

関連する問題