Javascript-上传json文件，解析字符串值并将其分配给通用变量、散点图和绘图
我正在对json数据执行一项任务。我希望本地上传文件，并希望将其数据分配给一个全局变量，以便在我的后续函数中使用该数据Javascript-上传json文件，解析字符串值并将其分配给通用变量、散点图和绘图,javascript,json,plotly,Javascript,Json,Plotly,我正在对json数据执行一项任务。我希望本地上传文件，并希望将其数据分配给一个全局变量，以便在我的后续函数中使用该数据 <!DOCTYPE html> <head> <!-- Plotly.js --> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <style> #result { display:block;
<!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));
};
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>
我不清楚您的问题是什么，或者代码中有什么不起作用。 但我想你可能有回拨问题。加载文件的进程需要几毫秒，直到它使用加载的文件数据调用指定的onload方法为止。因此，在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");