The process is as follows:
NodeList Variable
⟶ Array Variable
⟶ JSON.stringify
⟶ JSON.parse
My problem is, when I convert a NodeList-type variable (in this case links
) to an array, then peer into the contents after carrying out JSON.stringify, the entries are destroyed.
The code shows two tests. Test 1 shows, that if one starts with an Array, then JSON codifies and decodifies the Array of objects correctly. Test 2 shows, that if one starts with a NodeList, and then converts to an array, then JSON destroys the contents of the Array.
Question: Why is this happening? What can I do to ensure the objects in the NodeList/Array are preserved.
N. B.: I have tried this with various NodeList ⟶ Array conversion methods, .toArray()
, using a for loop to add elements to a new array, and using jquery
's $.makeArray()
command. In all cases, the same problem results.
function out() {
var args = Array.prototype.slice.call(arguments, 0);
document.getElementById('output').innerHTML += '' + args.join('') + '\n';
}
out('--- Test 1: Array -> JSON.stringify -> JSON.parse -> Array ---');
var links = [{
href: 'rot',
anzahl: 34
}, {
href: 'blau',
anzahl: 103
}, {
href: 'gruen',
anzahl: 19283
}, {
href: 'grau',
anzahl: 10
}, {
href: 'weiss',
anzahl: 700
}]
//links = $.makeArray(links);
// Already an array. Don't need to convert.
// But it will still work, if one does.
out('Type: ' + typeof links);
out('Variable before JSON: ' + links);
out('An element of the array: ' + links[2]);
out('An entry: [' + links[2].href + ']');
out('');
links = JSON.stringify(links);
out('Variable after JSON: ' + links);
links = JSON.parse(links);
out('Variable after JSON.parse: ' + links);
out('');
out('An element of the array: ' + links[2]);
out('An entry: [' + links[2].href + ']');
out('');
out('--- Test 2: NodeList -> Array -> JSON.stringify -> JSON.parse -> Array ---');
var myNodeList = document.querySelectorAll('a');
out('Type before conversion: ' + typeof links);
// Conversion-Method 1.
/* links = [];
for(var k=0; k<ergebnis.links.length; k++) {
links.push(myNodeList[k]);
}*/
// Conversion-Method 2.
links = $.makeArray(myNodeList);
// Conversion-Methods 1+2 lead to same results.
out('Type: ' + typeof links);
out('Variable before JSON: ' + links);
out('An element of the array: ' + links[2]);
out('An entry: [' + links[2].href + ']');
out('');
links = JSON.stringify(links);
out('Variable after JSON: ' + links);
links = JSON.parse(links);
out('Variable after JSON.parse: ' + links);
out('');
out('An element of the array: ' + links[2]);
out('An entry: [' + links[2].href + ']');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div>List of Websites in HTML
<p>
<a href="http://www.google.com"> Google</a>
<br>
<a href="http://www.wikipedia.com"> Wikipedia </a>
<br>
<a href="http://www.yahoo.com"> Yahoo! </a>
<br>
<a href="http://www.lbc.co.uk"> LBC </a>
<br>
</p>
</div>
<pre id='output'></pre>