Question

目前，正如您从this fiddle所看到的，我将JSON存储为变量：

const tree = { ...
}

然后JS走遍整个树，搜索＆＃39; 201603＆＃39;下的所有结果：

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

最后，该脚本仅搜索＆＃39;浓度＆＃39;要显示的节点：

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

在＆＃39; 201603＆＃39;下的整个树中找到的数字数组。和＆＃39;专注＆＃39;然后打印到我的HTML中的跨度以及数组的总和：

我还可以通过更改以下行来指定JS中我希望JS查找此信息的位置：

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

对于这样的事情：

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

现在，由于跳过了某些节点，因此返回的结果较少：

然而，我想要做的是，而不是将所需的路径硬编码到这样的JS中，这是因为它等于文本区域或跨度等的值。

类似于this。

现在有一个设置值的范围如下：

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

我已经创建了一个跨度值的变量：

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

但是现在当我设置这样的路径时：

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

它不会返回任何结果。

有人可以帮忙解决这个问题吗？并建议我如何使这种方法有效？

以下是代码，你宁愿不用JSFiddle进行测试：

＆＃13;

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;

＆＃13;

<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>

＆＃13;

Answer 1

tree.newPath查找名为＆＃34; newPath＆＃34;的键。在树对象

使用这样的函数来获取所需的节点：

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

JavaScript在行走JSON树时更改路径

1 个答案: