获取 JSON 对象中的所有路径

Question

搞砸了一段时间，无法正确处理。我正在尝试为此 JSON 中的每个路径创建数组。

[
  {
    "WebApp : calendar": {
      "count": 3151,
      "next": {
        "ViewWorkout": {
          "count": 521,
          "next": {
            "BeginUserSession": {
              "count": 12,
              "next": {}
            },
            "EditWorkout": {
              "count": 134,
              "next": {}
            },
            "WebApp : expandoOpened": {
              "count": 116,
              "next": {}
            },
            "Mobile : Feed": {
              "count": 2,
              "next": {}
            },
            "WebApp : athleteLoadedFromLibrary": {
              "count": 45,
              "next": {}
            },
            "ViewWorkout": {
              "count": 108,
              "next": {}
            },
            "WebApp : workoutQuickViewTabmapGraphClicked": {
              "count": 18,
              "next": {}
            },
            "DeleteWorkout": {
              "count": 9,
              "next": {}
            },
            "WebApp : headerWorkoutIconClicked": {
              "count": 3,
              "next": {}
            },
            "WebApp : notificationCenterOpened": {
              "count": 14,
              "next": {}
            },
            "WebApp : calendar": {
              "count": 3,
              "next": {}
            },
            "WebApp : workoutQuickViewTabsummaryClicked": {
              "count": 1,
              "next": {}
            },
            "AddWorkout": {
              "count": 8,
              "next": {}
            },
            "DeleteEvent": {
              "count": 1,
              "next": {}
            },
            "ViewWorkoutMapAndGraph": {
              "count": 2,
              "next": {}
            },
            "WebApp : fileUploadMenuOpened": {
              "count": 7,
              "next": {}
            },
            "WebApp : athleteSettingsLoadedFromLibrary": {
              "count": 1,
              "next": {}
            },
            "WebApp : workoutQuickViewTabpowerClicked": {
              "count": 2,
              "next": {}
            },
            "WebApp : distributionChartLoaded": {
              "count": 2,
              "next": {}
            },
            "WebApp : homeViewed": {
              "count": 2,
              "next": {}
            },
            "WebApp : loadNotificationFeedbackLocation": {
              "count": 3,
              "next": {}
            },
            "Mobile : athleteChanged": {
              "count": 1,
              "next": {}
            },
            "WebApp : workoutQuickViewTabheartrateClicked": {
              "count": 2,
              "next": {}
            },
            "WebApp : qvUnitsMenutUpdateUnitsToMetricClicked": {
              "count": 1,
              "next": {}
            },
            "WebApp : goToLastWeek": {
              "count": 4,
              "next": {}
            },
            "WebApp : createWorkoutFromLibrary": {
              "count": 2,
              "next": {}
            },
            "AddEvent": {
              "count": 1,
              "next": {}
            },
            "ViewAthleteList": {
              "count": 1,
              "next": {}
            },
            "WebApp : planLoadedFromLibrary": {
              "count": 2,
              "next": {}
            },
            "WebApp : enterFullScreen": {
              "count": 1,
              "next": {}
            },
            "WebApp : downloadFileClicked": {
              "count": 1,
              "next": {}
            },
            "WebApp : contextMenuOpened": {
              "count": 1,
              "next": {}
            }
          }
        },
        "WebApp : athleteLoadedFromLibrary": {
          "count": 1230,
          "next": {
            "WebApp : calendar": {
              "count": 1190,
              "next": {}
            },
            "WebApp : goToLastWeek": {
              "count": 3,
              "next": {}
            },
            "ViewWorkout": {
              "count": 12,
              "next": {}
            },
            "BeginUserSession": {
              "count": 7,
              "next": {}
            },
            "AddWorkout": {
              "count": 3,
              "next": {}
            },
            "WebApp : athleteLoadedFromLibrary": {
              "count": 7,
              "next": {}
            },
            "WebApp : refreshCalendar": {
              "count": 1,
              "next": {}
            },
            "WebApp : quickViewOpened": {
              "count": 1,
              "next": {}
            },
            "WebApp : notificationCenterOpened": {
              "count": 1,
              "next": {}
            },
            "WebApp : selectCalendarDate": {
              "count": 1,
              "next": {}
            },
            "WebApp : goToNextWeek": {
              "count": 1,
              "next": {}
            },
            "WebApp : createWorkoutFromLibrary": {
              "count": 1,
              "next": {}
            }
          }
        },
        "WebApp : notificationCenterOpened": {
          "count": 276,
          "next": {
            "WebApp : loadNotificationFeedbackLocation": {
              "count": 111,
              "next": {}
            },
            "WebApp : athleteLoadedFromLibrary": {
              "count": 76,
              "next": {}
            },
            "ViewWorkout": {
              "count": 19,
              "next": {}
            },
            "AddEvent": {
              "count": 1,
              "next": {}
            },
            "WebApp : notificationCenterOpened": {
              "count": 9,
              "next": {}
            },
            "AddWorkout": {
              "count": 5,
              "next": {}
            },
            "BeginUserSession": {
              "count": 16,
              "next": {}
            },
            "WebApp : calendar": {
              "count": 3,
              "next": {}
            },
            "WebApp : goToLastWeek": {
              "count": 2,
              "next": {}
            },
            "WebApp : addAthlete": {
              "count": 5,
              "next": {}
            },
            "$campaign_delivery": {
              "count": 1,
              "next": {}
            },
            "Mobile : Feed": {
              "count": 2,
              "next": {}
            },
            "WebApp : createWorkoutFromLibrary": {
              "count": 2,
              "next": {}
            },
            "WebApp : homeViewed": {
              "count": 1,
              "next": {}
            },
            "WebApp : dashboardViewed": {
              "count": 2,
              "next": {}
            },
            "WebApp : athleteSettingsLoadedFromLibrary": {
              "count": 3,
              "next": {}
            },
            "WebApp : calendarLoadedViaLoadDragNDrop": {
              "count": 2,
              "next": {}
            },
            "WebApp : groupLoadedFromLibrary": {
              "count": 1,
              "next": {}
            },
            "WebApp : workoutQuickViewTabpowerClicked": {
              "count": 1,
              "next": {}
            },
            "WebApp : refreshCalendar": {
              "count": 1,
              "next": {}
            },
            "CMS : Download Chart Exchange chart": {
              "count": 1,
              "next": {}
            },
            "WebApp : selectCalendarDate": {
              "count": 1,
              "next": {}
            }
          }
        },
        "WebApp : planLoadedFromLibrary": {
          "count": 24,
          "next": {
            "WebApp : calendar": {
              "count": 23,
              "next": {}
            },
            "AddTrainingPlanWorkout": {
              "count": 1,
              "next": {}
            }
          }
        }
      }
    }
  }
]

