Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
[js] Datein von URL laden und als Array bearbeiten
#1
Hallo Zusammen,

ich bin neu hier in diesen Forum und hoffe das ich hier an der richtigen Stelle bin.
Ich muss in einen Plug-In Berechnungen anstellen. Leider biete mir diese Plug-in nicht die Möglichkeit direkt auf interne und externe Quellen zuzugreifen. Im genauen geht es zum eine Preisliste in .csv Format.
Die Idee war, die csv von einer URL herunterzuladen und in ein Array umzuwandeln, damit ich damit rechnen kann.
Eine CSV in Array schreiben funktioniert, Suche in Array auch, allerdings klappt das mit den Download nicht so.

Mein Code:

Code:
<head> </head>
<body>
  <form id="myForm">
    <input type="file" id="csvFile" accept=".csv" />
    <br />
    <input type="submit" value="Submit" />
  </form>
  <script>
    const myForm = document.getElementById("myForm");
    const csvFile = document.getElementById("csvFile");

function stringToArray(csvDatei) {
    var allTextLines = csvDatei.split(/\r\n|\n/);
    var headers = allTextLines[0].split(';');
    var lines = [];

    for (var i=1; i<allTextLines.length; i++) {
        var data = allTextLines[i].split(';');
        if (data.length == headers.length) {

            var tarr = [];
            for (var j=0; j<headers.length; j++) {
                tarr.push(data[j]);
            }
            lines.push(tarr);
        }
    }
    return(lines);
}

function getIndexOf(a,v) {
  var l = a.length;
  for (var k=0;k<l;k++) {
    if (a[k][0]==v) {
        return k;
      }
  }                     
  return false;
}

function downloadFile(urlData) {
    var aLink = document.createElement("a");
    aLink.href = urlData;
    document.body.appendChild(aLink);
    aLink.click();
    window.URL.revokeObjectURL(urlData);
    aLink.remove();
}

    myForm.addEventListener("submit", function (e) {
      e.preventDefault();
      const input = csvFile.files[0];
      const reader = new FileReader();
      reader.onload = function (e) {
        const text = e.target.result;
        //const text2 = downloadFile('URL');
        const data = stringToArray(text);
    
        var index;
        index = getIndexOf(data,"101400");
        document.writeln(index+"<br>");        
        document.writeln(data[index][0]);
        document.writeln(data[index][1]);
        document.writeln(data[index][2]);
      };
     
      reader.readAsText(input);
    });
  </script>
</body>

Ich habe die Zeile mit den Download Abruf deaktiviert. Unter Edge lud er zwar die Datei an der URL herunter, aber danach brach das Programm ab und arbeitet nicht weiter. Unter Firevox startete er garnicht.
Vielleicht hat einer eine Idee oder einen Gedankenanstoß, wie ich:
- eine csv von einer URL in ein Object umwandeln kann, oder oder.

Der Code ist nur in einen HTML eingebettet, damit ich es testen konnt und Rückmeldungen über die Console bekam.
Wie gesagt, es soll in einen Plug-in, wo ich leider keinerlei Rückmeldungen bekomme, nur noch einen Wert am Ende der Berechnung.

MfG

Sebastian
Zitieren
#2
Kannst du PHP benutzen?
Dann würde ich gleich am Anfang das mit PHP herunterladen (bei dir auf Server) und dann mit dem Script weiter arbeiten.
Sobald das auf dein Server ist, gibt es da auch keine Probleme mehr mit CORS und so .

document.writeln ist auch nicht mehr aktuell, das sollte man anders machen.
Hast du mal ein Link zu der CSV ?
Dann würde ich das mal selber testen .
Wenn der Link nicht gezeigt werden kann dann auch ok .

Eigentlich müsste man die csv auch mit Ajax holen können.
Wie gesagt, wenn du mal link hast, würde ich es selber testen
Zitieren
#3
Morgen Zusammen,

sorry das ich erst jetzt zurückscheibe. @admin  Ich habe mal deinen Ratschlag aufgegriffen und es mit PHP probiert. Leider scheint das Plug-in PHP nicht zu unterstützten. Befehle und Syntax werden in der Konsole als nicht definiert zurückgewiesen.
Naja, es ist halt ein geschlossenes System, wo ich nicht die genauen Spezifikatioen kenne. Leider ist der Support auch keine große Hilfe. Also muss ich den fustrierenden Weg des "try and error" gehen.

Hier ist mal ein Link zu einer Beispieldatei:
konfinox.de/media/mappe1.csv

Die HTML-Struktur wird später in der Berechnung nicht unterstützt. Ich habe es nur gewählt um die Funktion extern zu testen. Es wird nur noch eine Wert zurückgegeben.

MfG
Sebastian
Zitieren
#4
Kurze Info.
Melde mich nachher, hatte etwas viel Zutun gestern.
Werde das dann mal mit JS oder PHP versuchen.
Denke aber das PHP auf jeden Fall gehen wird.
Mit JS vielleicht sogar mit der fetch API
Zitieren
#5
So ganz weiß ich noch nicht was du vor hast .
Aber mit Php kannst du so die csv Datei hoöen und umwandeln
PHP-Code:
<?php

 $file
="http://konfinox.de/media/mappe1.csv";
$csvfile_get_contents($file);
file_put_contents('test.csv',$csv);
$array array_map("str_getcsv"explode("\n"$csv));
$json json_encode($array);
print_r($json);
?>
Und mit5 Javascript gibt es noch paar Probleme.
Will ich die direkt von dem Server holen , mault e rum wegen Mixed Content und CORS Kram.
Lade ich die CSV erst auf mein Server dann ist das kein Problem , doch das ist ja das Problem was du hast
Zitieren
#6
Man könnte dein Code auch so ändern , dann geht das glaube ich auch, was du vorhast
Code:
<body>
</body>
  <script>
    const myForm = document.getElementById("myForm");
    const csvFile = document.getElementById("csvFile");

function stringToArray(csvDatei) {
    var allTextLines = csvDatei.split(/\r\n|\n/);
    var headers = allTextLines[0].split(';');
    var lines = [];

    for (var i=1; i<allTextLines.length; i++) {
        var data = allTextLines[i].split(';');
        if (data.length == headers.length) {

            var tarr = [];
            for (var j=0; j<headers.length; j++) {
                tarr.push(data[j]);
            }
            lines.push(tarr);
        }
    }
    return(lines);
}

function getIndexOf(a,v) {
  var l = a.length;
  for (var k=0;k<l;k++) {
    if (a[k][0]==v) {
        return k;
      }
  }                     
  return false;
}

const text = `<?php echo file_get_contents('http://konfinox.de/media/mappe1.csv'); ?>`;
const data = stringToArray(text);
console.log(data);
var index;
index = getIndexOf(data,"101400");
document.writeln(index+"<br>");       
document.writeln(data[index][0]);
document.writeln(data[index][1]);
document.writeln(data[index][2]);
</script>
Zitieren
#7
oder hier , noch ein Link , falls du es anders machen wolltest
https://sebhastian.com/javascript-csv-to-array/
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste