Uncaught TypeError: Cannot read property 'size' of undefined

[suchetaswabhav]

I am implementing Venn diagram using d3 venn in my angular2+ application.
I am getting a proper result when i select an api object that has sets has 3 items inside it. It is giving error -

  Uncaught TypeError: Cannot read property 'size' of undefined

when my sets has 6 items.

Code -

venn.example.js

var sets;


sets = JSON.parse(localStorage.getItem("sets"));
 

  console.log("sets=",sets)
  console.log("sets.length = ", sets.length)

  var lengthWidthHeights = [
    // min, max, width, height
    [0, 24, 500, 500],
    [25, 50, 1000, 800],
    [51, 100, 1300, 1300],
    [101, 150, 1500, 1600],
    [151, 250, 1700, 1900],
    [251, 350, 2000, 2500],
    [351, 450, 2500, 3000],
    [451, 550, 3000, 3500]
  ];
  var { length } = sets;
  console.log("length =", length);
  var chart;
  var foundItem = lengthWidthHeights.find(([min, max]) => length >= 
  min && length <= max);
  if (foundItem) {
    console.log("inside foundItem =", foundItem);
    const [,,width, height] = foundItem;
    chart = venn.VennDiagram().width(width).height(height);
   

  }

d3.select("#venn").datum(sets).call(chart);

app.component.ts

  callFunctionSingleSelectedResult(trueNodesObject) {

    this.showVennDiagram = true;

    console.log("nodesObj =", trueNodesObject);

    // JSON.stringify
    return new Promise((resolve, reject) => {

      this.http.get("http://localhost:3003/seekIntersection/nodesObj/" + JSON.stringify(trueNodesObject))
        .map(Response => Response)

        .catch((err) => {
          console.log("err =", err)
          return Observable.throw(err);
        })
        .subscribe((res: Response) => {


          this.nodesInfoSingular = res;
          this.nodesLengthSingular = this.nodesInfoSingular.records.length


            // combination formula to be applied
            else if (this.nodesLengthSingular > 2) {
              var j = 2;


              for (var i = 0; i < this.nodesLengthSingular; i++) {

                this.allNodesSingularTotalSelect.push(this.nodesInfoSingular.records[i]._fields[0].properties.name)
              }

                var array = this.allNodesSingularTotalSelect;
                var results = [];

              // Since you only want pairs, there's no reason
              // to iterate over the last element directly
              for (var i = 0; i < array.length - 1; i++) {
                // This is where you'll capture that last value
                for (var j = i + 1; j < array.length; j++) {
                  console.log("this.allNodesSingularTotalSelect =", this.allNodesSingularTotalSelect);
                  this.allNodesSingularSelect.push({ sets: [array[i]], size: 12 })
                   
                    this.allNodesSingularSelect.push({ sets: [array[i], array[j]], size: 2 })
  
                  console.log("this.allNodesSingularSelect ,its .push= ", this.allNodesSingularSelect);
                }
              }

              console.log(results);

            }

            resolve(this.allNodesSingularSelect)
          }
        });
    });

    console.log("return this.allNodesSingularSelect =", 
    this.allNodesSingularSelect)

  }

Output in console -

sets= (6) [{…}, {…}, {…}, {…}, {…}, {…}]
0: {sets: Array(1), size: 12}
1: {sets: Array(2), size: 2}
2: {sets: Array(1), size: 12}
3: {sets: Array(2), size: 2}
4: {sets: Array(1), size: 12}
5: {sets: Array(2), size: 2}
length: 6_
_proto__: Array(0)

sets.length =  6

length = 6

inside foundItem = (4) [0, 24, 500, 500]

Uncaught TypeError: Cannot read property 'size' of undefined

Reference -
http://jsfiddle.net/suchetacateina/h04sknus/518/

[suchetaswabhav]

I found out the answer -
I forgot putting sets value inside square [ ] brackets.
this.allNodesSingularSelect.push({ sets: [this.nodesInfoSingular.records[i]._fields[0].properties.name], size: 12 })