JavaScript change the path when walking a JSON tree

Question

Currently, as you can see from this fiddle, I have a JSON stored as the variable:

const tree = { ...
}

The JS then walks the entire tree searching for all results under '201603':

const Chart201603 = walk(tree, '201603');

Finally, the script then searches for only 'Concentration' nodes to be displayed:

const Chart201603_Concentration = Chart201603.map(entry => {
        return entry.Concentration;
      });

The array of numbers found in the entire tree under '201603' and 'Concentration' is then printed to a span in my HTML as well as the sum of the array:

I can also specify where in the tree I want the JS to look for this information by changing this line:

const Chart201603 = walk(tree, '201603');

To something like this:

const Chart201603 = walk(tree.BILL.Municipal, '201603');

This now returns fewer results as it has skipped out some nodes:

What I want to do, however, rather than hard code the desired path into the JS like this, is for it to equal the value of a text area or span etc.

Something like this.

Now there is a span with the value set like so:

<span id="value">BILL.Municipal</span>

And i've created a variable of the spans value:

const newPath = document.getElementById('value').innerHTML;

But now when I set the path like so:

const Chart201603 = walk(tree.newPath, '201603');

It does not return any results.

Can anybody help with this issue? And advise how I can get this method working?

Here is the code too incase you would rather not test with JSFiddle:

const walk = (root, filter) => {
  const result = [];
  const follow = (root) => {
    if (root instanceof Array) {
      root.forEach(elem => {
        follow(elem);
      });
    } else if (root instanceof Object) {
      Object.keys(root).forEach(elem => {
        if (elem === filter) {
          result.push(root[elem]);
        } else {
          follow(root[elem]);
        }
      });
    }
  };
  follow(root);
  return result;
};

const tree = {
"BILL" : {
 "Municipal" : {
    "CAD" : {
      "Short" : {
        "Low" : {
          "High" : {
            "N" : {
              "CANADA" : {
                "IssueName00085" : {
                  "CA6832Z57Z70" : {
                    "201603" : {
                     "Concentration" : 2,
                      "ConcentrationTier1" : 2,
                      "ConcentrationTier2" : 0,
                      "LargestTicket" : 0,
                      "Maturity" : 201708,
                      "Outstanding" : 140,
                      "SmallestTicket" : 0,
                      "Turnover" : 0,
                      "TurnoverTeir2" : 0,
                      "TurnoverTier1" : 0
                    },
                    "201604" : {
                      "Concentration" : 6,
                      "ConcentrationTier1" : 3,
                      "ConcentrationTier2" : 3,
                      "LargestTicket" : 0,
                      "Maturity" : 201708,
                      "Outstanding" : 140,
                      "SmallestTicket" : 0,
                      "Turnover" : 0,
                      "TurnoverTeir2" : 0,
                      "TurnoverTier1" : 0
                    }
                   }
                  }
                 },
                 "USA" : {
                   "IssueName00953" : {
                     "USA688I57Z70" : {
                        "201603" : {
                          "Concentration" : 4,
                          "ConcentrationTier1" : 2,
                          "ConcentrationTier2" : 2,
                          "LargestTicket" : 0,
                          "Maturity" : 201708,
                          "Outstanding" : 40,
                          "SmallestTicket" : 0,
                          "Turnover" : 0,
                          "TurnoverTeir2" : 0,
                          "TurnoverTier1" : 0
                        },
                        "201604" : {
                          "Concentration" : 9,
                          "ConcentrationTier1" : 7,
                          "ConcentrationTier2" : 2,
                          "LargestTicket" : 0,
                          "Maturity" : 201708,
                          "Outstanding" : 140,
                          "SmallestTicket" : 0,
                          "Turnover" : 0,
                          "TurnoverTeir2" : 0,
                          "TurnoverTier1" : 0
                    }
                   }
                  }
                 }
                }
               }
              }
             }
            }
           },
            "Sovereign" : {
    "USD" : {
      "Short" : {
        "High" : {
          "High" : {
            "N" : {
              "MEXICO" : {
                "IssueName00385" : {
                  "ME6832Z57Z70" : {
                    "201603" : {
                     "Concentration" : 9,
                      "ConcentrationTier1" : 2,
                      "ConcentrationTier2" : 7,
                      "LargestTicket" : 0,
                      "Maturity" : 201708,
                      "Outstanding" : 140,
                      "SmallestTicket" : 0,
                      "Turnover" : 0,
                      "TurnoverTeir2" : 0,
                      "TurnoverTier1" : 0
                    },
                    "201604" : {
                      "Concentration" : 16,
                      "ConcentrationTier1" : 3,
                      "ConcentrationTier2" : 13,
                      "LargestTicket" : 0,
                      "Maturity" : 201708,
                      "Outstanding" : 140,
                      "SmallestTicket" : 0,
                      "Turnover" : 0,
                      "TurnoverTeir2" : 0,
                      "TurnoverTier1" : 0
                    }
                   }
                  }
                 },
                 "USA" : {
                   "IssueName00953" : {
                     "USA688I57Z70" : {
                        "201603" : {
                          "Concentration" : 4,
                          "ConcentrationTier1" : 2,
                          "ConcentrationTier2" : 2,
                          "LargestTicket" : 0,
                          "Maturity" : 201708,
                          "Outstanding" : 40,
                          "SmallestTicket" : 0,
                          "Turnover" : 0,
                          "TurnoverTeir2" : 0,
                          "TurnoverTier1" : 0
                        },
                        "201604" : {
                          "Concentration" : 9,
                          "ConcentrationTier1" : 7,
                          "ConcentrationTier2" : 2,
                          "LargestTicket" : 0,
                          "Maturity" : 201708,
                          "Outstanding" : 140,
                          "SmallestTicket" : 0,
                          "Turnover" : 0,
                          "TurnoverTeir2" : 0,
                          "TurnoverTier1" : 0
                    }
                   }
                  }
                 }
                }
               }
              }
             }
            }
           }
     }
     }
         
         const newPath = document.getElementById('value').innerHTML;
         
         console.log(newPath)
         
         const Chart201603 = walk(tree.newPath, '201603');

          const Chart201603_Concentration = Chart201603.map(entry => {
            return entry.Concentration;
          });

          document.getElementById("Array201603Concentration").innerHTML = Chart201603_Concentration.join(' ');

          var ConcentrationSum = Chart201603_Concentration.reduce((total, num) => {
            return total + num;
          }, 0);
          
           document.getElementById("Array201603ConcentrationSum").innerHTML = ConcentrationSum;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="value">BILL.Municipal</span>

