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>"; }