2

クライアント側の JS を使用して、URL にある CSV ファイルからデータを開いて (配列に) 抽出することはできますか? もしそうなら、誰かがこれを行う方法を説明してください.JQueryの使用方法を理解するのに苦労しているので、例はcsvを開くことがないようです.csvを変数としてのみ使用します(取得方法を知っているという意味で)そもそもそれをコードに入れます-私はしません）

気象データをブラウザー内の JS 配列に取得する必要があります。そこから風速と風向を示すゲージを生成します。

私の CSV は現在、http: //mrmoneymotivator.com/windspeed/windspeed.csvでホストされており、ダミー データが含まれています。

私は現在、ゲージのデータの最初の行を取得しようとしています (これは定期的に更新されます)。これが機能したら、配列の配列を使用して履歴データをチャートに表示します。

よろしくお願いします！

4

2 に答える 2

4

CSV と JavaScript を含むドキュメントが同じオリジンから提供されている場合は、これを行うことができます。(詳細:同一生成元ポリシー)

XMLHttpRequestobjectを使用してデータを取得すると、テキストとして返されます。次に、CSV データの複雑さに応じて、String#split( spec , MDN ) を使用して行 (行)String#splitの配列を取得し、ループで再度使用して各行の値の配列を取得するのと同じくらい簡単です。 . 私が「複雑さに応じて」と言ったのは、CSV は改行やコンマを含む可能性のある引用符付きのセルを含む、人々が思っているよりも複雑な形式だからです。ただし、データがこれらの機能を使用していない場合は、数回のsplit呼び出しでうまくいきます。データがより多くの機能を使用する場合は、完全な RFCに従って解析を処理するライブラリを見つける必要があるかもしれません。

完全な例を次に示します。ライブソース

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Load CSV</title>
</head>
<body>
  <script>
    (function() {
      
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = handleStateChange;
      xhr.open("GET", "http://jsbin.com/ocuqog/1");
      xhr.send();
      display("Request sent");
      
      function handleStateChange() {
        if (xhr.readyState == 4 &&
            xhr.status >= 200 &&
            xhr.status < 300) {
          display("Got response");
          showData(xhr.responseText);
        }
      }
      
      function showData(data) {
        var rows = data.split(/\s+/);
        var rowNum;
        var cells;
        var cellNum;
        
        for (rowNum = 0; rowNum < rows.length; ++rowNum) {
          cells = rows[rowNum].split(",");
          display("row " + rowNum +
                  " has " + cells.length + " values(s)");
          display("row " + rowNum + "'s first value is " +
                  cells[0]);
        }
      }
      
      function display(msg) {
        var p = document.createElement('p');
        p.innerHTML = String(msg);
        document.body.appendChild(p);
      }
    })();
  </script>
</body>
</html>
于 2013-07-08T14:39:37.123 に答える
1
  1. CSVファイルをAjaxする

ライブラリを使用するか（JS CSVだけを検索できると確信しています:)）

また

'\n' で分割して行を取得し、',' で再度分割して値を取得します ...
注 : CSV で値を " マークに入れることがあるので、準備ができていることを確認してください。

https://code.google.com/p/jquery-csv/にあるライブラリを使用します。

<script type="text/javascript" src="jquery-csv.js"></script> 
<script type="text/javascript">
$.ajax({
   url: "http://www.example.com/report.csv",
   cache: false
}).done(function( csvData ) {
     var arr2D = $.csv.toArrays(input);
});
</script>

注: 未テスト!

于 2013-07-08T14:42:52.410 に答える