javascript - 获取 JSON 对象中的所有路径

标签 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, 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 的输出很有用

关于javascript - 获取 JSON 对象中的所有路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37759768/

相关文章:

javascript - d3.timeScale() X轴不显示年份

javascript - 叠加两个 AmCharts

javascript - 嵌套集合的 Lodash 映射

javascript - 享受 Javascript 的乐趣

json - 在 MongodB JSON 样式的文档中存储 HTML 的好策略是什么

javascript - 在nodejs中将现有对象查找到数组中

javascript - 如何定位和查看页面上正在使用的 Javascript?

javascript - 如何从 Apache Velocity 中的 .vm 文件获取整个 HTML?

jquery - $.each([集合]) 与 $([集合]).each()

javascript - Billboard.js 中图表的 Y 轴未正确更新