在物件陣列中過濾物件陣列

我正在嘗試過濾此 json。

這是json

const json = {
  address: "fdqn",
  pDet: [
    {
      pNam: "pnam1",
      pMem: [
        {
          mIP: "1234",  // search this string '1234'
          gp: "gp1"
        }, {
          mIP: "567", 
          gp: "gp2"
        }, {
          mIP: "890", 
          gp: "gp3"
        }
      ]
    },
    {
      pNam: "pnam1",
      pMem: [
        {
          mIP: "4567", 
          gp: "gp5"
        }, {
          mIP: "5674", 
          gp: "gp7"
        }
      ]
    }
  ]
}

我需要使用mIP = "1234"進行過濾，最終輸出應該是。

const json = {
    address: "fdqn",
    pDet: [
      {
        pNam: "pnam1",
        pMem: [
          {
            mIP: "1234", 
            gp: "gp1"
          }
        ]
      }
    ]
  }

我嘗試了過濾器和一些，但似乎我需要在過濾器內部進行迭代。任何輸入將不勝感激

uj5u.com熱心網友回復：

利用flatMap模仿其他語言filter_map的行為，我們可以得到這樣的結果：

const json = {address:"fdqn",pDet:[{pNam:"pnam1",pMem:[{mIP:"1234",gp:"gp1"},{mIP:"567",gp:"gp2"},{mIP:"890",gp:"gp3"}]},{pNam:"pnam1",pMem:[{mIP:"4567",gp:"gp5"},{mIP:"5674",gp:"gp7"}]}]};

const search = "1234";

const result = {
    address: json.address,
    // check if there is any match in this pMem
    pDet: json.pDet.flatMap(({ pMem }) => pMem.some(({ mIP }) => mIP === search)
        ? [pMem.filter(({ mIP }) => mIP === search)] // if there is, return filtered array
        : [] // otherwise, return nothing
    ),
};

console.log(result);

uj5u.com熱心網友回復：

你可以使用array.reduce()和array.filter()喜歡這個。

const json = { address: "fdqn", pDet: [{ pNam: "pnam1", pMem: [{ mIP: "1234", gp: "gp1" }, { mIP: "567", gp: "gp2" }, { mIP: "890", gp: "gp3" }] }, { pNam: "pnam1", pMem: [{ mIP: "4567", gp: "gp5" }, { mIP: "5674", gp: "gp7" }] } ] }

const newJSON = {
    address: json.address,
    pDet: json.pDet.reduce((newArr, obj) => {
        const pMem = obj.pMem.filter(obj2 => obj2.mIP === '1234')
        if (pMem.length) newArr.push({
            pNam: obj.pNam,
            pMem
        })
        return newArr
    }, [])
}

console.log(newJSON)

在一個函式中，它可能如下所示：

const json = { address: "fdqn", pDet: [{ pNam: "pnam1", pMem: [{ mIP: "1234", gp: "gp1" }, { mIP: "567", gp: "gp2" }, { mIP: "890", gp: "gp3" }] }, { pNam: "pnam1", pMem: [{ mIP: "4567", gp: "gp5" }, { mIP: "5674", gp: "gp7" }] } ] }

function filterArray(jsonObj, searchStr) {
    return {
        address: json.address,
        pDet: json.pDet.reduce((newArr, obj) => {
            const pMem = obj.pMem.filter(obj2 => obj2.mIP === search)
            if (pMem.length) newArr.push({
                pNam: obj.pNam,
                pMem
            })
            return newArr
        }, [])
    }
}

const newJSON = filterArray(json, '1234')

console.log( newJSON )

uj5u.com熱心網友回復：

類似于@caTS的答案中的技術，雖然更通用一點，但我使用了filterMap. 就我而言，我抓住了一個方便的可重用函式。它看起來像這樣：

const filterMap = (f, m) => (xs) => xs .flatMap (x => f (x) ? [m (x)] : [])

const searchMIP = ({pDet, ...rest}, query) => ({
  ...rest,
  pDet: filterMap (
    ({pMem}) => pMem .some (({mIP}) => mIP == query),
    ({pMem, ...rest}) => ({...rest, pMem: pMem .filter (({mIP}) => mIP == query)})
  ) (pDet)
})

const obj = {address: "fdqn", pDet: [{pNam: "pnam1", pMem: [{mIP: "1234", gp: "gp1"}, {mIP: "567", gp: "gp2"}, {mIP: "890", gp: "gp3"}]}, {pNam: "pnam1", pMem: [{mIP: "4567", gp: "gp5"}, {mIP: "5674", gp: "gp7"}]}]}

console .log (searchMIP (obj, '1234'))

但我對此并不滿意，因為它通常的優點之一filterMap是它只掃描串列一次。但是在這里，我們在過濾器部分使用some，然后在地圖部分使用filter.

所以這里有一個稍微不同的方法，仍然使用flatMap做類似的事情，但只過濾一次并使用length結果來決定我們是否保留物件：

const searchMIP = ({pDet, ...rest}, query) => ({
  ...rest,
  pDet: pDet .flatMap (
    ({pMem, kids = pMem .filter (({mIP}) => mIP == query), ...rest}) => kids .length ? [({
      ...rest, 
      pMem: pMem .filter (({mIP}) => mIP == query)
    })] : [] 
  )
})

const obj = {address: "fdqn", pDet: [{pNam: "pnam1", pMem: [{mIP: "1234", gp: "gp1"}, {mIP: "567", gp: "gp2"}, {mIP: "890", gp: "gp3"}]}, {pNam: "pnam1", pMem: [{mIP: "4567", gp: "gp5"}, {mIP: "5674", gp: "gp7"}]}]}

console .log (searchMIP (obj, '1234'))

.as-console-wrapper {max-height: 100% !important; top: 0}

這與用戶@Ludolfyn的答案更相似，但沒有可變累加器，而且更通用。

標籤：javascript

上一篇：如何在ReactJS中創建日期陣列

下一篇：Vercel部署錯誤：命令“npmrunbuild”以1退出。部署Next.jsWeb應用程式時