Why are contents destroyed when converting NodeList to Array?

281 views Asked by At

The process is as follows:

NodeList VariableArray VariableJSON.stringifyJSON.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>

0

There are 0 answers