Javascript - Upload JSON-Datei und analysieren und zuweisen Zeichenfolge Wert zu einer universellen Variablen, Streudiagramm, plotly

Question

Ich führe eine Aufgabe auf JSON-Daten. Ich möchte die Datei lokal hochladen und ihre Daten einer globalen Variablen zuweisen, damit ich diese Daten in meinen weiteren Funktionen verwenden kann.

möchten Sie entweder direkte JSON-Daten zu Text zuweisen oder nach stringify in der obigen Funktion dann zu abz var global. so dass ich diese var für weitere Funktionen verwenden kann

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

Ich bin nicht klar, was ist Ihre Frage oder was nicht funktioniert in Ihrem Code. Aber ich denke du hast vielleicht ein Rückruf Problem. Ihr Prozess, der die Datei lädt, benötigt einige Millisekunden, bis sie die angegebene Methode onload mit den geladenen Dateidaten aufruft. So werden die Anweisungen, die nach fr.readAsText(); auflisten, VOR der onload Methode aufgerufen werden. Fazit: Sie möchten die Daten vor dem Laden verwenden. Der Trick besteht also darin, alle weiteren Datenaktionen in die Callback-Methode onload zu setzen.

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"); 

Fühlen Sie sich frei, weitere Fragen zu stellen.