JSFiddle - React, Tailwind, and code Playground

by juristr

HTML

<div id="output">
    <p><b>Log:</b></p>
</div>

JavaScript

function debug(msg){
    $('#output').append('<p>' + msg + '</p>');
}

$(function(){
    var tree1 = {
        items: [
            {
                identifier: 'node1',
                name: 'node 1',
                data: {
                    value: 1   
                }
            },
            {
                identifier: 'node2',
                name: 'node 2',
                data: {
                    value: 2
                }
            }
        ]
    };
    
    var tree2 = {
        items: [
            {
                identifier: 'node 3',
                name: 'node 3'
            },
            // duplicated node, shouldn't be inserted
            {
                identifier: 'node2',
                name: 'node 2'
            }
        ]
    };
    
    var duplicated;
    
    traverse(tree2, function(node){
        traverse(tree1, function(origNode){
            if(node.identifier === origNode.identifier){
                debug('found match for "' + node.identifier + '"');
                node.data = origNode.data;
            }
        });
    });
    
    // Expect that "node 2".data of tree2 references the same data instance as "node 2" of tree1
    debug('Nodes should reference the same object: ' + (tree2.items[1].data === tree1.items[1].data));
    
});

function traverse(rootNode, fn){
  // DFS manner
  if(rootNode.items && rootNode.items.length > 0){
    // go ahead and traverse all of them
    for(var i=0; i<rootNode.items.length; i++){
      var treeEntry = rootNode.items[i];
      traverse(treeEntry, fn);
    }
  }else{
    fn(rootNode);
  }
}