Member Avatar for javalover

Dear friends, I am interested in creating a tree structure like the image attacched using jquery and json data.

datasets:

[{'name':'xxx', position:'left','parent': 0},
{'name':'yyy', position:'left','parent': 1},
{'name':'yyy', position:'middle','parent': 1},
{'name':'yyy', position:'right','parent': 1},
{'name':'yyy', position:'left','parent': 2},
{'name':'yyy', position:'right','parent': 2},
{'name':'yyy', position:'left','parent': 3}]

Where,
name - specifies name of the node
parent - node will be given number nodes direct child
position: [left/right/middle]position of the node to the parent

How to achieve this structure??.. Please suggest me.. Thank you in advance..

mlm-adhar.jpg 7.38 KB
  • 2 Contributors
  • 1 Reply
  • 398 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by Member #949455

Dani AI

Generated

asked for a left/middle/right tree built from JSON; the sample shown mixes invalid JSON (single quotes, unquoted keys) and uses array indexes as parent references, which is brittle. Use stable unique ids and valid JSON (double quotes) so parsing and reordering are safe. 's point about intent is noted, but the technical pattern below applies regardless of use.

A simple, robust data model: every node gets an id, a parent (0 or null for roots) and a normalized position ("left"|"middle"|"right"). Example JSON (valid):

[
  {"id":1,"name":"Root","parent":0,"position":"middle"},
  {"id":2,"name":"Left A","parent":1,"position":"left"},
  {"id":3,"name":"Middle A","parent":1,"position":"middle"},
  {"id":4,"name":"Right A","parent":1,"position":"right"}
]

Convert the flat list into a positional tree (children grouped by position) before rendering:

function buildTree(list) {
  const map = Object.create(null);
  list.forEach(item => {
    map[item.id] = { id: item.id, name: item.name, position: item.position || 'left',
                     parent: item.parent || 0,
                     children: { left: [], middle: [], right: [] } };
  });

  const roots = [];
  list.forEach(item => {
    const node = map[item.id];
    if (!item.parent || item.parent === 0) {
      roots.push(node);
    } else {
      const parent = map[item.parent];
      if (parent) {
        const pos = node.position in parent.children ? node.position : 'left';
        parent.children[pos].push(node);
      } else {
        roots.push(node); // orphan fallback
      }
    }
  });
  return roots;
}

Rendering tips and cautions: render recursively into three columns per parent (one column per position) so left/middle/right align naturally; use document fragments or jQuery fragments to minimize reflows. For large trees, lazy-render children on expand or virtualize the view to avoid thousands of DOM nodes. Keep position as a presentational property and validate data (unique ids, correct parent ids) before building the tree.

Member Avatar for Member #949455

I am interested in creating a tree structure like the image attacched using jquery and json data.

You used this instead:

http://www.yourfreeworld.com/script/phpmlmscript.php

I don't think any Daniweb members would post a code to help you acheive that because you are doing Multi-level Marketing. Another words you are going to make money out of this.

Edited by Member #949455
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.