<p>Array: <span id="Array201603Concentration"></span></p>

<p>Array Sum: <span id="Array201603ConcentrationSum"></span></p>

This might be relevant to your question: [accessing nested javascript objects with string key](https://stackoverflow.com/questions/6491463/accessing-nested-javascript-objects-with-string-key) — user3297291, Aug 24 '17 at 13:55
I think you probably made some mistakes, check your code. For example: i think `tree.newPath` should be: `tree[newPath]` and in this regard (split dots and retrieve inner tree) — Joel Harkes, Aug 24 '17 at 13:56
You'll need to convert `walk` to accept parameters like this: `walk(tree, '201603', newPath)` or perhaps `walk(tree, '201603', newPath.split("."))`. Assuming you either wrote the code above or you understand it well, then that shouldn't be too hard for you. — Peter B, Aug 24 '17 at 13:57
Another way to access the (sub) properties: Instead of `tree.newPath` , use `newPath.split('.').reduce((o,p) => o[p], tree)` ( https://jsfiddle.net/f9163zut/3/ ) — Me.Name, Aug 24 '17 at 13:58
Thank you @Me.Name - This is exactly what I need! If you posted this as the answer I will accept it — GBT97, Aug 24 '17 at 14:04

score 3 · Accepted Answer · answered Aug 24 '17 at 13:57

3

tree.newPath looks for a key with the name "newPath" at the tree object

use a function like this to get the desired node:

function getNodeByPathString(path) {
  var node = tree;
  var partsOfPath = path.split('.');
  while(let part = partsOfPath.shift())
    node = node[part];
  return node;
}

answered Aug 24 '17 at 13:57

Joshua K

2,407
1
10
13

Ignore the last comment - Figured it out and this method works for me.. thank you!! – GBT97 Aug 24 '17 at 14:01

JavaScript change the path when walking a JSON tree

1 Answers1