樹形結構資料的處理 JsonPath在前端的使用

2021-10-06 23:42:53 字數 1064 閱讀 4600

先來看一下我的資料結構,每個資料都可能存在children屬性,每個children屬性中都可能有乙個或多個物件。要求找出所有的id,並進行相應的操作。

let data = ,]

},]}

之前一直使用的方式都是遞迴遍歷,以獲取全部的id。最近了解到了jsonpath的存在,讓我心情很激動。這麼好用的工具,我竟然現在才知道,必須推薦給大家。官方文件在此

使用方法並不難,但文件是英文的,所以在這裡總結一下。

1、安裝

npm install jsonpath
2、引入

//in node.js:

var jsonpath = require('jsonpath');

// or

import jsonpath from 'jsonpath';

//for browser usage

3、使用

jsonpath();

// or

jsonpath(options, path, obj, callback, othertypecallback);

4、例項——以上述data為例

// 資料中全部的id

const idarr = this.jsonpath()

console.log(idarr); //[0,1,2,3]

// 過濾資料中,所有具有***屬性的物件

const objarr = this.jsonpath()

console.log(objarr);

//[,]

5、path操作符

$查詢根元素

.子節點

..所有節點

*萬用字元

@通常在過濾表示式中使用,表示需要過濾的節點

[number]

陣列索引

[start:end]

陣列切片

[?()]

過濾表示式,表示式支援的函式和運算子可參考這裡。

樹形結構資料處理

前端使用 構造樹型結構資料 param data 資料來源 param depid 兒子節點id欄位 預設 depid param parentid 父節點id欄位 預設 parentid param children 孩子節點資料儲存字段 預設 children param rootid 根id ...

js處理樹形結構資料過濾

最近專案經常遇到後台介面返回整個樹形結構,而前端展示只需要展示部分型別的資料,需要過濾一下,所以整理了乙個過濾方法。非層級結構時過濾非常簡單,只需要一層 就夠了 export function filtertree tree 而要做到子節點也過濾時就需要用到遞迴去過濾 思路梳理 迴圈陣列,然後過濾資...

資料結構 樹形結構

樹是一種表達資料之間層次關係的資料結構,樹中的每個節點有0個或者多個子節點,但只有乙個父節點,父節點為空的節點為根節點,一棵樹只有乙個根節點。樹結構的相關概念 數的度 乙個節點含有的子樹的個數成為該節點的度,一顆樹中最大的節點的度成為整顆數的度 葉節點 度為0的節點成為葉節點 根節點 沒有父節點的節...