JS array weergeven in andere pagina

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: « vorige 1 2

- Ariën -
Beheerder

- Ariën -

29/01/2022 01:25:29
Quote Anchor link
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 -
 
PHP hulp

PHP hulp

27/05/2022 20:34:44
 
Adoptive Solution

Adoptive Solution

29/01/2022 08:31:47
Quote Anchor link
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.

Toevoeging op 29/01/2022 09:13:18:

Hier een uitwerking van bovengenoemde volgorde.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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)
PHP script in nieuw venster Selecteer het PHP script
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
<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)
PHP script in nieuw venster Selecteer het PHP script
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
<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>
Gewijzigd op 29/01/2022 09:15:55 door Adoptive Solution
 

Pagina: « vorige 1 2



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.