Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

408
Views
Recursive function and React in Crome debug VM - a mess

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

The picture. Notice the i's

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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}

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!