0

I am trying to prepare data to use with the amCharts library. The final data structure needs to be formatted like this:

data = [{
  name: "First",
  total: 190,
  children: [
    {
        name: "A1",
        value: 100
    },
    {
        name: "A2",
        value: 60
    },
    {
        name: "A3",
        value: 30
    },
  ],
  name: "Second",
  total: 150,
  children: [
    {
        name: "B1",
        value: 100
    },
    {
        name: "B2",
        value: 30
    },
    {
        name: "B3",
        value: 20
    },
  ]
}]

My prepped data looks like this:

const data = { 
  'Corporate Investors': {
  total: 7, // total number of 'Corporate Investors', not the sum total of 'stages'
  stages: {
    Seed: 7,
    'Series A': 7,
    'Series B': 7,
    'Series C': 7,
    'Series D': 7
    }
  },
  'Angel investor': {
   total: 11,
   stages: {
     Seed: 10,
     'Series A': 10,
     'Series B': 11,
     'Series C': 11,
     'Series D': 9
}...

I've made a helper function to turn this object into the type of array that amCharts needs (modifying one from one of their demos found here: https://www.amcharts.com/demos/drill-down-treemap/

function processData(data) {

  const treeData = [];
  let typeData = {};

  // loops through the outer 'Angel investor' type-keys
  for (const key of Object.keys(data)) {
    typeData = { name: key, total: data[key].total, children: [] };

    // loops over the 'stages' for each of the outer keys
    for (const stage of Object.keys(data[key].stages)) {
      typeData.children.push({ name: stage, count: data[key].stages[stage] });
    }

    console.log('typeData pre-push: ', typeData);
    console.log('treeData pre-push: ', treeData);
    treeData.push(typeData);
    console.log('treeData post-push: ', treeData);
   }
 return treeData;
 }

There are couple of nested loops and it might be hard to follow but it DOES successfully take my original object and process it into a array format that amCharts is after, except when it is PUSHED into treeData I seem to lose the CHILDREN values. Here is the output of the console.logs from VS Code:

output

I have confirmed this by pulling in the data into my react component and logging it there and the children array is completely empty.

What is happening to my data when I push it in that is causing it to lose all of my children values?

3
  • How are you calling processData work Commented Jul 6, 2021 at 4:25
  • Try initializing typeData inside the for loop Commented Jul 6, 2021 at 4:48
  • I shortened it a bit, but it seems to work fine in this fiddle: jsfiddle.net/yak613/1zqxp0yj Is this not the expected behavior? Commented Jul 6, 2021 at 5:04

1 Answer 1

1

The issue here is not with pushing the object to treeData array. Its the way VS Code terminal displays the console logs of array objects inside another array. The same code will display properly in browser console log.

Please find below a sample output of what VS Code terminal displays with two statements.

//Array inside an Object

console.log('Console Output in VS Code for  --->>', {name:"Something",values:[{id:"1"}]});

Output :

Console Output in VS Code for  --->> { name: 'Something', values: [ { id: '1' } ] }

//Array inside an Array

console.log('Console Output in VS Code for  --->>', [{name:"Something",values:[{id:"1"}]}]);

Output:

Console Output in VS Code for  --->> [ { name: 'Something', values: [ [Object] ] } ]
Sign up to request clarification or add additional context in comments.

1 Comment

That's so strange, before when I was messing around with this the 'children' array was always showing empty in my browser console too, hence writing the question. I then took a break, rebooted everything, wrote it all out again from scratch and hey presto! It works! So yes you are right, VS code shows one way, browser shows another....

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.