真正的最终目标是使用 D3 可视化每条路径，但现在我只是想弄清楚如何循环遍历数据并获取所有可能的路径。

输出应该看起来像这样，并考虑到它们可能是同一结构的更多级别。

WebApp : calendar (3151) -> ViewWorkout (521) -> BeginUserSession (12)
WebApp : calendar (3151) -> ViewWorkout (521) -> EditWorkout (134)
...
WebApp : calendar (3151) -> WebApp : athleteLoadedFromLibrary (1230) -> WebApp : calendar (731)

Answer 1

function rKeys(o, path="") {
  if (!o || typeof o !== "object") return path;
  return Object.keys(o).map(key => rKeys(o[key], path ? [path, key].join(".") : key))
}

const objectPaths = (o) => { return rKeys(o).toString().split(",") }

console.log(objectPaths({x: {y: {z: 1}, g: {a: 1, b: 2}}}))

上面输出了一个由 . 分隔的路径列表。你的对象。然后，您可以使用 lodash 的 get 方法访问该值

const foo = {bar: {baz: "foo"}}
_.get(foo, "bar.baz") === "foo" // true

所以 rKeys 的输出很有用

Answer 2

我认为以下 sn-p 可以满足您的要求。

function getPaths(o, root = "", result = []) {
  var ok = Object.keys(o);
  return ok.reduce((a,k) => { var p = root + k + "(" + o[k].count + ") -> ";
                              Object.keys(o[k].next).length ? getPaths(o[k].next,p,a)
                                                            : a.push(p);
                              return a;
                            },result);
}
var data = [
  {
    "WebApp : calendar": {
      "count": 3151,
      "next": {
        "ViewWorkout": {
          "count": 521,
          "next": {
            "BeginUserSession": {
              "count": 12,
              "next": {}
            },
            "EditWorkout": {
              "count": 134,
              "next": {}
            },
            "WebApp : expandoOpened": {
              "count": 116,
              "next": {}
            },
            "Mobile : Feed": {
              "count": 2,
              "next": {}
            },
            "WebApp : athleteLoadedFromLibrary": {
              "count": 45,
              "next": {}
            },
            "ViewWorkout": {
              "count": 108,
              "next": {}
            },
            "WebApp : workoutQuickViewTabmapGraphClicked": {
              "count": 18,
              "next": {}
            },
            "DeleteWorkout": {
              "count": 9,
              "next": {}
            },
            "WebApp : headerWorkoutIconClicked": {
              "count": 3,
              "next": {}
            },
            "WebApp : notificationCenterOpened": {
              "count": 14,
              "next": {}
            },
            "WebApp : calendar": {
              "count": 3,
              "next": {}
            },
            "WebApp : workoutQuickViewTabsummaryClicked": {
              "count": 1,
              "next": {}
            },
            "AddWorkout": {
              "count": 8,
              "next": {}
            },
            "DeleteEvent": {
              "count": 1,
              "next": {}
            },
            "ViewWorkoutMapAndGraph": {
              "count": 2,
              "next": {}
            },
            "WebApp : fileUploadMenuOpened": {
              "count": 7,
              "next": {}
            },
            "WebApp : athleteSettingsLoadedFromLibrary": {
              "count": 1,
              "next": {}
            },
            "WebApp : workoutQuickViewTabpowerClicked": {
              "count": 2,
              "next": {}
            },
            "WebApp : distributionChartLoaded": {
              "count": 2,
              "next": {}
            },
            "WebApp : homeViewed": {
              "count": 2,
              "next": {}
            },
            "WebApp : loadNotificationFeedbackLocation": {
              "count": 3,
              "next": {}
            },
            "Mobile : athleteChanged": {
              "count": 1,
              "next": {}
            },
            "WebApp : workoutQuickViewTabheartrateClicked": {
              "count": 2,
              "next": {}
            },
            "WebApp : qvUnitsMenutUpdateUnitsToMetricClicked": {
              "count": 1,
              "next": {}
            },
            "WebApp : goToLastWeek": {
              "count": 4,
              "next": {}
            },
            "WebApp : createWorkoutFromLibrary": {
              "count": 2,
              "next": {}
            },
            "AddEvent": {
              "count": 1,
              "next": {}
            },
            "ViewAthleteList": {
              "count": 1,
              "next": {}
            },
            "WebApp : planLoadedFromLibrary": {
              "count": 2,
              "next": {}
            },
            "WebApp : enterFullScreen": {
              "count": 1,
              "next": {}
            },
            "WebApp : downloadFileClicked": {
              "count": 1,
              "next": {}
            },
            "WebApp : contextMenuOpened": {
              "count": 1,
              "next": {}
            }
          }
        },
        "WebApp : athleteLoadedFromLibrary": {
          "count": 1230,
          "next": {
            "WebApp : calendar": {
              "count": 1190,
              "next": {}
            },
            "WebApp : goToLastWeek": {
              "count": 3,
              "next": {}
            },
            "ViewWorkout": {
              "count": 12,
              "next": {}
            },
            "BeginUserSession": {
              "count": 7,
              "next": {}
            },
            "AddWorkout": {
              "count": 3,
              "next": {}
            },
            "WebApp : athleteLoadedFromLibrary": {
              "count": 7,
              "next": {}
            },
            "WebApp : refreshCalendar": {
              "count": 1,
              "next": {}
            },
            "WebApp : quickViewOpened": {
              "count": 1,
              "next": {}
            },
            "WebApp : notificationCenterOpened": {
              "count": 1,
              "next": {}
            },
            "WebApp : selectCalendarDate": {
              "count": 1,
              "next": {}
            },
            "WebApp : goToNextWeek": {
              "count": 1,
              "next": {}
            },
            "WebApp : createWorkoutFromLibrary": {
              "count": 1,
              "next": {}
            }
          }
        },
        "WebApp : notificationCenterOpened": {
          "count": 276,
          "next": {
            "WebApp : loadNotificationFeedbackLocation": {
              "count": 111,
              "next": {}
            },
            "WebApp : athleteLoadedFromLibrary": {
              "count": 76,
              "next": {}
            },
            "ViewWorkout": {
              "count": 19,
              "next": {}
            },
            "AddEvent": {
              "count": 1,
              "next": {}
            },
            "WebApp : notificationCenterOpened": {
              "count": 9,
              "next": {}
            },
            "AddWorkout": {
              "count": 5,
              "next": {}
            },
            "BeginUserSession": {
              "count": 16,
              "next": {}
            },
            "WebApp : calendar": {
              "count": 3,
              "next": {}
            },
            "WebApp : goToLastWeek": {
              "count": 2,
              "next": {}
            },
            "WebApp : addAthlete": {
              "count": 5,
              "next": {}
            },
            "$campaign_delivery": {
              "count": 1,
              "next": {}
            },
            "Mobile : Feed": {
              "count": 2,
              "next": {}
            },
            "WebApp : createWorkoutFromLibrary": {
              "count": 2,
              "next": {}
            },
            "WebApp : homeViewed": {
              "count": 1,
              "next": {}
            },
            "WebApp : dashboardViewed": {
              "count": 2,
              "next": {}
            },
            "WebApp : athleteSettingsLoadedFromLibrary": {
              "count": 3,
              "next": {}
            },
            "WebApp : calendarLoadedViaLoadDragNDrop": {
              "count": 2,
              "next": {}
            },
            "WebApp : groupLoadedFromLibrary": {
              "count": 1,
              "next": {}
            },
            "WebApp : workoutQuickViewTabpowerClicked": {
              "count": 1,
              "next": {}
            },
            "WebApp : refreshCalendar": {
              "count": 1,
              "next": {}
            },
            "CMS : Download Chart Exchange chart": {
              "count": 1,
              "next": {}
            },
            "WebApp : selectCalendarDate": {
              "count": 1,
              "next": {}
            }
          }
        },
        "WebApp : planLoadedFromLibrary": {
          "count": 24,
          "next": {
            "WebApp : calendar": {
              "count": 23,
              "next": {}
            },
            "AddTrainingPlanWorkout": {
              "count": 1,
              "next": {}
            }
          }
        }
      }
    }
  }
],
paths = getPaths(data[0]);
console.log(paths);

您必须以根对象作为参数调用getPaths 函数。在你的情况下，它就像getPaths(data[0]);，结果将是所有路径的数组。