"Identical" array of dictionaries, but one has an undefined key

March 8, 2023

I have some example code to produce Euler diagrams from an array of dictionaries, which works as long as I explicitly define the array within my .js, and it does not work if I use the input from a .json file to iteratively construct it.

Here is the example code that does give the expected output:

var sets = [ {sets: ['A'], size: 12}, 
             {sets: ['B'], size: 12},
             {sets: ['A','B'], size: 2}];

// create the venn diagram, place in <div> with id="matrix_venn"
var chart = venn.VennDiagram()
d3.select("#matrix_venn").datum(sets).call(chart);

However, I need to be able to reconstruct this from data within a json file. Here is the contents of my json file called matrix_breakdown.json

{
    "A": 12,
    "B": 12,
    "A, B": 2
}

And my code I used to recreate the sets variable for the diagram

// import our json file with matrix counts
import data from './matrix_breakdown.json' assert { type: 'json' };

// set an array to append with dictionaries for set names and size
var sets = [];
for (let set in data) {
    // get set names in a list
    var set_split = set.split(',');

    // get the set count (size)
    var set_size = Number(data[set]);

    // setup dictionary for appending to our sets array
    var dict = {};
    dict['sets'] = set_split;
    dict['size'] = set_size;

    // append our array with the set dictionary
    sets.push(dict);
}

// create the venn diagram, place in <div> with id="matrix_venn"
var chart = venn.VennDiagram()
d3.select("#matrix_venn").datum(sets).call(chart);

which outputs this error:
"Uncaught TypeError: Cannot read properties of undefined (reading ‘size’)"

When I console.log the two variables, they seem identical to me. Why is it that this ‘size’ key is undefined when I create the variable as such?

In case it is needed, here is my HTML code that imports everything.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="matrix_venn"></div>
</body>

<!-- import d3 -->
<script src="https://d3js.org/d3.v4.min.js"></script>

<!-- import venn/euler diagram module -->
<script src="./venn/venn.js"></script>

<!-- import our code for producing the plot -->
<script type="module" src="./matrix_venn.js"></script>

</html>

>Solution :

The only difference I am seeing is that your "working" data has sets: ['A','B'] and the output below has sets: [ "A", " B"], note the leading space on B.

const data = {
    "A": 12,
    "B": 12,
    "A, B": 2
}


// set an array to append with dictionaries for set names and size
var sets = [];
for (let set in data) {
    // get set names in a list
    var set_split = set.split(',');

    // get the set count (size)
    var set_size = Number(data[set]);

    // setup dictionary for appending to our sets array
    var dict = {};
    dict['sets'] = set_split;
    dict['size'] = set_size;

    // append our array with the set dictionary
    sets.push(dict);
}

console.log(sets)

I would imagine that you could do:

const data = {
    "A": 12,
    "B": 12,
    "A, B": 2
}


// set an array to append with dictionaries for set names and size
var sets = [];
for (let set in data) {
    // get set names in a list
    var set_split = set.split(',').map(e => e.trim());

    // get the set count (size)
    var set_size = Number(data[set]);

    // setup dictionary for appending to our sets array
    var dict = {};
    dict['sets'] = set_split;
    dict['size'] = set_size;

    // append our array with the set dictionary
    sets.push(dict);
}

console.log(sets)
const expected = [ {sets: ['A'], size: 12}, 
             {sets: ['B'], size: 12},
             {sets: ['A','B'], size: 2}];
console.log(JSON.stringify(expected))
console.log(JSON.stringify(sets))
console.log(JSON.stringify(expected) === JSON.stringify(sets))