Как отфильтровать вложенный объект в response- bootstrap -typeahead? - PullRequest
0 голосов
/ 14 июля 2020

Я использую response- bootstrap -typeahead для поиска в React. Я столкнулся с проблемой фильтрации вложенного объекта.

const products = [
    {
        id : 1,
        name : "abc",
        applications:[
            {
                name:"ink",
                fullname:"INKK"
            },
            {
                name:"solvent",
                fullname:"ssINKK"
            }
        ]
    },
    {
        id:2,
        name:"xyz",
        applications:[
            {
                name:"ink22",
                fullname:"INKK"
            },
            {
                name:"solvent22",
                fullname:"ssINKK"
            }
        ]
    }
]


Я хочу искать по имени приложения. Например, при поиске ink22 он должен вернуть объект с id: 2 Ниже мой код. Любая помощь будет полезна. Спасибо.

import React  from "react";
import Typeahead from "react-bootstrap-typeahead/lib/components/Typeahead";

export default function Search(props){
    const { products } = props

    return (
        <Typeahead
            id="search-product"
            labelKey={option => `${option.name}`}
            minLength={1}
            filterBy={(option, props) => {
                console.log(props)
            }}
            options={products ? products : []}
            placeholder="Search"
            renderMenuItemChildren={(option, props) => (
                <div className="card-body">
                    <img src="/images/default.svg" className="float-left mt-2"/>
                        <div className="message ml-5">
                            <h5 className="card-title">{`${option.ci.name} ${option.name}`} </h5>
                            <h6 className="card-subtitle text-muted">{`${option.brand.name} ${option.range}`}</h6>
                        </div>
                </div>
            )}
        />
    );
};

1 Ответ

0 голосов
/ 14 июля 2020

loda sh - хороший друг.

const products = [
{
    id : 1,
    name : "abc",
    applications:[
        {
            name:"ink",
            fullname:"INKK"
        },
        {
            name:"solvent",
            fullname:"ssINKK"
        }
    ]
},
{
    id:2,
    name:"xyz",
    applications:[
        {
            name:"ink22",
            fullname:"INKK"
        },
        {
            name:"solvent22",
            fullname:"ssINKK"
        }
    ]
}];

const match = _.find(products, { applications: [{ name: 'ink22' }]});
console.log(match);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.19/lodash.min.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...