Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
{ "data": [ { "no": 1, "division": "manji", "content": "Odit porro adipisci aperiam minus dolorem id vitae...", "inspection_date": "2023-11-09" }, { "no": 1, "division": "veci", "content": "Veniam nam vitae adipisci id. Architecto modi aut ...", "inspection_date": "2023-11-09" }, { "no": 2, "division": "manji", "content": "Aut molestias tenetur neque quis vero sint molesti...", "inspection_date": "2023-11-06" }, { "no": 2, "division": "veci", "content": "Et perspiciatis explicabo ullam totam architecto e...", "inspection_date": "2023-11-09" }, { "no": 3, "division": "manji", "content": "Dolor magnam blanditiis dolorem dignissimos. Digni...", "inspection_date": "2023-11-08" }, { "no": 3, "division": "veci", "content": "Quo est veniam in quisquam et molestias sequi. Con...", "inspection_date": "2023-11-09" }, { "no": 4, "division": "manji", "content": "Vel alias sed quia quis. Velit dignissimos maxime ...", "inspection_date": "2023-11-09" }, { "no": 4, "division": "veci", "content": "Rerum molestias maxime error in. Aut nihil commodi...", "inspection_date": "2023-11-09" }, { "no": 5, "division": "manji", "content": "Magnam harum pariatur ratione quasi est. Error vol...", "inspection_date": "2023-11-08" }, { "no": 5, "division": "veci", "content": "Voluptas aliquid doloremque et numquam quam quo qu...", "inspection_date": "2023-11-09" } ], "links": { "first": "http://localhost:8000/api/posts?page=1", "last": "http://localhost:8000/api/posts?page=2", "prev": null, "next": "http://localhost:8000/api/posts?page=2" }, "meta": { "current_page": 1, "from": 1, "last_page": 2, "links": [ { "url": null, "label": "« Previous", "active": false }, { "url": "http://localhost:8000/api/posts?page=1", "label": "1", "active": true }, { "url": "http://localhost:8000/api/posts?page=2", "label": "2", "active": false }, { "url": "http://localhost:8000/api/posts?page=2", "label": "Next »", "active": false } ], "path": "http://localhost:8000/api/posts", "per_page": 10, "to": 10, "total": 20 } }
import { ref } from 'vue'
export default function usePosts() { const posts = ref({}) const filteredByDivision = ref({})
const getPosts = async (
page = 1,
category = '',
order_column = 'inspection_date',
order_direction = 'desc',
) => {
axios.get('api/posts?page=' + page +
'&category=' + category +
'&order_column' + order_column +
'&order_direction' + order_direction)
.then(response => {
posts.value = response.data;
filteredByDivision .....
})
}
return { posts,filteredByDivision , getPosts }
}
how to filter only unique division values and show them in dropdown
Make a new endpoint to only get the unique divisions values, by using group by.
You can't filter them in your posts endpoint bc, since this is a paginated endpoint, there is no guarantee your posts page will actually include all the values to begin with.
Follow @krisi_gjika advice and create different endpoint. The key being 'different' as the behaviour is exactly that.
This is for a better view of his data:
{
"data": [
{
"no": 1,
"division": "manji",
"content": "Odit porro adipisci aperiam minus dolorem id vitae...",
"inspection_date": "2023-11-09"
},
{
"no": 1,
"division": "veci",
"content": "Veniam nam vitae adipisci id. Architecto modi aut ...",
"inspection_date": "2023-11-09"
},
{
"no": 2,
"division": "manji",
"content": "Aut molestias tenetur neque quis vero sint molesti...",
"inspection_date": "2023-11-06"
},
{
"no": 2,
"division": "veci",
"content": "Et perspiciatis explicabo ullam totam architecto e...",
"inspection_date": "2023-11-09"
},
{
"no": 3,
"division": "manji",
"content": "Dolor magnam blanditiis dolorem dignissimos. Digni...",
"inspection_date": "2023-11-08"
},
{
"no": 3,
"division": "veci",
"content": "Quo est veniam in quisquam et molestias sequi. Con...",
"inspection_date": "2023-11-09"
},
{
"no": 4,
"division": "manji",
"content": "Vel alias sed quia quis. Velit dignissimos maxime ...",
"inspection_date": "2023-11-09"
},
{
"no": 4,
"division": "veci",
"content": "Rerum molestias maxime error in. Aut nihil commodi...",
"inspection_date": "2023-11-09"
},
{
"no": 5,
"division": "manji",
"content": "Magnam harum pariatur ratione quasi est. Error vol...",
"inspection_date": "2023-11-08"
},
{
"no": 5,
"division": "veci",
"content": "Voluptas aliquid doloremque et numquam quam quo qu...",
"inspection_date": "2023-11-09"
}
],
"links": {
"first": "http://localhost:8000/api/posts?page=1",
"last": "http://localhost:8000/api/posts?page=2",
"prev": null,
"next": "http://localhost:8000/api/posts?page=2"
},
"meta": {
"current_page": 1,
"from": 1,
"last_page": 2,
"links": [
{
"url": null,
"label": "« Previous",
"active": false
},
{
"url": "http://localhost:8000/api/posts?page=1",
"label": "1",
"active": true
},
{
"url": "http://localhost:8000/api/posts?page=2",
"label": "2",
"active": false
},
{
"url": "http://localhost:8000/api/posts?page=2",
"label": "Next »",
"active": false
}
],
"path": "http://localhost:8000/api/posts",
"per_page": 10,
"to": 10,
"total": 20
}
}
Now, with a much better view of your data, I found this package, which is like the laravel collection of javascript. Do you think the unique method will solve your problem?
Still, as suggested in earlier replies, a different API endpoint just to retrieve the divisions would be the best approach.
Please or to participate in this conversation.