filter array values with angular
0
In an angular json response as shown when stringified
console.log("point data "+JSON.stringify(res,data.data));
my json response is of this format
"Monday : meeting invite"
...
"Notice : Come to hall"
I am trying to iterate over the above list in view
$rootScope.allData = res.data.data;
<li ng-repeat="myData in allData ">
{{allData}} //prints Monday : meeting invite
</li>
how to do this upon iterating is a challenge
<li ng-repeat="myData in allData ">
Today: {{allData}} // to print "Monday"
Task: {{allData}} //to print meeting invite
</li>
this is because the : represents a new data
javascript angularjs
asked Nov 26 '18 at 22:32
user10445503user10445503
618
add a comment |
0
In an angular json response as shown when stringified
console.log("point data "+JSON.stringify(res,data.data));
my json response is of this format
"Monday : meeting invite"
...
"Notice : Come to hall"
I am trying to iterate over the above list in view
$rootScope.allData = res.data.data;
<li ng-repeat="myData in allData ">
{{allData}} //prints Monday : meeting invite
</li>
how to do this upon iterating is a challenge
<li ng-repeat="myData in allData ">
Today: {{allData}} // to print "Monday"
Task: {{allData}} //to print meeting invite
</li>
this is because the : represents a new data
javascript angularjs
asked Nov 26 '18 at 22:32
user10445503user10445503
618
Is your res.data.data array of string like this "Monday : meeting invite" ... . Or is it a big string?
– sftt
Nov 26 '18 at 22:44
Pro tip: In the console, you can do this:console.log('point data', res, data.data);and it works beautifully, and is easier to type, and easier to read...
– cale_b
Nov 26 '18 at 22:47
1
This would be far easier to answer if you'd provide an Minimal, Complete, and Verifiable example.
– cale_b
Nov 26 '18 at 22:48
@searcherforthetrueth yes it is
– user10445503
Nov 26 '18 at 22:55
add a comment |
0
0
0
In an angular json response as shown when stringified
console.log("point data "+JSON.stringify(res,data.data));
my json response is of this format
"Monday : meeting invite"
...
"Notice : Come to hall"
I am trying to iterate over the above list in view
$rootScope.allData = res.data.data;
<li ng-repeat="myData in allData ">
{{allData}} //prints Monday : meeting invite
</li>
how to do this upon iterating is a challenge
<li ng-repeat="myData in allData ">
Today: {{allData}} // to print "Monday"
Task: {{allData}} //to print meeting invite
</li>
this is because the : represents a new data
javascript angularjs
asked Nov 26 '18 at 22:32
user10445503user10445503
618
In an angular json response as shown when stringified
console.log("point data "+JSON.stringify(res,data.data));
my json response is of this format
"Monday : meeting invite"
...
"Notice : Come to hall"
I am trying to iterate over the above list in view
$rootScope.allData = res.data.data;
<li ng-repeat="myData in allData ">
{{allData}} //prints Monday : meeting invite
</li>
how to do this upon iterating is a challenge
<li ng-repeat="myData in allData ">
Today: {{allData}} // to print "Monday"
Task: {{allData}} //to print meeting invite
</li>
this is because the : represents a new data
javascript angularjs
javascript angularjs
asked Nov 26 '18 at 22:32
user10445503user10445503
618
asked Nov 26 '18 at 22:32
user10445503user10445503
618
edited Nov 26 '18 at 22:42
user10445503
asked Nov 26 '18 at 22:32
user10445503user10445503
618
asked Nov 26 '18 at 22:32
user10445503user10445503
618
asked Nov 26 '18 at 22:32
user10445503user10445503
618
618
Is your res.data.data array of string like this "Monday : meeting invite" ... . Or is it a big string?
– sftt
Nov 26 '18 at 22:44
Pro tip: In the console, you can do this:console.log('point data', res, data.data);and it works beautifully, and is easier to type, and easier to read...
– cale_b
Nov 26 '18 at 22:47
1
This would be far easier to answer if you'd provide an Minimal, Complete, and Verifiable example.
– cale_b
Nov 26 '18 at 22:48
@searcherforthetrueth yes it is
– user10445503
Nov 26 '18 at 22:55
add a comment |
Is your res.data.data array of string like this "Monday : meeting invite" ... . Or is it a big string?
– sftt
Nov 26 '18 at 22:44
Pro tip: In the console, you can do this:console.log('point data', res, data.data);and it works beautifully, and is easier to type, and easier to read...
– cale_b
Nov 26 '18 at 22:47
1
This would be far easier to answer if you'd provide an Minimal, Complete, and Verifiable example.
– cale_b
Nov 26 '18 at 22:48
@searcherforthetrueth yes it is
– user10445503
Nov 26 '18 at 22:55
Is your res.data.data array of string like this "Monday : meeting invite" ... . Or is it a big string?
– sftt
Nov 26 '18 at 22:44
Is your res.data.data array of string like this "Monday : meeting invite" ... . Or is it a big string?
– sftt
Nov 26 '18 at 22:44
Pro tip: In the console, you can do this:
console.log('point data', res, data.data); and it works beautifully, and is easier to type, and easier to read...– cale_b
Nov 26 '18 at 22:47
Pro tip: In the console, you can do this:
console.log('point data', res, data.data); and it works beautifully, and is easier to type, and easier to read...– cale_b
Nov 26 '18 at 22:47
1
1
This would be far easier to answer if you'd provide an Minimal, Complete, and Verifiable example.
– cale_b
Nov 26 '18 at 22:48
This would be far easier to answer if you'd provide an Minimal, Complete, and Verifiable example.
– cale_b
Nov 26 '18 at 22:48
@searcherforthetrueth yes it is
– user10445503
Nov 26 '18 at 22:55
@searcherforthetrueth yes it is
– user10445503
Nov 26 '18 at 22:55
add a comment |
2 Answers
2
active
oldest
votes
0
Elegant way with array functions
$rootScope.allData = res.data.data.map(function(dataItem) {
const dataItemParts = dataItem.split(':').map(function(part){
return part.trim();
});
return {
head: dataItemParts[0],
content: dataItemParts[1]
}
})
And then
<li ng-repeat="myData in allData ">
Today: {{myData.head}} // to print "Monday"
Task: {{myData.content}} //to print meeting invite
</li>
For removing repeatable values with js you can use
<li ng-repeat="myData in allData track by myData.head+myData.content">
Today: {{myData.head}} // to print "Monday"
Task: {{myData.content}} //to print meeting invite
</li>
answered Nov 26 '18 at 22:56
sfttsftt
47029
I have 5 items in the array but is prints in 25 times
– user10445503
Nov 26 '18 at 23:04
Could you provide your array items contents?
– sftt
Nov 26 '18 at 23:06
it is in the format shown
– user10445503
Nov 26 '18 at 23:07
Could your provide console.log($rootScope.allData.length); Or console.dir($rootScope.allData)?
– sftt
Nov 26 '18 at 23:09
Maybe the issue you are using ng-repeat inside ng-repeat. And then 5 * 5 = 25.
– sftt
Nov 26 '18 at 23:15
|
show 1 more comment
1
On the data binding you can do split(':')
<li ng-repeat="myData in allData ">
Today: {{allData.split(':')[0]}} // to print "Monday"
Task: {{allData.split(':')[1].trim()}}} //to print meeting invite
</li>
The trim() is optional here.
This is not something I would do though. This gets the job done but what I would prefer is create/map the allData a new array of object having two properties. The heading and the task. Then access them while iterating.
// mappedData is mapped from allData
<li ng-repeat="data in mappedData track by data.Heading + data.Task">
Today: {{data.Heading}} // to print "Monday"
Task: {{data.Task}}} //to print meeting invite
</li>
Update: As per user10445503 My code does need track by. Adding it to my code.
answered Nov 26 '18 at 22:46
atiqorinatiqorin
11316
Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: myData in
– user10445503
Nov 26 '18 at 23:07
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
});
}
});
draft saved
draft discarded
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%2f53490122%2ffilter-array-values-with-angular%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
0
Elegant way with array functions
$rootScope.allData = res.data.data.map(function(dataItem) {
const dataItemParts = dataItem.split(':').map(function(part){
return part.trim();
});
return {
head: dataItemParts[0],
content: dataItemParts[1]
}
})
And then
<li ng-repeat="myData in allData ">
Today: {{myData.head}} // to print "Monday"
Task: {{myData.content}} //to print meeting invite
</li>
For removing repeatable values with js you can use
<li ng-repeat="myData in allData track by myData.head+myData.content">
Today: {{myData.head}} // to print "Monday"
Task: {{myData.content}} //to print meeting invite
</li>
answered Nov 26 '18 at 22:56
sfttsftt
47029
I have 5 items in the array but is prints in 25 times
– user10445503
Nov 26 '18 at 23:04
Could you provide your array items contents?
– sftt
Nov 26 '18 at 23:06
it is in the format shown
– user10445503
Nov 26 '18 at 23:07
Could your provide console.log($rootScope.allData.length); Or console.dir($rootScope.allData)?
– sftt
Nov 26 '18 at 23:09
Maybe the issue you are using ng-repeat inside ng-repeat. And then 5 * 5 = 25.
– sftt
Nov 26 '18 at 23:15
|
show 1 more comment
0
Elegant way with array functions
$rootScope.allData = res.data.data.map(function(dataItem) {
const dataItemParts = dataItem.split(':').map(function(part){
return part.trim();
});
return {
head: dataItemParts[0],
content: dataItemParts[1]
}
})
And then
<li ng-repeat="myData in allData ">
Today: {{myData.head}} // to print "Monday"
Task: {{myData.content}} //to print meeting invite
</li>
For removing repeatable values with js you can use
<li ng-repeat="myData in allData track by myData.head+myData.content">
Today: {{myData.head}} // to print "Monday"
Task: {{myData.content}} //to print meeting invite
</li>
answered Nov 26 '18 at 22:56
sfttsftt
47029
I have 5 items in the array but is prints in 25 times
– user10445503
Nov 26 '18 at 23:04
Could you provide your array items contents?
– sftt
Nov 26 '18 at 23:06
it is in the format shown
– user10445503
Nov 26 '18 at 23:07
Could your provide console.log($rootScope.allData.length); Or console.dir($rootScope.allData)?
– sftt
Nov 26 '18 at 23:09
Maybe the issue you are using ng-repeat inside ng-repeat. And then 5 * 5 = 25.
– sftt
Nov 26 '18 at 23:15
|
show 1 more comment
0
0
0
Elegant way with array functions
$rootScope.allData = res.data.data.map(function(dataItem) {
const dataItemParts = dataItem.split(':').map(function(part){
return part.trim();
});
return {
head: dataItemParts[0],
content: dataItemParts[1]
}
})
And then
<li ng-repeat="myData in allData ">
Today: {{myData.head}} // to print "Monday"
Task: {{myData.content}} //to print meeting invite
</li>
For removing repeatable values with js you can use
<li ng-repeat="myData in allData track by myData.head+myData.content">
Today: {{myData.head}} // to print "Monday"
Task: {{myData.content}} //to print meeting invite
</li>
answered Nov 26 '18 at 22:56
sfttsftt
47029
Elegant way with array functions
$rootScope.allData = res.data.data.map(function(dataItem) {
const dataItemParts = dataItem.split(':').map(function(part){
return part.trim();
});
return {
head: dataItemParts[0],
content: dataItemParts[1]
}
})
And then
<li ng-repeat="myData in allData ">
Today: {{myData.head}} // to print "Monday"
Task: {{myData.content}} //to print meeting invite
</li>
For removing repeatable values with js you can use
<li ng-repeat="myData in allData track by myData.head+myData.content">
Today: {{myData.head}} // to print "Monday"
Task: {{myData.content}} //to print meeting invite
</li>
answered Nov 26 '18 at 22:56
sfttsftt
47029
edited Nov 27 '18 at 0:12
answered Nov 26 '18 at 22:56
sfttsftt
47029
answered Nov 26 '18 at 22:56
sfttsftt
47029
answered Nov 26 '18 at 22:56
sfttsftt
47029
47029
I have 5 items in the array but is prints in 25 times
– user10445503
Nov 26 '18 at 23:04
Could you provide your array items contents?
– sftt
Nov 26 '18 at 23:06
it is in the format shown
– user10445503
Nov 26 '18 at 23:07
Could your provide console.log($rootScope.allData.length); Or console.dir($rootScope.allData)?
– sftt
Nov 26 '18 at 23:09
Maybe the issue you are using ng-repeat inside ng-repeat. And then 5 * 5 = 25.
– sftt
Nov 26 '18 at 23:15
|
show 1 more comment
I have 5 items in the array but is prints in 25 times
– user10445503
Nov 26 '18 at 23:04
Could you provide your array items contents?
– sftt
Nov 26 '18 at 23:06
it is in the format shown
– user10445503
Nov 26 '18 at 23:07
Could your provide console.log($rootScope.allData.length); Or console.dir($rootScope.allData)?
– sftt
Nov 26 '18 at 23:09
Maybe the issue you are using ng-repeat inside ng-repeat. And then 5 * 5 = 25.
– sftt
Nov 26 '18 at 23:15
I have 5 items in the array but is prints in 25 times
– user10445503
Nov 26 '18 at 23:04
I have 5 items in the array but is prints in 25 times
– user10445503
Nov 26 '18 at 23:04
Could you provide your array items contents?
– sftt
Nov 26 '18 at 23:06
Could you provide your array items contents?
– sftt
Nov 26 '18 at 23:06
it is in the format shown
– user10445503
Nov 26 '18 at 23:07
it is in the format shown
– user10445503
Nov 26 '18 at 23:07
Could your provide console.log($rootScope.allData.length); Or console.dir($rootScope.allData)?
– sftt
Nov 26 '18 at 23:09
Could your provide console.log($rootScope.allData.length); Or console.dir($rootScope.allData)?
– sftt
Nov 26 '18 at 23:09
Maybe the issue you are using ng-repeat inside ng-repeat. And then 5 * 5 = 25.
– sftt
Nov 26 '18 at 23:15
Maybe the issue you are using ng-repeat inside ng-repeat. And then 5 * 5 = 25.
– sftt
Nov 26 '18 at 23:15
|
show 1 more comment
1
On the data binding you can do split(':')
<li ng-repeat="myData in allData ">
Today: {{allData.split(':')[0]}} // to print "Monday"
Task: {{allData.split(':')[1].trim()}}} //to print meeting invite
</li>
The trim() is optional here.
This is not something I would do though. This gets the job done but what I would prefer is create/map the allData a new array of object having two properties. The heading and the task. Then access them while iterating.
// mappedData is mapped from allData
<li ng-repeat="data in mappedData track by data.Heading + data.Task">
Today: {{data.Heading}} // to print "Monday"
Task: {{data.Task}}} //to print meeting invite
</li>
Update: As per user10445503 My code does need track by. Adding it to my code.
answered Nov 26 '18 at 22:46
atiqorinatiqorin
11316
Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: myData in
– user10445503
Nov 26 '18 at 23:07
add a comment |
1
On the data binding you can do split(':')
<li ng-repeat="myData in allData ">
Today: {{allData.split(':')[0]}} // to print "Monday"
Task: {{allData.split(':')[1].trim()}}} //to print meeting invite
</li>
The trim() is optional here.
This is not something I would do though. This gets the job done but what I would prefer is create/map the allData a new array of object having two properties. The heading and the task. Then access them while iterating.
// mappedData is mapped from allData
<li ng-repeat="data in mappedData track by data.Heading + data.Task">
Today: {{data.Heading}} // to print "Monday"
Task: {{data.Task}}} //to print meeting invite
</li>
Update: As per user10445503 My code does need track by. Adding it to my code.
answered Nov 26 '18 at 22:46
atiqorinatiqorin
11316
Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: myData in
– user10445503
Nov 26 '18 at 23:07
add a comment |
1
1
1
On the data binding you can do split(':')
<li ng-repeat="myData in allData ">
Today: {{allData.split(':')[0]}} // to print "Monday"
Task: {{allData.split(':')[1].trim()}}} //to print meeting invite
</li>
The trim() is optional here.
This is not something I would do though. This gets the job done but what I would prefer is create/map the allData a new array of object having two properties. The heading and the task. Then access them while iterating.
// mappedData is mapped from allData
<li ng-repeat="data in mappedData track by data.Heading + data.Task">
Today: {{data.Heading}} // to print "Monday"
Task: {{data.Task}}} //to print meeting invite
</li>
Update: As per user10445503 My code does need track by. Adding it to my code.
answered Nov 26 '18 at 22:46
atiqorinatiqorin
11316
On the data binding you can do split(':')
<li ng-repeat="myData in allData ">
Today: {{allData.split(':')[0]}} // to print "Monday"
Task: {{allData.split(':')[1].trim()}}} //to print meeting invite
</li>
The trim() is optional here.
This is not something I would do though. This gets the job done but what I would prefer is create/map the allData a new array of object having two properties. The heading and the task. Then access them while iterating.
// mappedData is mapped from allData
<li ng-repeat="data in mappedData track by data.Heading + data.Task">
Today: {{data.Heading}} // to print "Monday"
Task: {{data.Task}}} //to print meeting invite
</li>
Update: As per user10445503 My code does need track by. Adding it to my code.
answered Nov 26 '18 at 22:46
atiqorinatiqorin
11316
edited Nov 27 '18 at 13:35
answered Nov 26 '18 at 22:46
atiqorinatiqorin
11316
answered Nov 26 '18 at 22:46
atiqorinatiqorin
11316
answered Nov 26 '18 at 22:46
atiqorinatiqorin
11316
11316
Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: myData in
– user10445503
Nov 26 '18 at 23:07
add a comment |
Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: myData in
– user10445503
Nov 26 '18 at 23:07
Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: myData in
– user10445503
Nov 26 '18 at 23:07
Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: myData in
– user10445503
Nov 26 '18 at 23:07
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53490122%2ffilter-array-values-with-angular%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
Is your res.data.data array of string like this "Monday : meeting invite" ... . Or is it a big string?
– sftt
Nov 26 '18 at 22:44
Pro tip: In the console, you can do this:
console.log('point data', res, data.data);and it works beautifully, and is easier to type, and easier to read...– cale_b
Nov 26 '18 at 22:47
1
This would be far easier to answer if you'd provide an Minimal, Complete, and Verifiable example.
– cale_b
Nov 26 '18 at 22:48
@searcherforthetrueth yes it is
– user10445503
Nov 26 '18 at 22:55