Wil*_*uce 5 javascript json d3.js
搞乱这个有一段时间了，但无法解决。我正在尝试为该 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)
function rKeys(o) {
if (!o || typeof o !== 'object') return [];
const paths = [];
const stack = [{ obj: o, path: [] }];
while (stack.length > 0) {
const { obj, path } = stack.pop();
if (typeof obj === 'object' && obj !== null) {
for (const key in obj) {
stack.push({ obj: obj[key], path: [...path, key] });
}
} else {
paths.push(path);
}
}
return paths;
}
console.log(...rKeys({ x: { y: { z: 1 }, g: { a: 1, b: 2 } } }));
上面输出由 分隔的路径列表。你的对象。然后您可以使用 lodash 的 get 方法访问该值
const foo = {bar: {baz: "foo"}}
_.get(foo, ["bar", "baz"]) === "foo" // true
所以 rKeys 的输出很有用
我认为下面的代码片段可以满足您的需求。
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]);结果将是所有路径的数组。
| 归档时间： |
|
| 查看次数： |
5988 次 |
| 最近记录： |