Resolved: Recursive function and React in Crome debug VM - a mess

Question:

First, let me explain what I want to do. I have tree-like data structure, with arbitrary depth from which i want to make a list of all non-leaf branches which I pass as props to Child component. Data set and recursive function are bellow.
Problem: I get double data in array! I noticed that function getBranches() is called also in chrome VM and it just appends same data again to already existing array. See pic bellow. Is my approach fundamentally wrong? What to do?

const treeData = {
'first-level-node-1': {               // key
  label: 'Regija',
  type: TYPES[1],
  index: 0, // rendering order
  url: 'http://opa.com',     
  nodes: {
    'second-level-node-1': {
      label: 'Bolnica BN',
      index: 0,
      type: 1,
      nodes: {
        'third-level-node-1': {
          label: 'Konektor Sysmex',
          index: 0,
          nodes: {}, 
          type: TYPES[0]
        },
      },
    },
  },
},
'first-level-node-2': {
  label: 'Regija 2',
  index: 1,
  type: TYPES[1],
  nodes: {
    '2-1': {
      label: 'Dz Trebinje',
      index: 0,
      type: 1,
      nodes: {
        '3-1': {
          label: 'Konektor Biomerux',
          index: 0,
          hasNodes: false,
          type: TYPES[0],
        }
      }
    }
  }
},

};
My getBranches() function:

const getBranches = (treeData) => {
console.log('i= ',i++)
Object.keys(treeData).forEach((key) => {
    if (treeData[key].type!==TYPES[0]) {
        branches.push({key: key, label: treeData[key].label});
        console.log({key: key, label: treeData[key].label})
        treeData[key].nodes && getBranches(treeData[key].nodes)
    };
});
return [...branches];

};
My Component:

const Sites = () => {

const branches = getBranches(treeData);

console.log(branches);
//const [data, setData] = useState(treeData);

return (
    <Container fluid="md">
        <Row>
            <Col>
                <MyTreeView data={treeData}/>
            </Col>
            <Col>
                <BranchView
                    sites={treeData}
                    parentList={branches}
                />
            </Col>
        </Row>
    </Container>
);

};
Some additional info:
branch vs leaf is distinguished by property type
The Picture. Notice the i s

Answer:

I’m guessing the problem is simply that you don’t declare branches inside your function, making it a global variable. So the next time the function is run, you’re appending to it. Adding a const declaration should probably do.
That said, I think you can simplify getBranches in a clean manner:

const getBranches = (o) => Object .entries (o) .flatMap (
  ([key, {label, type, nodes}]) => [
    ... (type == TYPES [0] ? [] : [{key, label}]), 
    ... (nodes ? getBranches (nodes) : [])
  ]
)

const TYPES = [0, 1]
const treeData = {"first-level-node-1": {label: "Regija", type: TYPES[1], index: 0, url: "http: //opa.com", nodes: {"second-level-node-1": {label: "Bolnica BN", index: 0, type: 1, nodes: {"third-level-node-1": {label: "Konektor Sysmex", index: 0, nodes: {}, type: TYPES[0]}}}}}, "first-level-node-2": {label: "Regija 2", index: 1, type: TYPES[1], nodes: {"2-1": {label: "Dz Trebinje", index: 0, type: 1, nodes: {"3-1": {label: "Konektor Biomerux", index: 0, hasNodes: false, type: TYPES[0]}}}}}}

console .log (getBranches (treeData))

.as-console-wrapper {max-height: 100% !important; top: 0}

If you have better answer, please add a comment about this, thank you!

Resolved: Recursive function and React in Crome debug VM – a mess

Resolved: Java Swing center JLabel in JPanel with two JLabels

Resolved: How to compare two text files and and change the sign of the data in powershell?

Resolved: Java Virtual Machines deleted

Leave A Reply