Why are contents destroyed when converting NodeList to Array?

Question

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>

You should spend some more time with jsFiddle. You don't need to copy library source code into your fiddles. Did it not strike you as odd that you seemingly need to bend over backwards in order to get this mature developer tool to work? — Tomalak, Jan 06 '17 at 12:50
@Tomalak. What’s your point? Do you have any constructive comments? — Samot, Jan 06 '17 at 12:55
@Samot - that was pretty constructive. Anyway, fixed it for you so jsFiddle is not needed — mplungjan, Jan 06 '17 at 12:56
Search for "serialize dom" http://stackoverflow.com/questions/2303713/how-to-serialize-dom-node-to-json-even-if-there-are-circular-references - http://stackoverflow.com/questions/8914985/javascript-how-to-serialize-a-dom-element-as-a-string-to-be-used-later — mplungjan, Jan 06 '17 at 12:58
@mplungjan thanks for updating the question. Or do you mean, you have a a solution to the problem? — Samot, Jan 06 '17 at 12:59
I made the snippet so visitors did not have to go anywhere to see the code. Also I found you possible duplicates. — mplungjan, Jan 06 '17 at 12:59
Thanks, +mplungjan, that’s very constructive. I’m reading the two links now. — Samot, Jan 06 '17 at 13:01
@mplungjan: thanks for the links. I tried to implement some of the methods there, but they were for a different type of issue and ultimately didn’t succeed. There seems to be no command to serialise a NodeList and the output from the function `printObj()` (see answer in link) seems to lose information & just not be decrypt able via _e. g._ JSON.parse or other methods. There must surely be simply method to convert from NodeList to string/JSON. — Samot, Jan 06 '17 at 14:38

Why are contents destroyed when converting NodeList to Array?

0 Answers0