Array met subarray in JavaScript
Is de onderstaande array en loop ook mogelijk in JavaScript?
Code (php)
Had dit op het net gevonden URL maar hier word steeds een nieuwe array aangemaakt.
Voor elck wat wils
Om te oefenen.
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<?php
$options = array(
'Kleur' => array('blauw', 'geel', 'wit'),
'Maat' => array('39', '40', '41'),
);
foreach( $options as $option => $values )
{
echo $option.'<br />';
foreach( $values as $value )
{
echo $value . ' ';
}
echo '<br />';
}
?>
<hr />
<script>
var options = [
['Kleur', ['blauw', 'geel', 'wit'] ],
['Maat' , ['39', '40', '41'] ],
['Overig', 'n.v.t']
];
for ( var i = 0; i < options.length; i++ )
{
if ( Array.isArray( options[i][1] ) )
{
document.write( '<b>' + options[i][0] + '</b><br />' );
for ( var y = 0; y < options[i][1].length; y++ )
{
document.write( options[i][1][y] + ' ' );
}
document.write( '<br />' );
} else {
document.write( '<b>' + options[i][0] + '</b><br />' + options[i][1] + '<br />' );
}
}
</script>
<hr />
<p id="demo"></p>
<script>
// Create an object:
const cars = {
fiat: {
brand:"Fiat",
model:"500",
color:"white"
},
bmw: {
brand:'BMW',
model:'M3',
color:'Red'
}
};
// Display some data from the object:
document.getElementById("demo").innerHTML = "The car brand & type is " + cars.fiat.brand + ' ' + cars.fiat.model;
for( let item in cars )
{
document.write(`${cars[item].brand} ${cars[item].model} heeft kleur <b> ${cars[item].color} </b><br />`);
}
</script>
<hr />
<script>
storeItems = {
eggs: {price: 3.77, quantity: 30},
milk: {price: 2.22, quantity: 23},
butter: {price: 2.00, quantity: 22},
carrots: {price: 3.00, quantity: 11},
beef: {price: 6.18, quantity: 34},
chicken: {price: 5.44, quantity: 34}
};
//Using a for..in loop, we can iterate over this object by property name to access all the properties.
for(let item in storeItems){
document.write(`${storeItems[item].quantity} ${item}s each cost
${storeItems[item].price} <br />`);
}
</script>
<hr />
<script>
const mobiles = [
{
brand: 'Samsung',
model: 'Galaxy Note 9'
},
{
brand: 'Google',
model: 'Pixel 3'
},
{
brand: 'Apple',
model: 'iPhone X'
}
];
mobiles.forEach( mobile => {
for ( let key in mobile ) {
document.write( `${key}: ${mobile[key]} <br />` ); // een manier. je moet ` gebruiken
//document.write( key + ' : ' + mobile[key] + '<br />' ); // andere manier
}
});
</script>
<hr />
<script>
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
for ( var key in p) {
if ( p.hasOwnProperty( key ) )
{
document.write( key + " -> " + p[key] + '<br />'); // een manier
//document.write( `${key} -> ${p[key]} <br />` ); // andere manier
}
}
</script>
<hr />
<p>https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects</p>
<p>https://attacomsian.com/blog/javascript-iterate-objects</p>
$options = array(
'Kleur' => array('blauw', 'geel', 'wit'),
'Maat' => array('39', '40', '41'),
);
foreach( $options as $option => $values )
{
echo $option.'<br />';
foreach( $values as $value )
{
echo $value . ' ';
}
echo '<br />';
}
?>
<hr />
<script>
var options = [
['Kleur', ['blauw', 'geel', 'wit'] ],
['Maat' , ['39', '40', '41'] ],
['Overig', 'n.v.t']
];
for ( var i = 0; i < options.length; i++ )
{
if ( Array.isArray( options[i][1] ) )
{
document.write( '<b>' + options[i][0] + '</b><br />' );
for ( var y = 0; y < options[i][1].length; y++ )
{
document.write( options[i][1][y] + ' ' );
}
document.write( '<br />' );
} else {
document.write( '<b>' + options[i][0] + '</b><br />' + options[i][1] + '<br />' );
}
}
</script>
<hr />
<p id="demo"></p>
<script>
// Create an object:
const cars = {
fiat: {
brand:"Fiat",
model:"500",
color:"white"
},
bmw: {
brand:'BMW',
model:'M3',
color:'Red'
}
};
// Display some data from the object:
document.getElementById("demo").innerHTML = "The car brand & type is " + cars.fiat.brand + ' ' + cars.fiat.model;
for( let item in cars )
{
document.write(`${cars[item].brand} ${cars[item].model} heeft kleur <b> ${cars[item].color} </b><br />`);
}
</script>
<hr />
<script>
storeItems = {
eggs: {price: 3.77, quantity: 30},
milk: {price: 2.22, quantity: 23},
butter: {price: 2.00, quantity: 22},
carrots: {price: 3.00, quantity: 11},
beef: {price: 6.18, quantity: 34},
chicken: {price: 5.44, quantity: 34}
};
//Using a for..in loop, we can iterate over this object by property name to access all the properties.
for(let item in storeItems){
document.write(`${storeItems[item].quantity} ${item}s each cost
${storeItems[item].price} <br />`);
}
</script>
<hr />
<script>
const mobiles = [
{
brand: 'Samsung',
model: 'Galaxy Note 9'
},
{
brand: 'Google',
model: 'Pixel 3'
},
{
brand: 'Apple',
model: 'iPhone X'
}
];
mobiles.forEach( mobile => {
for ( let key in mobile ) {
document.write( `${key}: ${mobile[key]} <br />` ); // een manier. je moet ` gebruiken
//document.write( key + ' : ' + mobile[key] + '<br />' ); // andere manier
}
});
</script>
<hr />
<script>
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
for ( var key in p) {
if ( p.hasOwnProperty( key ) )
{
document.write( key + " -> " + p[key] + '<br />'); // een manier
//document.write( `${key} -> ${p[key]} <br />` ); // andere manier
}
}
</script>
<hr />
<p>https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects</p>
<p>https://attacomsian.com/blog/javascript-iterate-objects</p>