In my angular js project I’m trying to use cytoscape.js library to build a graph and display it on one of my pages and so I have the following function that is being called when I navigate to the relevant page:

function init() {
   vm.loading = true;

   projectService.getNavigationTree({ projectLocationId: vm.id })
      .then(function (result) {
         var data = initNavigationTreeData(result.data);
         var nodes = buildNodes(data);
         var edges = buildEdges(data);

         edges.forEach(function (elem) {
            var isFound = _.find(data, { id: elem.source });
            if (!isFound)
               console.log(elem);
            else
               console.log("true");
         });

         vm.cy = cytoscape({
            container: document.getElementById('cy'),

            elements: {
               nodes: nodes,
               edges: edges
            },

            layout: {
               name: 'random',
               fit: true,
               padding: 50
            },

            style: [
                {
                   selector: 'node',
                   style: {
                      'label': 'data(text)'
                   }
                }
            ]
         });
      })
      .catch(function (error) {
         console.log("error = ", error.message);
      })
      .finally(function () {
         vm.loading = false;
      });
}

Here is the initNavigationTreeData function (in case it’s relevant):

function initNavigationTreeData(navigationTreeData) {
   var treeData = _.map(navigationTreeData, function (item) {
      return {
         id: item.id,
         rawId: item.rawId,
         text: item.name,
         fullPath: item.fullPath,
         parentId: item.parentId ? item.parentId : null,
         isSelectable: item.isSelectable
      };
   });

   return treeData;
}

And here’s the error I’m getting:

I can’t understand why there’s such an error, even though in my edges.forEach whose purpose is to make sure that all my edges have a source which they do (since its always returning true)

Note: if instead of

elements: {
   nodes: nodes,
   edges: edges
}, 

I replace it with

elements: {
   nodes: nodes
}, 

then it will work and all the nodes will show up on my screen