Affichage de fichier CSV dans le HTML

J'essaie d'importer un local de fichier CSV avec des rubriques dans un fichier HTML local, qui va alors s'afficher comme un tableau dans un navigateur.

Je n'ai pas été à l'apprentissage HTMLand JavaScript pour longtemps, donc je ne sais pas beaucoup au sujet de l'importation et de la conversion. Ce que j'ai besoin de quelques conseils ou peut-être un script de base décrivant le type de la fonction dont j'ai besoin. Explications et conseils sont les bienvenus!

C'est un exemple de fichier csv:

    heading1,heading2,heading3,heading4,heading5
    value1_1,value1_2,value1_3,value1_4,value1_5
    value2_1,value2_2,value2_3,value2_4,value2_5
    value3_1,value3_2,value3_3,value3_4,value3_5
    value4_1,value4_2,value4_3,value4_4,value4_5
    value5_1,value5_2,value5_3,value5_4,value5_5

C'est de cette façon que je veux l'afficher:

http://jsfiddle.net/yekdkdLm

les locaux, tu veux dire un fichier CSV sur le serveur, non?
non, je veux dire un simple fichier texte csv dans le même dossier que le fichier html, je suis encore un peu d'apprentissage, mais tous les endroits que j'ai regardé n'ont pas vraiment expliqué ce qu'ils ont fait ou comment alors que l'accès des données
Ici Vous pouvez trouver exemple de l'accès aux fichiers locaux à partir du navigateur. Vous avez juste besoin plus tard pour écrire du code pour les diviser et à la création de la table.
Mmm que la page est assez bon, il semble que il ya beaucoup de façons de le faire, mais ils sont tous assez longwinded
est correcte. Avec le travail sur un fichier local, votre machine est "le serveur", même si ce n'est pas déployé n'importe où. Si c'est sur un serveur, ou tout simplement un raw fichier HTML dans un dossier sur votre machine, avec le CSV assis juste à côté d'elle sont sans conséquence (autres que l'URL d'accès à dit CSV).

OriginalL'auteur Roy Davies | 2014-09-05

0

Récupérer un fichier externe.

Vous devez utiliser xmlHttpRequest pour cela. Simplifiée à l'aide de jQuery (inclure la librairie jQuery).

Vous devrez exécuter le fichier HTML dans un local serveur comme Apache,
les navigateurs tels que google Chrome ne marche pas permettre xmlHttp pour file:// url.
```
  $.ajax({
    type: "GET",
    url: "words.txt",
    dataType: "text",
    success: parseTxt
  });
```
Utiliser un rappel réussi à traiter les données

parseTxt est la fonction à laquelle le contenu du fichier est en lecture et passed. Vous pouvez ensuite écrire le code dans parseTxt pour traiter le texte comme une chaîne de caractères.
```
function parseTxt(text){
  var rows=text.split('\n');

  //for each row
  //cols=rows[i].split(',');
}
```
Cela devrait être suffisant pour commencer, je suppose.

Comment lire un fichier texte à partir du serveur à l'aide de JavaScript?

Vous pouvez même essayer de répondre à la question ci-dessus par Shadow Wizard à l'aide de iframes.

Un RAW XMLHttpRequest peut être faite sans jQuery comme le montre ici

Ahhh ce qui semble bon, je vais essayer

OriginalL'auteur sabithpocker
2

Vous pouvez mettre en œuvre l'affichage des données au format csv en html à l'aide de d3.js

Ici l'exemple le plus simple:
http://bl.ocks.org/ndarville/7075823

OriginalL'auteur Piyush Patel
0

Je ne pense pas qu'il y est une solution triviale. Une insistance sur l'utilisation de JavaScript côté client rend cette tâche plus difficile que de faire le traitement sur le côté serveur et tout simplement de servir le HTML.

Vous devez d'abord utiliser JavaScript pour récupérer le fichier à partir du serveur, de la façon la plus simple de le faire est avec la bibliothèque jQuery. Ensuite, vous devez prendre les données et de construire le code HTML dans le document existant, encore une fois, jQuery simplifie cette pour vous.

Si vous êtes encore en apprentissage, je vous recommande de sauter le premier bit, et il suffit de créer une variable JavaScript avec les données déjà en elle. De cette façon, vous pouvez écrire le code pour générer la table, faire fonctionner, puis revenir à vous soucier de comment vous auriez fait chercher qu'à partir du serveur à l'aide d'AJAX.

Alternative, regardez à l'aide d'un langage côté serveur comme PHP qui permettra d'intégrer les données dans la page avant de l'envoyer au navigateur. Sans connaître plus de détails, cela semblerait plus logique de la solution.

Ahh je vois, pas étonnant que je ne pouvais pas trouver une solution simple. Est-ce le cas de tous les fichiers de ce type?
Ce n'est pas le type de fichier qui provoque la difficulté. C'est parce que le fichier CSV est sur le serveur, mais le JavaScript est en cours d'exécution sur votre machine locale. Vous avez besoin d'AJAX pour récupérer le fichier à partir du serveur, quel que soit le format du fichier.

OriginalL'auteur Philip Wattis

Vous avez besoin d'utiliser le javascript(jquery) ou php
C'est le code pour ouvrir avec php et récupérer les valeurs dans un tableau

<table>
<tr>
    <td>Header 1</td>
    <td>Header 2</td>
</tr>
<?php
    $fp = fopen ( "file.csv" , "r" );
    while (( $data = fgetcsv ( $fp , 1000 , "," )) !== FALSE ) {
        $i = 0;
        echo "<tr>";
        foreach($data as $row) {
           echo "<td>" . $row . "</td>";
           $i++ ;
        }
        echo "/<tr>";
    }
    fclose ( $fp );
    ?>
</table>

OriginalL'auteur Javier

<div id="CSVTable"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//jquerycsvtotable.googlecode.com/files/jquery.csvToTable.js"></script>

<script>
$(function() {
  $('#CSVTable').CSVToTable('your_csv.csv');
});
</script>

vous pouvez utiliser jquery.csvToTable.js pour afficher un fichier csv dans html

OriginalL'auteur Ankit Agrawal

0

J'ai utilisé PHP pour parser le fichier CSV sur le côté serveur, puis le format de sortie comme le HTML. Le long du chemin, il transforme les valeurs uniques dans les colonnes du CSV dans unique des valeurs de filtre pour affiner le résultat.

OriginalL'auteur Shawn DeWolfe

Vous devez vous connecter pour publier un commentaire.