CSV Liste i Html

Kada radimo sa web stranicama, radimo često i sa povećim listama.
Te su liste obično veličine od 20-100 itema i to su, na primjer, liste adresa, dokumenata, slika i slično.

Listu treba oblikovati da se uklopi u vaše web stranicu. Što znači da
će lista najčešće biti UL element. Podatke treba ili unositi jedan po
jedan, ako radite u WordPress builderu ili kao HTML ručno rezuckati u
vašem omiljenom tekst editoru. Problem je u tome što ako dođe do
izmjena na stranici, prisiljeni ste opet iznova gubiti vrijeme u
builderu ili tekst editoru.

Rješenje je, da listu odmah u startu jednostavno pretvorite u CSV listu.

Naprimjer, imamo listu trgovina i njihovih podataka. Listu ćemo složiti
ovako:

naziv, grad, ulica, ponsub, ned
Trgovina 1, Zagreb, Nova Ulica 33., 08-22, 08-13
Trgovina 2, Rijeka, Nova Ulica 33., 08-22, 08-13
Trgovina 3, Spilt, Nova Ulica 33., 08-22, 08-13
Trgovina 4, Delnice, Nova Ulica 33., 08-22, 08-13

Za konverziju ćemo koristiti csvtojson nodejs module.
Modul će nam prebaciti csv listu u json format ili js array.

Modul dodajemo u browser sa:

<script src="https://cdn.rawgit.com/Keyang/node-csvtojson/d41f44aa/browser/csvtojson.min.js"></script>

Sam kod izgleda ovako:

var str = `naziv, grad, ulica, ponsub, ned
Trgovina1, Zagreb, Nova Ulica 33, 08-22, 08-13
Trgovina2, Rijeka, Nova Ulica 33, 08-22, 08-13
Trgovina3, Spilt, Nova Ulica 33, 08-22, 08-13
Trgovina4, Delnice, Nova Ulica 33, 08-22, 08-13`; 
    
    
csv({
    colParser:{
        "naziv":"string",
        "grad":"string",
        "ulica":"string",
        "ponsub":"string",
        "ned":"string",
    },
    checkType:true
})
.fromString(str)
.then(function(result){
    //result je array
    console.log(result);
})

Sada možemo listu oblikovati u bilo kakvu grupu HTML elementa ili
konvertirati u JSON i pohraniti u datoteku.

Cijeli html dokument:

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<title>csvtojson</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<body>

<h1>Stis' na F12!</h1>
<p>Lista je u console.log-u!</p>

</body>
</html>

<script src="https://cdn.rawgit.com/Keyang/node-csvtojson/d41f44aa/browser/csvtojson.min.js"></script>
<script>

 var str = `naziv, grad, ulica, ponsub, ned
Trgovina1, Zagreb, Nova Ulica 33, 08-22, 08-13
Trgovina2, Rijeka, Nova Ulica 33, 08-22, 08-13
Trgovina3, Spilt, Nova Ulica 33, 08-22, 08-13
Trgovina4, Delnice, Nova Ulica 33, 08-22, 08-13`; 
        
csv({
    colParser:{
        "naziv":"string",
        "grad":"string",
        "ulica":"string",
        "ponsub":"string",
        "ned":"string",
    },
    checkType:true
})
.fromString(str)
.then(function(result){
    console.log(result);
})

</script>

PHP

Na server strani imamo league/csv, koji instaliramo sa:

composer require league/csv

league/csv je mala biblioteka koja je po mogućnostima slična kao js ‘csvtojson’.

<?php

require_once __DIR__ ."/vendor/autoload.php";

use League\Csv\Reader;

$csv = Reader::createFromPath('test.csv', 'r');
$csv->setHeaderOffset(0);

$header = $csv->getHeader(); 
$records = $csv->getRecords(); 

foreach ($csv as $record) 
{   
    print_r($record);
    echo "<br>";
}

Odgovori

Vaša adresa e-pošte neće biti objavljena.

Previous post Leaflet – odlična zamjena za Google Maps iframe
Next post Kako koristiti Sqlite preko PHP PDO sučelja?