How can I structure the final array to meet the requirements of Bootstrap Tree View for building a tree in JavaScript?

JavaScript
1

I need to generate the final array for the Bootstrap Tree View in the specified format. Currently, my code only supports nesting applications for a single level. It fails to handle multiple levels, and it also includes empty nodes unnecessarily. I want to exclude the empty nodes array when it’s empty. Additionally, it’s important to mention that I’m identifying applications by matching “Level One ID_1” with “Consumer ID_5”.



/* Bootstrap Tree View format - Sample
[
  {
    text: "Parent 1",
    nodes: [
      {
        text: "Child 1",
        nodes: [
          {
            text: "Grandchild 1"
          },
          {
            text: "Grandchild 2"
          }
        ]
      },
      {
        text: "Child 2"
      }
    ]
  },
  {
    text: "Parent 2"
  }
];
*/

//My globalApplications array in this case:
globalApplications =
[
  {
    "Con Master Contract Title_3": "aaaa",
    "Con Master Contract Type_4": "Master Licensing Agreement",
    "Pro Master Contract Title_7": "Master Contract Title - MC-024880",
    "Consumer ID_5": "10629263",
    "Level One ID_1": "10629243",
    "Pro Application Name_6": "MC-024880",
    "Pro Master Contract Type_8": "Master Licensing Agreement",
    "Con Application Name_2": "MC-024879"
  },
  {
    "Con Master Contract Title_3": "aaaa",
    "Con Master Contract Type_4": "Master Licensing Agreement",
    "Pro Master Contract Title_7": "Master Contract Title - MC-024882",
    "Consumer ID_5": "10629264",
    "Level One ID_1": "10629243",
    "Pro Application Name_6": "MC-024882",
    "Pro Master Contract Type_8": "Master Licensing Agreement",
    "Con Application Name_2": "MC-024879"
  },
  {
    "Con Master Contract Title_3": "aaaa",
    "Con Master Contract Type_4": "Master Licensing Agreement",
    "Pro Master Contract Title_7": "",
    "Consumer ID_5": "10629265",
    "Level One ID_1": "10629243",
    "Pro Application Name_6": "MJFF-000000",
    "Pro Master Contract Type_8": "",
    "Con Application Name_2": "MC-024879"
  },
  {
    "Con Master Contract Title_3": "aaaa",
    "Con Master Contract Type_4": "Master Licensing Agreement",
    "Pro Master Contract Title_7": "",
    "Consumer ID_5": "10629266",
    "Level One ID_1": "10629243",
    "Pro Application Name_6": "MJFF-024892",
    "Pro Master Contract Type_8": "",
    "Con Application Name_2": "MC-024879"
  }
];

