Restituzione tabella in js da file json con ciclo for

**LordMephidross** · 15-08-2012, 12:32

Qualcuno mi spiega dove sbaglio?

books.js (nella riga 13 DreamWeaver mi trova un errore di sintassi, che io non trovo)

codice:

// JavaScript Document

function scarica() {
	oXHR = new XMLHttpRequest();
	oXHR.open("GET", "books1.json", true);
	oXHR.onreadystatechange = function() {
		if (oXHR.readyState == 4) {
			var json = oXHR.responseText;
			var books = eval(json);
			oXHR.send(null);
			var result="";
			for (var i = 0; i < books.lenght; i++) {
				result += "<tr><td>" books[i].title + "</td>" +
				"<td> (" + books[i].isbn + ")</td>" +
				"td>" books[i].pages + "pp</td></tr>";
			}
		}
	}
	document.getElementById("books").innerHTML = result;
	oXHR.send(null);
}

books.php

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
	<script type="text/javascript" src="books.js"></script>
</head>

<body>
	<h1>Elenco libri</h1>
    <div id="books"></div>
    


    	<a href="javascript:scarica()" id="collegamento">
            Visualizza elenco
        </a>
    </p>
</body>
</html>

books1.json

codice:

[
	{
		"isbn":"9788850326662",
		"title":"C Pocket",
		"author":"Enrico Amedeo",
		"pubdate":"10/2007",
		"pages":"240",
	},
	{
		"isbn":"9788850326273",
		"title":"UML Pocket",
		"author":"Enrico Amedeo",
		"pubdate":"4/2007",
		"pages":"216",
	},
	{
		"isbn":"9788850323913",
		"title":"C# Pocket",
		"author":"Enrico Amedeo,Giuseppe Marchi",
		"pubdate":"11/2005",
		"pages":"240",
	}
]

**lucavizzi** · 15-08-2012, 13:08

length si scrive con la acca finale..

**LordMephidross** · 15-08-2012, 14:04

Ok ho corretto la svista.. Però adesso mi restituisce

Elenco libri

NaNC# Pocket
(9788850323913)

Il codice è

codice:

// JavaScript Document

function scarica() {
	var oXHR = new XMLHttpRequest();
	oXHR.open("get", "books1.json", false);
	oXHR.send(null);
	var json = oXHR.responseText;
	var books = eval(json);
	var html = "";
	for (i= 0; i < books.length; i++) {
		html =+ "<tr><td>" + books[i].title + "</td>" +
		"<td> (" + books[i].isbn +")</td>" +
		"<td>" + books[i].pages + "pp</td></tr>";
	}
	document.getElementById("books").innerHTML =
		"<table width=\"100%\">" + html + "</table>";
}

**LordMephidross** · 15-08-2012, 14:16

Ho risolto, c'era un + di troppo.. Però non mi esegue il ciclo for

**carlomarx** · 15-08-2012, 19:53

Allora, per prima cosa correggi il file JSON, è sintatticamente scritto male, ci sono delle virgole di troppo. Usa questo:

codice:

[
	{
		"isbn":"9788850326662",
		"title":"C Pocket",
		"author":"Enrico Amedeo",
		"pubdate":"10/2007",
		"pages":"240"
	},
	{
		"isbn":"9788850326273",
		"title":"UML Pocket",
		"author":"Enrico Amedeo",
		"pubdate":"4/2007",
		"pages":"216"
	},
	{
		"isbn":"9788850323913",
		"title":"C# Pocket",
		"author":"Enrico Amedeo,Giuseppe Marchi",
		"pubdate":"11/2005",
		"pages":"240"
	}
]

Seconda cosa. Ti ho corretto la funzione, mi sono anche rinominato le variabili per raccapezzarmi, ma se vuoi puoi rimetterti i nomi di prima...

codice:

function scarica() {
	var oReq = new XMLHttpRequest();
	oReq.open("get", "books1.json", false);
	oReq.send(null);
	var aBooks = JSON.parse(oReq.responseText), sHTML = "<table width=\"100%\">";
	for (var nItem = 0; nItem < aBooks.length; nItem++) {
		sHTML += "<tr><td>" + aBooks[nItem].title + "</td>" +
		"<td> (" + aBooks[nItem].isbn +")</td>" +
		"<td>" + aBooks[nItem].pages + "pp</td></tr>";
	}
	sHTML += "</table>";
	document.getElementById("books").innerHTML = sHTML;
}

