vue 中JSONPath的使用方法之一

當我們在寫項目的過程過可能會有遇到接口層級拼接拿取數據的過程，這個時候我們就用到JSONPath
首先分析下這個過程：

   1、我們可能會通過表單的方式添加一些字段，信息。然后將其傳回后台數據庫保存

 

2、這個時候我們就會添加一個esField字段用於儲存字段路徑。

 

 3、在另一個需要展示的頁面將這個字段路徑當做參數返回給后端進行查詢數據

             

 

 相信不難看出，list下的每一項里面的結構都是和傳給后端的參數保持一致的。這個時候我們就需要拿到對應的值，這里我是要將這些數據放在一個生成表格的數組里（element-ui）

 

 

 怎么實現的呢  ，問題來了

 

 這個過程中呢會發現這個路徑如何拼接都拿不到值  

 

 這樣存放進去是一個標准的鍵值對

例如：arr:[

     { object: 'data.page.list[i].tmon.env_string'}

]

而這里 的object並不是具體的值，而是一個帶有層級關系的路徑。

這里我們就會用到JSONPath

首先安裝依賴

npm install JSONPath

　接下來就可以使用他來做處理

var JSONPath = require('JSONPath')

JSONPath(json, path, obj, callback, otherTypeCallback)

　　我是這樣使用的，JSONPath里面的第一個參數可以給一個空字符，不能不寫，第二個參數就是你當時第一個接口傳給你的路徑,如上（tmon.env_string），第三個參數就寫當前接口的這個對象（data.page.list[i]）這個對象下就是tmon.env_string對應的值

 

 現在我們就能拿到具體的值

 

 然后將其展示在table中