2017-09-30 21 views
0

PapaParseを使用してCSVファイルを読み込み、HTMLリストとして出力しようとしています。私はこれまでこれを持っています...CSVファイルを読み込んで結果をHTMLリストとして出力

document.getElementById('txtFileUpload').addEventListener('change', upload, false); 

function upload(evt) { 

    var data = null; 
    var file = evt.target.files[0]; 
    var reader = new FileReader(); 
    reader.readAsText(file); 
    reader.onload = function(event) { 
     var csvData = event.target.result; 
     var data = Papa.parse(csvData, {header : true}); 

     console.log(data.data); 

     var arrayLength = data.data.length; 
     console.log(arrayLength); 
     for (var i = 0; i < arrayLength; i++) { 
      console.log(data.data[i]); 
      $("#header").append("<li>" + data.data[i] + "</li>"); 
     } 

    }; 
    reader.onerror = function() { 
     alert('Unable to read ' + file.fileName); 
    }; 

} 

これは動作しますが、各リスト項目は[オブジェクトオブジェクト]として出力されます。どこが間違っていますか?

マイコンソール出力は次のようになります...

enter image description here

答えて

2

あなたはオブジェクトの配列を持っている、あなたは

"<li>" + data.data[i] + "</li>" 

を行うときので、これらのオブジェクトを文字列に変換されています。プレーンオブジェクトのtoStringの表現は[object Object]です。

"<li>" + data.data[i].apple + "</li>" 

またはこのオブジェクトのJSON表現を使用します:

"<li>" + JSON.stringify(data.data[i]) + "</li>" 
あなたの質問あなたは、オブジェクトの apple場を得ることができるいずれかのように、それは、あなたが期待する何をすべきか不明だから

関連する問題