How to search value in Nested Json in JavaScript

Question

What i need

I need to search parent_id with id column in children object.

Json object

                    {
                       "key":"1",
                       "value":{
                          "id":"150",
                          "code":"p",
                          "name":"Parent / Node",
                          "parent_id":null,
                          "url":"parent-url",
                          "children":[
                             {
                                "id":"151",
                                "code":"A",
                                "name":"A",
                                "parent_id":"150",
                                "url":"a-test"
                             },
                             {
                                "id":"152",
                                "code":"B",
                                "name":"B",
                                "parent_id":"150",
                                "url":"b-test"
                             },
                             {
                                "id":"153",
                                "code":"Comm",
                                "name":"Comm",
                                "parent_id":"150",
                                "url":"c-test",
                                "children":[
                                   {
                                      "id":"154",
                                      "code":"c_code",
                                      "name":"comm Code",
                                      "parent_id":"153",
                                      "url":"comm-codes"
                                   },
                                   {
                                      "id":"155",
                                      "code":"forms_c",
                                      "name":"Forms Code",
                                      "parent_id":"153",
                                      "url":"form-cod",
                                      "children":[
                                         {
                                            "id":"156",
                                            "code":"test UME",
                                            "name":"Test  Menu",
                                            "parent_id":"155",
                                            "url":"test-menu"
                                         }
                                      ]
                                   }
                                ]
                             }
                          ]
                       }
                    }

Js code

        console.log(searchNode('153',this.childernNodes));

   
            function searchNode(id, currentNode) {
            var i,
                currentChild,
                result;
            //console.log(currentNode);
            // if (id == currentNode.parent_id) {
            //     return currentNode;
            // } else {

               
                for (i = 0; i < currentNode.length; i ++) {
                 
                    currentChild = currentNode[i].node;
           
                    result = searchNode(id, currentChild);
                     
                  
                     return result;
                  
                }

             
        }

Input

this.childernNodes object json.

Use case

* Case 1 when user  click on menu option i have id and parent_id of clicked  item.

* Suppose  153 selected item then i need recreate json according to clicked menu options

Output should be like

* Parent / Node >Comm>Comm Code

Stack blitz

https://stackblitz.com/edit/angular-tree-node-test-qce9cv

What exactly is currently not working? Is it the typo this.childernNodes in the console log? — Yannick K
– Yannick K, Commented Jan 8, 2021 at 14:10
variable result for you is initialized only as empty variable, and you returning it complete empty. — Aurimas
– Aurimas, Commented Jan 8, 2021 at 14:16
I need to create breadcrumbs dynamic so when i click on Menu options then Seleted on item then breadcrumbs will be dynamically made — afeef
– afeef, Commented Jan 8, 2021 at 14:31

vincent · Accepted Answer · 2021-01-11 19:38:32Z

2

I don't think the accepted answer is correct. I would expect two results to be returned for the parent_id 153.

Here is an iterative solution using object-scan. It seems a bit cleaner to me than using the accepted answer, but I'm also not sure what you are trying to achieve as your question is very unclear. I can definitely adjust this answer if you explain better what your goal is.

// const objectScan = require('object-scan');

const myData = {"key":"1","value":{"id":"150","code":"p","name":"Parent / Node","parent_id":null,"url":"parent-url","children":[{"id":"151","code":"A","name":"A","parent_id":"150","url":"a-test"},{"id":"152","code":"B","name":"B","parent_id":"150","url":"b-test"},{"id":"153","code":"Comm","name":"Comm","parent_id":"150","url":"c-test","children":[{"id":"154","code":"c_code","name":"comm Code","parent_id":"153","url":"comm-codes"},{"id":"155","code":"forms_c","name":"Forms Code","parent_id":"153","url":"form-cod","children":[{"id":"156","code":"test UME","name":"Test Menu","parent_id":"155","url":"test-menu"}]}]}]}};

const searchNode = (data, id) => objectScan(['**.parent_id'], {
  rtn: 'parent',
  filterFn: ({ value }) => value === id
})(data);

console.log(searchNode(myData, '153'));
/* => [
  { id: '155', code: 'forms_c', name: 'Forms Code', parent_id: '153', url: 'form-cod', children: [
    { id: '156', code: 'test UME', name: 'Test Menu', parent_id: '155', url: 'test-menu' }
  ] },
  { id: '154', code: 'c_code', name: 'comm Code', parent_id: '153', url: 'comm-codes' }
]
 */

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

<script src="https://bundle.run/[email protected]"></script>

Disclaimer: I'm the author of object-scan

edited Jan 11, 2021 at 19:38

answered Jan 9, 2021 at 3:52

vincent

2,1893 gold badges19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aurimas Over a year ago

Your solution is es5 or newest, so it's not pure javascript. yes for "fast work" you can use, but my suggesstion is check benchamarks and requiremenets for both solution

afeef Over a year ago

Thanks for answering , but i don't want to use any custom library , i need Vanilla Js solution

Aurimas · Accepted Answer · 2021-01-08 14:30:21Z

Your given function is for DOM, cuz it's using DOM api (.node). Here you go, it's not perfect, but it's working example for you how you can do it:

var data =                     {
                       "key":"1",
                       "value":{
                          "id":"150",
                          "code":"p",
                          "name":"Parent / Node",
                          "parent_id":null,
                          "url":"parent-url",
                          "children":[
                             {
                                "id":"151",
                                "code":"A",
                                "name":"A",
                                "parent_id":"150",
                                "url":"a-test"
                             },
                             {
                                "id":"152",
                                "code":"B",
                                "name":"B",
                                "parent_id":"150",
                                "url":"b-test"
                             },
                             {
                                "id":"153",
                                "code":"Comm",
                                "name":"Comm",
                                "parent_id":"150",
                                "url":"c-test",
                                "children":[
                                   {
                                      "id":"154",
                                      "code":"c_code",
                                      "name":"comm Code",
                                      "parent_id":"153",
                                      "url":"comm-codes"
                                   },
                                   {
                                      "id":"155",
                                      "code":"forms_c",
                                      "name":"Forms Code",
                                      "parent_id":"153",
                                      "url":"form-cod",
                                      "children":[
                                         {
                                            "id":"156",
                                            "code":"test UME",
                                            "name":"Test  Menu",
                                            "parent_id":"155",
                                            "url":"test-menu"
                                         }
                                      ]
                                   }
                                ]
                             }
                          ]
                       }
                    };
                    
        console.log(searchNode('153',data));

   
            function searchNode(id, currentNode) {
            var result;
               
                for (const [key, value] of Object.entries(currentNode)) {
                if (key == "parent_id" && value == id)  return currentNode;
                    if (value !== null && typeof value === "object" || typeof value === "array") {
                        result = searchNode(id, value);
                       if (result) {
                        return result;
                       }
                     }
                  
                }
             
        }

Collectives™ on Stack Overflow

How to search value in Nested Json in JavaScript

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related