//My globalAllNestedApplications sarray in this case:
globalAllNestedApplications =
[
    {
        "records": [
            {
                "Con Master Contract Title_3": "Master Contract Title - MC-024880",
                "Con Master Contract Type_4": "Master Licensing Agreement",
                "Pro Master Contract Title_7": "Master Contract Title - MC-024880",
                "Consumer ID_5": "10629301",
                "Level One ID_1": "10629263",
                "Pro Application Name_6": "MC-000022",
                "Pro Master Contract Type_8": "Master Licensing Agreement",
                "Con Application Name_2": "MC-024880",
                "nestedApplications": {
                    "records": []
                }
            },
            {
                "Con Master Contract Title_3": "Master Contract Title - MC-024880",
                "Con Master Contract Type_4": "Master Licensing Agreement",
                "Pro Master Contract Title_7": "Master Contract Title - MC-024880",
                "Consumer ID_5": "10629302",
                "Level One ID_1": "10629263",
                "Pro Application Name_6": "MC-000033",
                "Pro Master Contract Type_8": "Master Licensing Agreement",
                "Con Application Name_2": "MC-024880",
                "nestedApplications": {
                    "records": []
                }
            }
        ]
    },
    {
        "records": [
            {
                "Con Master Contract Title_3": "Master Contract Title - MC-024882",
                "Con Master Contract Type_4": "Master Licensing Agreement",
                "Pro Master Contract Title_7": "",
                "Consumer ID_5": "10629283",
                "Level One ID_1": "10629264",
                "Pro Application Name_6": "MC-024891",
                "Pro Master Contract Type_8": "",
                "Con Application Name_2": "MC-024882",
                "nestedApplications": {
                    "records": [
                        {
                            "Con Master Contract Title_3": "",
                            "Con Master Contract Type_4": "",
                            "Pro Master Contract Title_7": "fgvdg",
                            "Consumer ID_5": "10629300",
                            "Level One ID_1": "10629283",
                            "Pro Application Name_6": "MC-000011",
                            "Pro Master Contract Type_8": "Clinical Trial Agreement",
                            "Con Application Name_2": "MC-024891",
                            "nestedApplications": {
                                "records": [
                                    {
                                        "Con Master Contract Title_3": "fgvdg",
                                        "Con Master Contract Type_4": "Clinical Trial Agreement",
                                        "Pro Master Contract Title_7": "fgvdg",
                                        "Consumer ID_5": "10629306",
                                        "Level One ID_1": "10629300",
                                        "Pro Application Name_6": "MC-000111",
                                        "Pro Master Contract Type_8": "Clinical Trial Agreement",
                                        "Con Application Name_2": "MC-000011",
                                        "nestedApplications": {
                                            "records": []
                                        }
                                    }
                                ]
                            }
                        }
                    ]
                }
            }
        ]
    }
]
// My desired globalFinalArray should be in this case:
globalFinalArray = [
  {
    "text": "<b>Title:</b> MC-024880, <b>Level One ID:</b> 10629263",
    "href": "#MC-024880",
    "tags": [
      "Supplements Count - 2"
    ],
    "nodes": [
      {
        "text": "<b>Title:</b> MC-000022, <b>Level One ID:</b> 10629301",
        "href": "#MC-000022",
        "tags": [
          "Supplements Count - 2"
        ]
      },
      {
        "text": "<b>Title:</b> MC-000033, <b>Level One ID:</b> 10629302",
        "href": "#MC-000033",
        "tags": [
          "Supplements Count - 2"
        ]
      }
    ]
  },
  {
    "text": "<b>Title:</b> MC-024882, <b>Level One ID:</b> 10629264",
    "href": "#MC-024882",
    "tags": [
      "Supplements Count - 1"
    ],
    "nodes": [
      {
        "text": "<b>Title:</b> MC-024891, <b>Level One ID:</b> 10629283",
        "href": "#MC-024891",
        "tags": [
          "Supplements Count - 1"
        ],
        "nodes": [
          {
            "text": "<b>Title:</b> MC-000011, <b>Level One ID:</b> 10629300",
            "href": "#MC-000022",
            "tags": [
              "Supplements Count - 1"
            ],
            "nodes": [
              {
                "text": "<b>Title:</b> MC-000111, <b>Level One ID:</b> 10629306",
                "href": "#MC-000022",
                "tags": [
                  "Supplements Count - 1"
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    "text": "<b>Title:</b> MJFF-000000, <b>Level One ID:</b> 10629265",
    "href": "#MJFF-000000",
    "tags": []
  },
  {
    "text": "<b>Title:</b> MJFF-024892, <b>Level One ID:</b> 10629266",
    "href": "#MJFF-024892",
    "tags": []
  }
]

//My Code
     function constructNodes(consumerId) {
            let globalAppNodes = globalApplications
                .filter(app => app["Consumer ID_5"] === consumerId)
                .flatMap(app => app.nodes ? constructNodesFromGlobal(app.nodes) : []);

            let nestedApps = globalAllNestedApplications.filter(nestedApp => nestedApp.records.some(record => record["Level One ID_1"] === consumerId));

            let nodes = nestedApps.flatMap(nestedApp => {
                let records = nestedApp.records.filter(record => record["Level One ID_1"] === consumerId);
                return records.map(record => ({
                    text: `<b>Title:</b> ${record["Pro Application Name_6"]}, <b>Level One ID:</b> ${record["Consumer ID_5"]}`,
                    href: '#' + record["Pro Application Name_6"],
                    tags: [`Supplements Count - ${nestedApp.records.length}`],
                    nodes: constructNodes(record["Consumer ID_5"])
                }));
            });

            return [...globalAppNodes, ...nodes];
        }

        function constructNodesFromGlobal(nodes) {
            return nodes.flatMap(node => {
                return [{
                    text: node["Pro Application Name_6"],
                    href: '#' + node["Pro Application Name_6"],
                    tags: [],
                    nodes: node.nodes ? constructNodesFromGlobal(node.nodes) : []
                }];
            });
        }


globalFinalArray = globalApplications.map(globalApp => {
                    let tags = globalAllNestedApplications
                        .filter(nestedApp => nestedApp.records.some(record => record["Level One ID_1"] === globalApp["Consumer ID_5"]))
                        .map(item => `Supplements Count - ${item.records.length}`);

                    let nodes = constructNodes(globalApp["Consumer ID_5"]);

                    // Only include nodes property if it's not empty for MC-024882
                    if (globalApp["Pro Application Name_6"] === "MC-024882" && nodes.length === 0) {
                        return {
                            text: globalApp["Pro Application Name_6"],
                            href: '#' + globalApp["Pro Application Name_6"],
                            tags: tags
                        };
                    }

                    return {
                        text: `<b>Title:</b> ${globalApp["Pro Application Name_6"]}, <b>Level One ID:</b> ${globalApp["Consumer ID_5"]}`,
                        href: '#' + globalApp["Pro Application Name_6"],
                        tags: tags,
                        ...(nodes.length > 0 && { nodes }) // Conditionally include nodes property only if nodes array is not empty
                    };
                });
2

Lets start with this.

What Bootstrap tree view are you using? Because the one i find when i google does not include a “tags” property.

3
4

So you have… two arrays to start with… with some truly awful property names and poor structure, and you want to mangle them together into a tree structure.

//First, let's... deconstruct globalAllNestedApplications.
function flattenme(x) { let {nestedApplications, ...y} = x; return (x.nestedApplications.records.length) ? [...x.nestedApplications.records.flatMap(flattenme), y] : [y] ; }
let documents = globalApplications.concat(globalAllNestedApplications.flatMap((x) => x.records.flatMap(flattenme))
//There, now all our documents are at the same level.

//Recursive dive
function treeBuilder(tlid) {
   return documents.filter(x => x["Level One ID_1"] == tlid).map((x) => { 
      //Find Children
      let subtree = treeBuilder(x["Consumer ID_5"]);
      //Basic node.
      let result = {
               "text": `<b>Title:</b> ${x["Pro Application Name_6"]}, <b>Level One ID:</b> ${x["Level One ID_1"]}`,
           "href": `#${x["Pro Application Name_6"]}`
       };
      //If there were children, add the nodes property.
      if(subtree.length > 0) { result.nodes = subtree; }
      //Spit out our node.
      return result;
   });
}

let tree = treeBuilder("10629243");

Now the problem I have is your tags. Can you tell me how your logic goes for your tags?

5

tag = The count of direct children an application has.

**Please note I have to construct one tree for all the objects in globalApplications. Please see my desired globalFinalArray in this case. Please see my code for the globalFinalArray which is

globalFinalArray = globalApplications.map(globalApp => {…**

6

Moreover, I added 2 more child(Applications) under " “MC-000111” and it failed to display those 2 new ones. Please see my code for the globalFinalArray which is

globalFinalArray = globalApplications.map(globalApp => {…



globalAllNestedApplications = 
[
  {
    "records": [
      {
        "Con Master Contract Title_3": "Master Contract Title - MC-024880",
        "Con Master Contract Type_4": "Master Licensing Agreement",
        "Pro Master Contract Title_7": "Master Contract Title - MC-024880",
        "Consumer ID_5": "10629301",
        "Level One ID_1": "10629263",
        "Pro Application Name_6": "MC-000022",
        "Pro Master Contract Type_8": "Master Licensing Agreement",
        "Con Application Name_2": "MC-024880",
        "nestedApplications": {
          "records": []
        }
      },
      {
        "Con Master Contract Title_3": "Master Contract Title - MC-024880",
        "Con Master Contract Type_4": "Master Licensing Agreement",
        "Pro Master Contract Title_7": "Master Contract Title - MC-024880",
        "Consumer ID_5": "10629302",
        "Level One ID_1": "10629263",
        "Pro Application Name_6": "MC-000033",
        "Pro Master Contract Type_8": "Master Licensing Agreement",
        "Con Application Name_2": "MC-024880",
        "nestedApplications": {
          "records": []
        }
      }
    ]
  },
  {
    "records": [
      {
        "Con Master Contract Title_3": "Master Contract Title - MC-024882",
        "Con Master Contract Type_4": "Master Licensing Agreement",
        "Pro Master Contract Title_7": "",
        "Consumer ID_5": "10629283",
        "Level One ID_1": "10629264",
        "Pro Application Name_6": "MC-024891",
        "Pro Master Contract Type_8": "",
        "Con Application Name_2": "MC-024882",
        "nestedApplications": {
          "records": [
            {
              "Con Master Contract Title_3": "",
              "Con Master Contract Type_4": "",
              "Pro Master Contract Title_7": "fgvdg",
              "Consumer ID_5": "10629300",
              "Level One ID_1": "10629283",
              "Pro Application Name_6": "MC-000011",
              "Pro Master Contract Type_8": "Clinical Trial Agreement",
              "Con Application Name_2": "MC-024891",
              "nestedApplications": {
                "records": [
                  {
                    "Con Master Contract Title_3": "fgvdg",
                    "Con Master Contract Type_4": "Clinical Trial Agreement",
                    "Pro Master Contract Title_7": "fgvdg",
                    "Consumer ID_5": "10629306",
                    "Level One ID_1": "10629300",
                    "Pro Application Name_6": "MC-000111",
                    "Pro Master Contract Type_8": "Clinical Trial Agreement",
                    "Con Application Name_2": "MC-000011",
                    "nestedApplications": {
                      "records": [
                        {
                          "Con Master Contract Title_3": "fgvdg",
                          "Con Master Contract Type_4": "Clinical Trial Agreement",
                          "Pro Master Contract Title_7": "",
                          "Consumer ID_5": "10629308",
                          "Level One ID_1": "10629306",
                          "Pro Application Name_6": "MJFF-000000",
                          "Pro Master Contract Type_8": "",
                          "Con Application Name_2": "MC-000111",
                          "nestedApplications": {
                            "records": []
                          }
                        },
                        {
                          "Con Master Contract Title_3": "fgvdg",
                          "Con Master Contract Type_4": "Clinical Trial Agreement",
                          "Pro Master Contract Title_7": "fgvdg",
                          "Consumer ID_5": "10629309",
                          "Level One ID_1": "10629306",
                          "Pro Application Name_6": "MC-123456",
                          "Pro Master Contract Type_8": "Clinical Trial Agreement",
                          "Con Application Name_2": "MC-000111",
                          "nestedApplications": {
                            "records": []
                          }
                        }
                      ]
                    }
                  }
                ]
              }
            }
          ]
        }
      }
    ]
  },
  {
    "records": []
  },
  {
    "records": []
  }
]
7

So that i’m clear, and based on your result, the statement i derive is “The top level item counts its direct children; it and ALL children of any generation below it share that number”.

tree in my code is a single tree for all applications. You pass the function the Level One ID for your top level items.

Those ‘children’ have no related top level object. So how can they appear in the tree? What text value do those children represent?

8

Bit messy, cause you’ve gotta go down to go up to go down again, but…

9

Correction: They show up for me. I thought you were referring to the empty “records” elements at the bottom of the structure. THOSE wont show up because… they’re empty and contain no documents.

10

Hello, I appreciate all your assistance. It’s valued.

It seems there might have been a misunderstanding regarding the requirements. The task demands iterating through all the objects in the globalApplications array and extracting child/grandchild applications from the nestedApplications array.

To clarify, the globalApplications array contains all the parent applications, while the nestedApplications array may contain child/grandchild applications.

The current approach being employed, as exemplified by let tree = treeBuilder("10629243");, is incorrect for my particular case. Instead, what needs to be done is to iterate or map through the objects in the globalApplications array, retrieve “Level One ID_1” from each object, and then locate child/grandchild applications in the nestedApplications using “Consumer ID_5”.

Please refer to the attached image. While your functionality appears to be functioning to some extent, I’ve noted several mistakes highlighted in red and blue. The IDs and counts are incorrect throughout.

Untitled1212121
Untitled12121211130×647 22.8 KB

11

To be clear, your blues are not incorrect. It’s not “a misunderstanding the requirements”, its you giving me an incorrect desired output.

The reds are a case of me looking at the words “Level One ID” in your output and foolishly thinking you wanted the thing labeled “Level One ID_1” there. Clearly it should be “Consumer ID_5” instead. You should be able to fix that on your own.

1 Like
12

Accepted the corrections for the red ones; they’ve been rectified here. I regret to inform you that the problem lies with the blue ones. The task involves traversing all objects within the globalApplications array and extracting child/grandchild applications from the nestedApplications array instead of utilizing let tree = treeBuilder(“10629243”);

13

Name a node that is not present. The code, as provided, completes all requirements of creating the desired data structure.

You have not described the “correct” nature of the tags, so I cant offer a suggested correction. The only outcome you have supplied forms the tags as the code currently does. Supply a correct outcome, and I can suggest what the correct codeflow would be.

14

Again, Txs for all ur effort.

tagcount is the direct children of the current application.
E.g MC-024880 has 2 children(MC-000022, MC-000033) so its tagcount should be 2, which is right in this case.

MC-00002 has no children so its tagcount should be 0.

15

But in your example output, the last two nodes had no children, and had NO tags listed. Which is correct? Listing a tag but marking it 0, or having no tag at all?

16

Listing a tag and marking it 0 for all nodes.
MC-00002 has no children so its tagcount should be 0.

17

18

Thank you for all your hard work. You’ve really made a difference. I’ve also addressed the tag count issue, and now the page looks like this.

Untitled11111
Untitled11111935×664 18.2 KB