Javascript-上傳json文件並解析並將字符串值分配給通用變量，散點圖，按圖

Question

我正在對json數據執行任務。 我想在本地上傳文件，並希望將其數據分配給全局變量，以便可以在進一步的功能中使用該數據。

  <!DOCTYPE html>
<head>
  <!-- Plotly.js -->
   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
   <style>
   #result {
  display:block;
  width:400px;
  height:200px;
}

#import {
  margin:10px 0;
}


   </style>


</head>

<body>
  <div id="myDiv" style="width: 900px; height: 602px;"><!-- Plotly chart will be drawn inside this DIV --></div>
  <input type="file" id="selectFiles" value="Import" /><br />
  <button id="import">Import</button>
  <textarea id="result">

  </textarea>
  <script>
//for uploading json file
  document.getElementById('import').onclick = function() {
    var files = document.getElementById('selectFiles').files;
  console.log(files);
  if (files.length <= 0) {
    return false;
  }

  var fr = new FileReader();

  fr.onload = function(e) {
  console.log(e);
    var result = JSON.parse(e.target.result);
    var formatted = JSON.stringify(result, null, 2);
        document.getElementById('result').value = formatted;
  }

  fr.readAsText(files.item(0));

};

想要將直接JSON數據分配給文本，或在上述函數中進行字符串化后，然后全局分配給abz var。 這樣我就可以將該var用於其他功能

var text = ''
var abz1 = JSON.parse(text);
var abz = JSON.stringify(abz1);


      var rt1 = []
      var in1 = []
      var rt2 = []
      var in2 = []
      var rt3 = []
      var in3 = []
      var a = abz.groups[0].peaks[0].eic.rt
      var b = abz.groups[0].peaks[1].eic.rt
      var c = abz.groups[0].peaks[2].eic.rt

      //console.log(abz.groups[0].peaks[0].eic.rt)
      //console.log(abz.groups[0].peaks[0].eic.intensity)
    //  a.push(abz.groups[0].peaks[0].eic.rt)
  //    b.push(abz.groups[0].peaks[0].eic.intensity)
      //console.log(a)
    //  console.log(b)
      for (i=0;i < a.length;i++){
        rt1.push(abz.groups[0].peaks[0].eic.rt[i])
        in1.push(abz.groups[0].peaks[0].eic.intensity[i])
      }
      for (i=0;i < b.length;i++){
        rt2.push(abz.groups[0].peaks[1].eic.rt[i])
        in2.push(abz.groups[0].peaks[1].eic.intensity[i])
      }
      for (i=0;i < c.length;i++){
        rt3.push(abz.groups[0].peaks[2].eic.rt[i])
        in3.push(abz.groups[0].peaks[2].eic.intensity[i])
      }
        var trace1 = {
        x: rt1,
        y: in1,
        mode: 'markers'
        };
        var trace2 = {
        x: rt2,
        y: in2,
        mode: 'markers'
        };
        var trace3 = {
        x: rt3,
        y: in3,
        mode: 'markers'
        };

        var data = [ trace1, trace2, trace3 ];

        var layout = {
        title:'Intensity vs Retension Time - Scatter Plot',
        height: 600,
        width: 1200
        };

        Plotly.newPlot('myDiv', data, layout);
    </script>
  </body>

Answer 1

我不清楚您的問題是什么或代碼中不起作用的問題。 但我想您可能有回調問題。 加載文件的過程需要幾毫秒，直到它使用加載的文件數據調用指定的onload方法。 因此，這些語句在fr.readAsText();之后列出fr.readAsText(); 將在調用onload方法之前被調用。 結論：您想在加載數據之前使用它們。 因此，訣竅是將所有其他數據操作放入onload回調方法中。

fr.onload = function(e) {//this is a callback method that will be called, if the file is loaded
  console.log(e);
    var result = JSON.parse(e.target.result);

    //put here your plot code or call a function for using the result variable!!!
    //e.g.:
    var a = result.groups[0].peaks[0].eic.rt
  }

fr.readAsText(files.item(0));//this starts the loading process. Needs some milliseconds. and then it calls asynschrously the before specified onLoad-method

console.log("this output will be made BEFORE the file was loaded, cause the FileReader answers asynchron");

隨時提出其他問題。

Javascript-上傳json文件並解析並將字符串值分配給通用變量，散點圖，按圖

問題描述

1 個解決方案

解決方案1
1 已采納 2017-04-27 06:23:40

Javascript-上傳json文件並解析並將字符串值分配給通用變量，散點圖，按圖

問題描述

1 個解決方案

解決方案1 1 已采納 2017-04-27 06:23:40

解決方案1
1 已采納 2017-04-27 06:23:40