Filtering a JSON response with Vue
I'm practicing using axios with Vue, but I think this may be more of a general JSON question.
I've successfully used axios to get my local products.json file and I'm then using filter to create a new array that only has products that have a matching department property, and looping those out.
Is this the correct way of doing this, or can I actually filter the JSON result on the original axios call? I understand I can to pass a parameter which will in turn perform a specific database call, and only provide the required JSON in the first place.
data(){
return {
products:
}
},
components: {
Product
},
computed: {
foodProducts(){
return this.products.filter(x => x.department == 'Food')
}
},
mounted() {
axios
.get('./json/products.json')
.then(response => (this.products = response.data.products))
}
Thanks. Just trying to clarify the theory behind it.
javascript vue.js axios
asked Dec 27 '18 at 18:23
paddyfields
644412
add a comment |
I'm practicing using axios with Vue, but I think this may be more of a general JSON question.
I've successfully used axios to get my local products.json file and I'm then using filter to create a new array that only has products that have a matching department property, and looping those out.
Is this the correct way of doing this, or can I actually filter the JSON result on the original axios call? I understand I can to pass a parameter which will in turn perform a specific database call, and only provide the required JSON in the first place.
data(){
return {
products:
}
},
components: {
Product
},
computed: {
foodProducts(){
return this.products.filter(x => x.department == 'Food')
}
},
mounted() {
axios
.get('./json/products.json')
.then(response => (this.products = response.data.products))
}
Thanks. Just trying to clarify the theory behind it.
javascript vue.js axios
asked Dec 27 '18 at 18:23
paddyfields
644412
1
So, what's wrong?
– vahdet
Dec 27 '18 at 18:26
Nothing, just wanted to clarify this is the right way to do it. As in, can I filter the result on the initial axios call, or will I always need to filter it afterwards as a computed property?
– paddyfields
Dec 27 '18 at 18:27
add a comment |
I'm practicing using axios with Vue, but I think this may be more of a general JSON question.
I've successfully used axios to get my local products.json file and I'm then using filter to create a new array that only has products that have a matching department property, and looping those out.
Is this the correct way of doing this, or can I actually filter the JSON result on the original axios call? I understand I can to pass a parameter which will in turn perform a specific database call, and only provide the required JSON in the first place.
data(){
return {
products:
}
},
components: {
Product
},
computed: {
foodProducts(){
return this.products.filter(x => x.department == 'Food')
}
},
mounted() {
axios
.get('./json/products.json')
.then(response => (this.products = response.data.products))
}
Thanks. Just trying to clarify the theory behind it.
javascript vue.js axios
asked Dec 27 '18 at 18:23
paddyfields
644412
I'm practicing using axios with Vue, but I think this may be more of a general JSON question.
I've successfully used axios to get my local products.json file and I'm then using filter to create a new array that only has products that have a matching department property, and looping those out.
Is this the correct way of doing this, or can I actually filter the JSON result on the original axios call? I understand I can to pass a parameter which will in turn perform a specific database call, and only provide the required JSON in the first place.
data(){
return {
products:
}
},
components: {
Product
},
computed: {
foodProducts(){
return this.products.filter(x => x.department == 'Food')
}
},
mounted() {
axios
.get('./json/products.json')
.then(response => (this.products = response.data.products))
}
Thanks. Just trying to clarify the theory behind it.
javascript vue.js axios
javascript vue.js axios
asked Dec 27 '18 at 18:23
paddyfields
644412
asked Dec 27 '18 at 18:23
paddyfields
644412
asked Dec 27 '18 at 18:23
paddyfields
644412
asked Dec 27 '18 at 18:23
paddyfields
644412
asked Dec 27 '18 at 18:23
paddyfields
644412
644412
1
So, what's wrong?
– vahdet
Dec 27 '18 at 18:26
Nothing, just wanted to clarify this is the right way to do it. As in, can I filter the result on the initial axios call, or will I always need to filter it afterwards as a computed property?
– paddyfields
Dec 27 '18 at 18:27
add a comment |
1
So, what's wrong?
– vahdet
Dec 27 '18 at 18:26
Nothing, just wanted to clarify this is the right way to do it. As in, can I filter the result on the initial axios call, or will I always need to filter it afterwards as a computed property?
– paddyfields
Dec 27 '18 at 18:27
1
1
So, what's wrong?
– vahdet
Dec 27 '18 at 18:26
So, what's wrong?
– vahdet
Dec 27 '18 at 18:26
Nothing, just wanted to clarify this is the right way to do it. As in, can I filter the result on the initial axios call, or will I always need to filter it afterwards as a computed property?
– paddyfields
Dec 27 '18 at 18:27
Nothing, just wanted to clarify this is the right way to do it. As in, can I filter the result on the initial axios call, or will I always need to filter it afterwards as a computed property?
– paddyfields
Dec 27 '18 at 18:27
add a comment |
2 Answers
2
active
oldest
votes
It works in many ways depending on your situation or requirement.
Your way works. Alternatively, you can also filter the result directly from the API call assuming that the backend is returning a full result.
data() {
return {
filteredProducts:
}
}
mounted() {
axios.get(API_URL)
.then(response => {
const products = response.data
this.filteredProducts = products.filter(product => product.department.includes('food'))
})
}
answered Dec 27 '18 at 18:49
Ru Chern Chong
2,04241628
add a comment |
If you're querying the products list from a Back-end server,
you may use query parameters like
xxx/products?department=XXX
then the backend server can do the filtering for you.
In your case, it looks like you are simply reading a local JSON file, so the entire JSON is returned, and you have to filter yourself.
answered Dec 27 '18 at 18:37
Tang Yun
898
This only works if you have full control of the backend as well, but it still works given the circumstances.
– Ru Chern Chong
Dec 27 '18 at 19:19
yes of course. Check the API docs if you're using a public API endpoint or check with back-end developer on passing query string parameters. @RuChernChong thanks for pointing out.
– Tang Yun
Dec 27 '18 at 19:22
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53949294%2ffiltering-a-json-response-with-vue%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
It works in many ways depending on your situation or requirement.
Your way works. Alternatively, you can also filter the result directly from the API call assuming that the backend is returning a full result.
data() {
return {
filteredProducts:
}
}
mounted() {
axios.get(API_URL)
.then(response => {
const products = response.data
this.filteredProducts = products.filter(product => product.department.includes('food'))
})
}
answered Dec 27 '18 at 18:49
Ru Chern Chong
2,04241628
add a comment |
It works in many ways depending on your situation or requirement.
Your way works. Alternatively, you can also filter the result directly from the API call assuming that the backend is returning a full result.
data() {
return {
filteredProducts:
}
}
mounted() {
axios.get(API_URL)
.then(response => {
const products = response.data
this.filteredProducts = products.filter(product => product.department.includes('food'))
})
}
answered Dec 27 '18 at 18:49
Ru Chern Chong
2,04241628
add a comment |
It works in many ways depending on your situation or requirement.
Your way works. Alternatively, you can also filter the result directly from the API call assuming that the backend is returning a full result.
data() {
return {
filteredProducts:
}
}
mounted() {
axios.get(API_URL)
.then(response => {
const products = response.data
this.filteredProducts = products.filter(product => product.department.includes('food'))
})
}
answered Dec 27 '18 at 18:49
Ru Chern Chong
2,04241628
It works in many ways depending on your situation or requirement.
Your way works. Alternatively, you can also filter the result directly from the API call assuming that the backend is returning a full result.
data() {
return {
filteredProducts:
}
}
mounted() {
axios.get(API_URL)
.then(response => {
const products = response.data
this.filteredProducts = products.filter(product => product.department.includes('food'))
})
}
answered Dec 27 '18 at 18:49
Ru Chern Chong
2,04241628
answered Dec 27 '18 at 18:49
Ru Chern Chong
2,04241628
answered Dec 27 '18 at 18:49
Ru Chern Chong
2,04241628
answered Dec 27 '18 at 18:49
Ru Chern Chong
2,04241628
2,04241628
add a comment |
add a comment |
If you're querying the products list from a Back-end server,
you may use query parameters like
xxx/products?department=XXX
then the backend server can do the filtering for you.
In your case, it looks like you are simply reading a local JSON file, so the entire JSON is returned, and you have to filter yourself.
answered Dec 27 '18 at 18:37
Tang Yun
898
This only works if you have full control of the backend as well, but it still works given the circumstances.
– Ru Chern Chong
Dec 27 '18 at 19:19
yes of course. Check the API docs if you're using a public API endpoint or check with back-end developer on passing query string parameters. @RuChernChong thanks for pointing out.
– Tang Yun
Dec 27 '18 at 19:22
add a comment |
If you're querying the products list from a Back-end server,
you may use query parameters like
xxx/products?department=XXX
then the backend server can do the filtering for you.
In your case, it looks like you are simply reading a local JSON file, so the entire JSON is returned, and you have to filter yourself.
answered Dec 27 '18 at 18:37
Tang Yun
898
This only works if you have full control of the backend as well, but it still works given the circumstances.
– Ru Chern Chong
Dec 27 '18 at 19:19
yes of course. Check the API docs if you're using a public API endpoint or check with back-end developer on passing query string parameters. @RuChernChong thanks for pointing out.
– Tang Yun
Dec 27 '18 at 19:22
add a comment |
If you're querying the products list from a Back-end server,
you may use query parameters like
xxx/products?department=XXX
then the backend server can do the filtering for you.
In your case, it looks like you are simply reading a local JSON file, so the entire JSON is returned, and you have to filter yourself.
answered Dec 27 '18 at 18:37
Tang Yun
898
If you're querying the products list from a Back-end server,
you may use query parameters like
xxx/products?department=XXX
then the backend server can do the filtering for you.
In your case, it looks like you are simply reading a local JSON file, so the entire JSON is returned, and you have to filter yourself.
answered Dec 27 '18 at 18:37
Tang Yun
898
answered Dec 27 '18 at 18:37
Tang Yun
898
answered Dec 27 '18 at 18:37
Tang Yun
898
answered Dec 27 '18 at 18:37
Tang Yun
898
898
This only works if you have full control of the backend as well, but it still works given the circumstances.
– Ru Chern Chong
Dec 27 '18 at 19:19
yes of course. Check the API docs if you're using a public API endpoint or check with back-end developer on passing query string parameters. @RuChernChong thanks for pointing out.
– Tang Yun
Dec 27 '18 at 19:22
add a comment |
This only works if you have full control of the backend as well, but it still works given the circumstances.
– Ru Chern Chong
Dec 27 '18 at 19:19
yes of course. Check the API docs if you're using a public API endpoint or check with back-end developer on passing query string parameters. @RuChernChong thanks for pointing out.
– Tang Yun
Dec 27 '18 at 19:22
This only works if you have full control of the backend as well, but it still works given the circumstances.
– Ru Chern Chong
Dec 27 '18 at 19:19
This only works if you have full control of the backend as well, but it still works given the circumstances.
– Ru Chern Chong
Dec 27 '18 at 19:19
yes of course. Check the API docs if you're using a public API endpoint or check with back-end developer on passing query string parameters. @RuChernChong thanks for pointing out.
– Tang Yun
Dec 27 '18 at 19:22
yes of course. Check the API docs if you're using a public API endpoint or check with back-end developer on passing query string parameters. @RuChernChong thanks for pointing out.
– Tang Yun
Dec 27 '18 at 19:22
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53949294%2ffiltering-a-json-response-with-vue%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
So, what's wrong?
– vahdet
Dec 27 '18 at 18:26
Nothing, just wanted to clarify this is the right way to do it. As in, can I filter the result on the initial axios call, or will I always need to filter it afterwards as a computed property?
– paddyfields
Dec 27 '18 at 18:27