JS array weergeven in andere pagina

Marina janssen op 28/01/2022 23:03:36

.....maar ik kan geen php gebruiken (alleen html, css en javascript).

Dan kan je dus geen databases gebruiken, en ook niet zomaar in bestanden schrijven.

Onderzoek of het in deze volgorde lukt.

1. javascript json encode array
2. javascript base64 encode json
3. stuur url met parameters
4. javascript parse url parameters
5. javascript base64 decode to json
6. javascript parse json to array

Heulveul resultaten als je elke regel googlet.

[size=xsmall]Toevoeging op 29/01/2022 09:13:18:[/size]

Hier een uitwerking van bovengenoemde volgorde.

 <script>
// array naar json
const myArray = {id1: 100, id2: 200, "tag with spaces": 300};
console.log( myArray );
const jsonArray = JSON.stringify( myArray );
console.log( jsonArray );

// json naar base64
var encodedData = btoa(jsonArray);
console.log( encodedData );

// verzend url
let url = 'https://www.example.com?name=' + encodedData + '&name=n2';
console.log( url );

// parse url
let params = (new URL(url)).searchParams;
params.get('name');
console.log( params.get('name') );

// decode base64 naar json
const decodedData = atob(params.get('name'));
console.log( decodedData );

// json naar array
const myArr = JSON.parse(decodedData);
console.log( myArr );
</script>

[size=xsmall]Toevoeging op 29/01/2022 09:53:15:[/size]

Deze is ook handig om erachter te komen wat de url van de pagina is.

https://www.tutorialrepublic.com/faq/how-to-get-the-current-url-with-javascript.php

Zit tussen 3 en 4.

[size=xsmall]Toevoeging op 29/01/2022 19:16:19:[/size]

Hier een uitgebreide versie hoe je een array van de ene pagina naar de andere pagina kan brengen.

De versturende pagina : json_parseurl.html

Sommige code is dubbelop.

<script>
// array naar json
const myArray = {id1: 100, id2: 200, "tag with spaces": 300};
//console.log( myArray );

const jsonArray = JSON.stringify( myArray );
//console.log( jsonArray );
document.write( jsonArray + '<br /><br />' );

// json naar base64
var encodedData = btoa( jsonArray );
//console.log( encodedData );
document.write( encodedData + '<br /><br />' );

// verzend url
let url = 'https://www.example.com?name=' + encodedData + '&name=n2';
//console.log( url );
document.write( url + '<br /><br />' );

// parse url
let params = ( new URL( url ) ).searchParams;
params.get('name');
//console.log( params.get('name') );
document.write( params.get( 'name' ) + '<br /><br />' );

// decode base64 naar json
const decodedData = atob( params.get( 'name' ) );
//console.log( decodedData );
document.write( decodedData + '<br /><br />' );

// json naar array
const myArr = JSON.parse( decodedData );
//console.log( myArr );

</script>

<hr />

<h4>Huidige document</h4>

<script>
function getURL() {
	return window.location.href;
}

document.write( getURL() + '<br /><br />' );

let param = ( new URL( getURL() ) ).searchParams;
var name = param.get('name');

if ( param.get('name') !== null && name !== '' )
{
	//console.log( param.get('name') );
	document.write( param.get( 'name' ) + '<br /><br />' );

	const decoded = atob( param.get('name') );
	//console.log( decoded );
	document.write( decoded + '<br /><br />' );

	const myJSON = JSON.parse( decoded );
	//console.log( myJSON );
	document.write( 'Object lengte = ' + Object.keys(myJSON).length + '<br /></br />' );

	for ( var key in myJSON )
	{
		document.write( key + ' - ' + myJSON[key] + '<br />' );
	}
	document.write( '<p><a href="?name=">Opnieuw</a></p>' );
} else {
	document.write( '<p>Parameter ontbreekt of heeft geen waarde<br />' );
	document.write( 'Probeer <a href="json_parseto.html?name=' + encodedData + '">Deze link</a></p>' );
}
</script>

De ontvangende pagina : json_parseto.html

<h4>Huidige document</h4>

<style>
table {border-collapse: collapse;}
td {padding: 0.500em;}
</style>
<script>
function getURL() {
	return window.location.href;
}

document.write( getURL() + '<br /><br />' );

let param = ( new URL( getURL() ) ).searchParams;
var name = param.get('name');

if ( param.get('name') !== null && name !== '' )
{
	//console.log( param.get('name') );
	document.write( param.get( 'name' ) + '<br /><br />' );

	const decoded = atob( param.get('name') );
	//console.log( decoded );
	document.write( decoded + '<br /><br />' );

	const myJSON = JSON.parse( decoded );
	//console.log( myJSON );
	document.write( 'Object lengte = ' + Object.keys(myJSON).length + '<br /></br />' );

	document.write( '<table border="1">' );
	for ( var key in myJSON )
	{
		document.write( '<tr><td><b>' + key + '</b>' + '</td><td> - </td><td><i>' + myJSON[key] + '</i></td></tr>' );
	}
	document.write( '</table>' );

	document.write( '<p><a href="json_parseurl.html">Terug</a></p>' );
} else {
	document.write( '<p>Parameter ontbreekt of heeft geen waarde<br />' );
	document.write( '<a href="json_parseurl.html">Terug</a></p>' );
}
</script>