Ultima cosa e anche la più importante. Se non hai motivi veri per usare ajax in modo SINCRONO (e non mi sembra tu ne abbia in questo caso), usalo in modo ASINCRONO. Ti correggo la funzione di conseguenza. Se puoi usa questa o qualcosa di simile.

codice:

function popolaTabella () {
	var aBooks = JSON.parse(this.responseText), sHTML = "<table width=\"100%\">";
	for (var nItem = 0; nItem < aBooks.length; nItem++) {
		sHTML += "<tr><td>" + aBooks[nItem].title + "</td>" +
		"<td> (" + aBooks[nItem].isbn +")</td>" +
		"<td>" + aBooks[nItem].pages + "pp</td></tr>";
	}
	sHTML += "</table>";
	document.getElementById("books").innerHTML = sHTML;
}

function scarica () {
	var oReq = new XMLHttpRequest();
	oReq.open("get", "books1.json", true);
	oReq.onload = popolaTabella;
	oReq.send(null);
}

**LordMephidross** · 15-08-2012, 20:29

Grande! Ora funziona

posso chiederti una cortesia? Suppongo tu abbia capito che ho preso i codici da un libro, però da come hai visto son risultati sbagliati, potresti gentilmente affiancare dei commenti ai comandi? Se non ti è di disturbo! È che sto imparando ora e vorrei evitare di usare codici presi così.. Tipo che ne so, indicarmi la sintassi della funzione in modo tale che possa salvarmela come "pattern", però capendo il tutto

**carlomarx** · 16-08-2012, 13:35

Fai prima a domandarmi tu cosa non ti è chiaro. Io ho praticamente lasciato invariata la struttura che avevi costruito tu.

**LordMephidross** · 16-08-2012, 13:54

Dunque, perché hai usato oReq invece di oXHR? E perché hai usato JSON.parse invece di responseText?

**carlomarx** · 16-08-2012, 14:36

Originariamente inviato da LordMephidross
Dunque, perché hai usato oReq invece di oXHR?

Ahaha niente, è solo che avevo una funzione già pronta che usava quel nome e ho fatto copiaincolla. Non cambia nulla il nome che scegli per le variabili

Originariamente inviato da LordMephidross
E perché hai usato JSON.parse invece di responseText?

Perché ho usato JSON.parse() invece di eval() vorrai dire! Il metodo JSON.parse se guardi bene è applicato alla proprietà responseText, esattamente come sarebbe stato eval. Il motivo è molto semplice: usare

codice:

JSON.parse(this.responseText);

invece di

codice:

eval("(" + this.responseText + ")");

è mooooolto meno dispendioso di risorse, meno pericoloso, oltre al fatto che è stato inventato apposta per non utilizzare eval per il semplice parsing di un file json.

eval() è una risorsa importante di JavaScript, ma va usata con molta parsimonia. Devi pensare che tutte le volte che l'interprete (il browser) durante il parsing dello script (ovvero durante la prima lettura dello script, prima ancora che si chieda a cosa serva lo script) incontra eval() subito crea un'enorme spazio di memoria da dedicare a eval(). Dopodiché fa partire lo script ed eval() entrerà in gioco al momento opportuno. Vedi tu se vale la pena in questo caso

**LordMephidross** · 16-08-2012, 15:07

Perfetto chiarissimo

E se invece di richiamare un file JSON dichiarato chiaramente, volessi richiamare un $file.json? Ad esempio, associare un file JSON per ogni utente e richiamarlo in base ai dati del login? Si complica eccessivamente? Se sì, ci sono soluzioni più efficienti per queste situazioni? Ad esempio utilizzare PHP per nascondere i codici nella sorgente diventa d'obbligo no?

E se invece di leggere i dati del login, volessi utilizzare lo stesso sistema ma per link multipli, da utilizzare come schede? Così per intenderci http://www.barelyfitz.com/projects/tabber/ però lì usa prototype e del testo predefinito, non un parsing. Io vorrei evitare le librerie perché voglio sapere cosa sto facendo

Magari uno schema della sintassi da usare dove mi dici come riempire sarebbe grandioso

Discussione: Restituzione tabella in js da file json con ciclo for

Strumenti discussione

Ricerca discussione

Visualizza

Restituzione tabella in js da file json con ciclo for

Permessi di invio