Lodash 过滤器数组和获取父索引答案

【问题标题】：Lodash Filter Array and Get Parent IndexLodash 过滤器数组和获取父索引
【发布时间】：2020-04-17 07:34:49
【问题描述】：

我的 Api 以 json 格式返回这个

[
   {
      "title":"Category One",
      "data":[
         {
            "id":"5",
            "code":"0001",
            "name":"Item Name"
         },
         {
            "id":"6",
            "code":"0002",
            "name":"Item Name 2"
         }
      ]
   },
   {
      "title":"Category Two",
      "data":[
         {
            "id":"7",
            "code":"0003",
            "name":"Item Name 3"
         },
         {
            "id":"8",
            "code":"0004",
            "name":"Item Name 4"
         }
      ]
   }
]

我想通过 id 过滤上面给定的数组我试过了：

_.filter(data, ["title.data.id", "5"]);

但是返回空数组，然后我也尝试过：

_.filter(data, { data: [{ id: "5" }] });

但返回完整的数组。

请指导我在这里缺少什么。

【问题讨论】：

标签： javascript reactjs react-native lodash

【解决方案1】：

您需要获取想要的属性并迭代内部数组。

var data = [{ title: "Category One", data: [{ id: "5", code: "0001", name: "Item Name" }, { id: "6", code: "0002", name: "Item Name 2" }] }, { title: "Category Two", data: [{ id: "7", code: "0003", name: "Item Name 3" }, { id: "8", code: "0004", name: "Item Name 4" }] }],
    result = _.filter(data, ({ data }) => _.some(data, ({ id }) => id === "5"));

console.log(result);

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

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

let obj = [
    {
        "title": "Category One",
        "data": [
            {
                "id": "5",
                "code": "0001",
                "name": "Item Name"
            },
            {
                "id": "6",
                "code": "0002",
                "name": "Item Name 2"
            }
        ]
    },
    {
        "title": "Category Two",
        "data": [
            {
                "id": "7",
                "code": "0003",
                "name": "Item Name 3"
            },
            {
                "id": "8",
                "code": "0004",
                "name": "Item Name 4"
            }
        ]
    }
]

function getFilterResult(filterValue) {
    let result = {}
    for (let i = 0; i < obj.length; i++) {
        let data = obj[i]['data']
        let index = data.findIndex(da => da.id === filterValue)
        if (index > -1) {
            result['title'] = obj[i].title
            data[index]['name']="New Item" /* added the code for updating the Name filed */
            result['data'] = [data[index]]
        }
    }
    return result
}

let finalResult = getFilterResult("7")
console.log(finalResult)

使用 lodash

let data = [
    {
        "title": "Category One",
        "data": [
            {
                "id": "5",
                "code": "0001",
                "name": "Item Name"
            },
            {
                "id": "6",
                "code": "0002",
                "name": "Item Name 2"
            }
        ]
    },
    {
        "title": "Category Two",
        "data": [
            {
                "id": "7",
                "code": "0003",
                "name": "Item Name 3"
            },
            {
                "id": "8",
                "code": "0004",
                "name": "Item Name 4"
            }
        ]
    }
];

var output = _.find(data, item => _.find(item.data, d => d.id === '7'));
output['data'][_.findIndex(output['data'], { id: '7' })]['name']= "New Item";
console.log(output)

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"&gt;&lt;/script&gt;

【讨论】：

不工作。它返回完整的数组
请检查我已经编辑了我的答案@DIGITALJEDI
谢谢它的工作，但你也可以用 lodash 做吗？
找到索引后可以改名字吗，用上面的方法？
我已经更新了我的第一个解决方案将更新密钥并仅发送匹配 id 对象，第二个使用 lodash 将返回具有更新名称的完整对象提交@DIGITALJEDI

【解决方案3】：

这里是简单的 JS 解决方案

const data = [
   {
      "title":"Category One",
      "data":[
         {
            "id":"5",
            "code":"0001",
            "name":"Item Name"
         },
         {
            "id":"6",
            "code":"0002",
            "name":"Item Name 2"
         }
      ]
   },
   {
      "title":"Category Two",
      "data":[
         {
            "id":"7",
            "code":"0003",
            "name":"Item Name 3"
         },
         {
            "id":"8",
            "code":"0004",
            "name":"Item Name 4"
         }
      ]
   }
];

const requried = data.find(item => item.data.find(d => d.id === '5'));

console.log(requried);

使用 lodash

const data = [
   {
      "title":"Category One",
      "data":[
         {
            "id":"5",
            "code":"0001",
            "name":"Item Name"
         },
         {
            "id":"6",
            "code":"0002",
            "name":"Item Name 2"
         }
      ]
   },
   {
      "title":"Category Two",
      "data":[
         {
            "id":"7",
            "code":"0003",
            "name":"Item Name 3"
         },
         {
            "id":"8",
            "code":"0004",
            "name":"Item Name 4"
         }
      ]
   }
];

const required = _.find(data, item => _.find(item.data, d => d.id === '5'));

console.log(required);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"&gt;&lt;/script&gt;

【讨论】：

不工作，从第一类数据集中返回两个数组。

【解决方案4】：

你可以用 reduce 和 filter 来做到这一点

const data = [
  {
    title: 'Category One',
    data: [
      {
        id: '5',
        code: '0001',
        name: 'Item Name',
      },
      {
        id: '6',
        code: '0002',
        name: 'Item Name 2',
      },
    ],
  },
  {
    title: 'Category Two',
    data: [
      {
        id: '7',
        code: '0003',
        name: 'Item Name 3',
      },
      {
        id: '8',
        code: '0004',
        name: 'Item Name 4',
      },
    ],
  },
];

data.reduce((acc, curr) => {
  const val = curr.data.filter((d) => d.id == '5');
  if (val.length) acc = [...acc, ...val];

  return acc;
}, []);

【讨论】：