mostrar contenido archivo csv con jquery al cargar pagina html

jakson316 · #1 (**permalink**) 21/07/2014, 15:44

buenas tardes.

Recientemente me estoy adentrando en este tema de Jquery, ya que una aplicacion web asi lo requiere.

Mi problema es sencillo ,,, necesito que al cargar un html , la pagina tome un archivo .csv que está alojado en cierta carpeta, lo procese y muestre su contenido en el html mediante una tabla-

estuve investigando y se como hacerlo seleccionando el archivo mediante un input tipo: file, así se como hacerlo, se llama a la funcion function handleFileSelect(evt) que responde a un evento clic al cargar el archivo;el problema es que de este modo no me sirve, ya que el archivo debe estar alojado en una carpeta y solo al abrir el html se debe visualizar el contenido del .csv en este.

Alguna idea o pagina de donde me pueda basar ???

de antemano , muchas gracias

tengo el js: <script type="text/javascript" src="js/jquery.csv-0.71.js"></script>

mi html está en una carpeta llamada proceso junto a el archivo .csv que contiene números separados por coma.

el ejemplo que encontré fue este, directamente de la pagina de jquery, pero asi no servir http://jquery-csv.googlecode.com/git/examples/file-handling.html

Djoaq · #2 (**permalink**) 21/07/2014, 16:07

Hola jakson316 ,

Creo que tienes un problema en la lógica que planteas :

Entiendo que ese archivo lo quieres cargar desde el servidor y por ende Jquery/Javascript son lenguajes del lado del cliente .

Lo que necesitas es usar algún lenguaje de servidor para ello .. tipo php y desde el cliente cuando dispare el evento parseas/procesas en el server y lo mandas de vuelta.

Normalmente se utilizan capas de persistencia para eso , por ejemplo mysql ...

Un saludo!

jakson316 · #3 (**permalink**) 21/07/2014, 16:45

Como estas amigo,,,

muchas gracias por interesarte en mi problema...

mira lo que intento es lo siguiente, continué investigando y encontré algo como esto,,, creo que esto es lo que necesito,,, pero no me corre,,,

alguna idea, es que soy muy nuevo en jQuery ?

Código HTML:

<html>
<head>

<title>Demo - CSV-to-Table</title>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.csv-0.71.js"></script>
<script type="text/javascript" src="js/jquery.csv2table-0.02-b-2.9.js"></script>


<script type="text/javascript">
  $(document).ready(function() {
    $('#datos').csv2table('./Libro1.csv');
     
      });

  

  
</script>
</head>

<body>
<div id="datos">
 
</div>

</body>

</html>

jakson316 · #4 (**permalink**) 21/07/2014, 16:47

para darle solucion, creo que es con la libreria de jquery llamada csv2table ,,,, creo que ahi está la clave,,,,

alguna ayudita?

Djoaq · #5 (**permalink**) 21/07/2014, 16:50

Y cual es ese error?

jakson316 · #6 (**permalink**) 21/07/2014, 16:56

Cita:

Iniciado por Djoaq

Y cual es ese error?

Hola, de nuevo muchas gracias por responder...

así como te lo escribo, me muestra como cuando uno intenta mostrar una imagen pero no se encuentra...

saludos

Djoaq · #7 (**permalink**) 21/07/2014, 17:02

Deberías usar las herramientas de depuración que ya integran casi todos los navegadores ...

Abre la consola de Javscript y ahí tendrás mas información de lo que esta sucediendo :

generalmente con Ctrl + Mayús + J .

jakson316 · #8 (**permalink**) 22/07/2014, 07:31

Que mas compañero,,,

hice lo que me dijiste pero el firebug y las demás opciones para desarrolladores en laos otros navegadores no me muestran error,

por ahi leí que funciona solo en IE y en mozilla, que en chrome necesita unos permisos especiales para tomar cualquier archivo , interpretarlo y mostrarlo en tabla que es lo que necesito.

El ejemplo lo tomé de esta pagina
http://www.geocities.ws/cell506/csv2table/test-en.htm
hasta el punto de reproducirlo tal cual localmente pero sigue sin correr. (usé las mismas librerias, la misma lógica del código fuente que ahí plantean, el mismo archivo que usan ahi y nada)

se ve simple , pero no se que hago mal

De antemano gracias

jakson316 · #9 (**permalink**) 28/07/2014, 13:41

buenas tardes..

alguna sugerencia ?

Gracias

fhederico · #10 (**permalink**) 28/07/2014, 14:29

Hola,

Normalmente una solucion que te diria es la que te han dicho en un inicio, y es que esto deberia procesarlo en el lado del Servidor, pero dado que ya lo estas haciendo con un csv2table, que hace lo mismo que requieres y que debo admitir que tampoco lo conocia, pues hice una pequeña prueba y resulto ser mas simple de lo que parece.

Lo descargue de aqui

https://code.google.com/p/leocenter/....9.js&can=2&q=

Si te lo descarga con extension TXT, se la quitas y le dejas la extension JS

Mi archivo prueba.csv contiene 3 filas con 1 sola columna con esto

Código HTML:

Ver original" " ,3,4,5,6,7,8,9,10,11,12,1,2
Test1,30,40,25,45,70,55,80,90,65,95,96,88
Test2,12,15,55,30,70,87,55,30,65,76,50,58
Test3,60,43,58,22,38,47,35,67,88,53,92,98

Mi archivo HTML es tan simple como esto

Código HTML:

Ver original<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
 
<body>
        <div id="view1"></div>
</body>
 
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery.csv2table-0.02-b-2.9.js"></script>
<script>
    $(document).ready(function() 
    {
      $('#view1').csv2table('prueba.csv');
    });
</script>
</html>

Fijate que la ruta del archivo es tal cual, si esta en el mismo directorio que tu archivo HTML, si esta en otro lugar deberas poner la ruta exacta desde tu archivo HTML hasta este, para pruebas y ver que realmente funciona te recomiendo primero dejarlo en el mismo directorio.

Y listo, funciona...

Por ultimo, el archivo "jquery.csv2table-0.02-b-2.9.js" contiene rutas a imagenes que NO vienen, deberas modificar el archivo y agregarlas manualmente por unas que tu decidas.

Por ejemplo viene

Código HTML:

Ver originalloadImg  : (new Image()).src='../economia/js/img/ajax-loader.gif',  //Dafault loading IMG

Obviamente tu no tendras un directorio "economia" y menos una imagen con un nombre asi, pero lo modificas y adaptas a tus necesidades

Saludos