Anzeigen von Daten aus Textdatei mit jQuery

Question

Ich muss die Daten aus einer Datei, datei.txt, das 400 Zeilen anzuzeigen/anhängen, die in folgendem Format sind:

http://www.exemple.com/img1.jpg, title1, subtitle1, description1; 
http://www.exemple.com/img2.jpg, title2, subtitle2, description2; 
http://www.exemple.com/img3.jpg, title3, subtitle3, description3; 
http://www.exemple.com/img4.jpg, title4, subtitle4, description4; 
http://www.exemple.com/img5.jpg, title5, subtitle5, description5; 

Ich weiß, wie anhängen 1 Zeile in eine <div>. Aber hier haben wir 4 Elemente in jeder Zeile. Ich muss sie in 4 Elemente verwandeln, die ich verwenden könnte, um sie anzuzeigen.

Ich verwende dieses jQuery-Snippet, das für jede Zeile mit 1 Element funktioniert und am Ende der Zeile aufteilt.

$.get('file.txt', function(data) { 
    //var fileDom = $(data); 

    var lines = data.split("\n"); 

    $.each(lines, function(n, elem) { 
    $('#display').append('<div><img src="' + elem + '"/></div>'); 
    }); 
}); 

Die HTML-Ausgabe wäre:

$('#display').append('<div class="container"><div class="left"><img src="' + src + '"/></div><div class="right">' + title + '<br/>' + subtitle + '<br/>' + description + '</div></div>'); 

Dank für Einsichten!

Answer 1

konnte Sie split ein zweites Mal: ​​

$.each(lines, function(n, line) { 
    // Breaks up each line into ['src', 'title', 'subtitle', 'description'] 
    var elements = line.split(', '); 
    $('#display').append('<div><img src="' + elements[0] + '"/></div>'); 
}); 

Answer 2

Sie auf der ' ' aufspalten:

$.get('file.txt', function(data) { 
    //var fileDom = $(data); 

    var lines = data.split("\n"); 

    $.each(lines, function(line, elem) { 
     var parts = line.split(', '), // this splits the line into pieces 
      src = parts[0], 
      title = parts[1], 
      subtitle = parts[2], 
      description = parts[3].slice(0, -1); // remove the ';' from the description 

     // at this point, you have the pieces of your line and can do whatever 
     // you want with the data 

     $('#display').append('<div><img src="' + src + '"/></div>'); 
    }); 
}); 

Answer 3

Ihre Fehler auf dem Weg befindet Sie spalten ...

Sie müssen tun Sie etwas, (.when(file) sollte ersetzt werden mit .get('file.txt'):

var file = "http://www.exemple.com/img1.jpg, title1, subtitle1, description1; http://www.exemple.com/img2.jpg, title2, subtitle2, description2; http://www.exemple.com/img3.jpg, title3, subtitle3, description3; http://www.exemple.com/img4.jpg, title4, subtitle4, description4; http://www.exemple.com/img5.jpg, title5, subtitle5, description5;"; 
 

 
function AppendImagesCtrl($) { 
 
    $ 
 
// .get('file.txt') 
 
    .when(file) // this is a fake 
 
    .then(file => file.split(/; ?\n? ?/)) 
 
    .then(lines => lines.map((line, i) => { 
 
    line = line.trim(); 
 
    if(!line) { return ""; } 
 
    
 
    let [ 
 
     img, title, subtitle, description 
 
    ] = line.split(/, ?n? ?/); 
 
    
 
    return `<article id="${(i + 1)}"> 
 
<h1>${title}</h1> 
 
<img src="${img}" alt="${img}" /> 
 
</article>`; 
 
    })) 
 
    .then(view => $('#example').append(view)) 
 
    ; 
 
} 
 

 
window.jQuery(document).ready(AppendImagesCtrl);

img { width: 100px; height: 50px; background: cyan; } 
 
article { padding: 5px 10px; background: lightseagreen; margin-bottom: 5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="example"></div>