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.
Gewijzigd op 29/01/2022 01:26:15 door - Ariën -
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.
Toevoeging op 29/01/2022 09:13:18:
Hier een uitwerking van bovengenoemde volgorde.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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>
// 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>
Toevoeging op 29/01/2022 09:53:15:
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.
Toevoeging op 29/01/2022 19:16:19:
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<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>
// 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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<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>
<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>
Gewijzigd op 29/01/2022 09:15:55 door Adoptive Solution