How to search product name from category object using lodash or any JS library in VueJS

user_13975316 0
Viewed 363

I using below object for search product from category object in vue.js.

I have try using that way but not working:

_.find(this.allCategories, _.flow(
  _.property('product'),
      _.partialRight(_.some, { product_name: "Shir" })
));

My object:

[{
    "id": 2,
    "name": "Shirt",
    "product": [{
        "id": 1,
        "product_name": "Shirt 123",
        "price": "150.00",
        "image": "http://localhost/l9FRGvZDfb.jpeg"
    }, {
        "id": 4,
        "product_name": "Shirt 456",
        "price": "12.44",
        "image": "http://localhost/A5rmGtOnW9.jpeg"
    }]
}, {
    "id": 2,
    "name": "Froots",
    "product": [{
        "id": 1,
        "product_name": "Apple 121",
        "image": "http://localhost/Dfb.jpeg"
    }, {
        "id": 4,
        "product_name": "Banana 121",
        "price": "12.44",
        "image": "http://localhost/tOnW9.jpeg"
    }]
}]
vue.js node.js javascript
3 Answers

Below snippet (in vanilla js) could help you

const categories = [
  {
    id: 2,
    name: "Shirt",
    product: [
      {
        id: 1,
        product_name: "Shirt 123",
        price: "150.00",
        image: "http://localhost/l9FRGvZDfb.jpeg",
      },
      {
        id: 4,
        product_name: "Shirt 456",
        price: "12.44",
        image: "http://localhost/A5rmGtOnW9.jpeg",
      },
    ],
  },
  {
    id: 2,
    name: "Froots",
    product: [
      {
        id: 1,
        product_name: "Apple 121",
        image: "http://localhost/Dfb.jpeg",
      },
      {
        id: 4,
        product_name: "Banana 121",
        price: "12.44",
        image: "http://localhost/tOnW9.jpeg",
      },
    ],
  },
]

const term = "hirt"

const res = categories
  .flatMap(({ product }) => product)
  .filter(({ product_name }) =>
    product_name.toLowerCase().includes(term.toLowerCase())
  )

console.log(res)

Lodash version

const categories = [
  {
    id: 2,
    name: "Shirt",
    product: [
      {
        id: 1,
        product_name: "Shirt 123",
        price: "150.00",
        image: "http://localhost/l9FRGvZDfb.jpeg",
      },
      {
        id: 4,
        product_name: "Shirt 456",
        price: "12.44",
        image: "http://localhost/A5rmGtOnW9.jpeg",
      },
    ],
  },
  {
    id: 2,
    name: "Froots",
    product: [
      {
        id: 1,
        product_name: "Apple 121",
        image: "http://localhost/Dfb.jpeg",
      },
      {
        id: 4,
        product_name: "Banana 121",
        price: "12.44",
        image: "http://localhost/tOnW9.jpeg",
      },
    ],
  },
]

const term = "hirt"

const res = _.chain(categories)
  .flatMap("product")
  .filter((product) =>
    product.product_name.toLowerCase().includes(term.toLowerCase())
  )
  .value()

console.log(res)
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>

user_66551600

My experience with Lodash is limited, but here's a fairly simple vanilla JS example that should accomplish what you're attempting to do. The comments should run through each step, but let me know if you would like me to expand on any of the code.

const data = [{
    "id": 2,
    "name": "Shirt",
    "product": [{
        "id": 1,
        "product_name": "Shirt 123",
        "price": "150.00",
        "image": "http://localhost/l9FRGvZDfb.jpeg"
    }, {
        "id": 4,
        "product_name": "Shirt 456",
        "price": "12.44",
        "image": "http://localhost/A5rmGtOnW9.jpeg"
    }]
}, {
    "id": 2,
    "name": "Froots",
    "product": [{
        "id": 1,
        "product_name": "Apple 121",
        "image": "http://localhost/Dfb.jpeg"
    }, {
        "id": 4,
        "product_name": "Banana 121",
        "price": "12.44",
        "image": "http://localhost/tOnW9.jpeg"
    }]
}]

const input = 'Shir'

// Obtain a flattened array of all products
const products = data.map(item => item.product).flat()

// Filter the list of products by name that starts with the input
// Note that you can replace the `product.product_name.startsWith(input)` with any filter function to improve your search
const output = products.filter(product => product.product_name.startsWith(input))

console.log(output)

Edit:

Per VR702's comment...

Thanks for answer :). I have implemented this code but it's return only product object but I want with category object

...we need to print out the categories that the product came from rather than the product itself. Note that I needed to modify the data to make the category IDs unique (as it seemed that may have been an error). If it's not an error, the name property can be used in its place.

const categories = [{
    "id": 2,
    "name": "Shirt",
    "product": [{
        "id": 1,
        "product_name": "Shirt 123",
        "price": "150.00",
        "image": "http://localhost/l9FRGvZDfb.jpeg"
    }, {
        "id": 4,
        "product_name": "Shirt 456",
        "price": "12.44",
        "image": "http://localhost/A5rmGtOnW9.jpeg"
    }]
}, {
    "id": 3,
    "name": "Froots",
    "product": [{
        "id": 1,
        "product_name": "Apple 121",
        "image": "http://localhost/Dfb.jpeg"
    }, {
        "id": 4,
        "product_name": "Banana 121",
        "price": "12.44",
        "image": "http://localhost/tOnW9.jpeg"
    }]
}]

const input = 'Shir'

// Obtain a flattened array of all products
// Include the id of the category it came from as well
const products = []
categories.forEach(category => {
  category.product.forEach(product => {
    products.push({
       category: category.id,
       ...product
    })
  })
})

// Filter the list of products by name that starts with the input
// Note that you can replace the `product.product_name.startsWith(input)` with any filter function to improve your search
// Then return the category that that product came from
// Finally remove any duplicates using [...new Set()]
const selectedCategories = [...new Set(
  products
    .filter(product => product.product_name.startsWith(input))
    .map(product => product.category)
)]

// Return the categories we found by searching through our initial list of categories
const output = categories.filter(category => selectedCategories.includes(category.id))

console.log(output)

user_50264380

you not need library !!!

You can find the desired string with js.

var product = [
      {
         "id":1,
         "product_name":"Shirt 123",
         "price":"150.00",
         "image":"http://localhost/l9FRGvZDfb.jpeg"
      },
      {
         "id":4,
         "product_name":"Shirt 456",
         "price":"12.44",
         "image":"http://localhost/A5rmGtOnW9.jpeg"
      }
   ]
var searchField = "Shirt 456";
for (var i=0 ; i < product.length ; i++)
{
    if (product[i].product_name == searchField) {
        console.log(product[i])
    }
}

user_106443160
Related