AngularJS, Nested array - angularjs

I have a problem with ng-repeat in AngularJs. I have an array of Objects with 3 different keys and one of those keys is an array of objects. So I simply use the ng-repeat for main array like this:
<div class="post-content" ng-repeat="post in nfc.posts track by $index">
...
</div>
Everything is ok. But when I use a nested ng-repeat in this loop, I get nothing. I used before nested ng-repeats a lot and faced no problem. Here is the code:
comments:: {{post.comments}}
<div class="post-comment" ng-repeat="comment in post.comments">
comment: {{comment}}
<img src="{{comment[3]}}" alt="" class="profile-photo-sm" />
<p>
{{comment[4] + ' ' + comment[5]}} {{comment[6]}}
</p>
</div>
The comments:: {{post.comments}} statement shows me the content, but the ng-repeat does not appear to work correctly.
A sample of comments object in browser console is here
Array(3)
0: {
0: 10196,
1: 10325,
2: 62,
3: 0,
4: Sun Feb 18 2018 21: 56: 58 GMT + 0330(+0330),
5: "text",
6: "text",
7: "text",
8: "text",
9: "text",
$$hashKey: "object:96"
}
1: {
0: 10195,
1: 10325,
2: 50,
3: 0,
4: Sun Feb 18 2018 20: 15: 41 GMT + 0330(+0330),
5: "text",
6: "text",
7: "text",
8: "text",
9: "text",
$$hashKey: "object:97"
}
2: {
0: 10194,
1: 10325,
2: 62,
3: 0,
4: Sat Feb 17 2018 12: 36: 39 GMT + 0330(+0330),
5: "text",
6: "text",
7: "text",
8: "text",
9: "text",
$$hashKey: "object:98"
}
This array is Array of arrays and I convert it to Array of objects after I receive it from API.
Where is my mistake?

First mistake I noticed in your code is this totoObject(itm["arrays"]))
$scope.posts.forEach(itm => (itm["comments"] = totoObject(itm["arrays"])));
your code that you provided in plunker says
function toObject(arr) {
var rv = {};
for (var i = 0; i < arr.length; ++i) rv[i] = arr[i];
return rv;
}
change totoObject to toObject
$scope.posts.forEach(itm => (itm["comments"] = toObject(itm["arrays"])));

Try
<img src="{{comment['3']}}" alt="" class="profile-photo-sm" />
comment[3] means that comment is an array and you are trying to access 4th element. Similarly change other uses as well.
Update 1
Check this plunkr. Below were your issues:
Use of totoObject
In your question you have provided array of objects (below code), which isn't the case in your plunkr. So, comment[3] would work just fine.
here (it shows array of objects)
0: {
0: 10196,
1: 10325,
2: 62,
3: 0,
4: Sun Feb 18 2018 21: 56: 58 GMT + 0330(+0330),
5: "text",
6: "text",
7: "text",
8: "text",
9: "text",
$$hashKey: "object:96"
}

Check the demo,
DEMO
var app =angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
$scope.nfc ={};
$scope.nfc.posts = [
{
"Post": {
"Name": "text",
"Family": "text",
"UserName": "text",
"WorkPlace": "text",
"UserImage": "~/Images/User/Thumb1337305170mmkhalilzadeh2018294642.jpg",
"PPic": "~/Images/Post/1337305170502018211044.jpg",
"DSC": "text",
"CF": "text",
"CN": "(Mediastinum)",
"Rate": 0,
"MentionPostID": 0,
"FollowCount": 1,
"UserID": 50,
"Enable": 1,
"UPID": 10325,
"IsFollow": false,
"IsRate": false,
"IsFollowUser": true,
"RegDate": "2018-02-10T21:30:44.000Z"
},
"PostComment": [
[
10196,
10325,
62,
0,
"2018-02-18T18:26:58.000Z",
"text",
"~/Images/User/Thumb1337305170Shahryar201711122149.jpg",
"text",
"text",
"text"
],
[
10195,
10325,
50,
0,
"2018-02-18T16:45:41.000Z",
"text",
"~/Images/User/Thumb1337305170mmkhalilzadeh2018294642.jpg",
"text",
"text",
"text"
],
[
10194,
10325,
62,
0,
"2018-02-17T09:06:39.000Z",
"text",
"~/Images/User/Thumb1337305170Shahryar201711122149.jpg",
"text",
"text",
"text"
]
],
"newCommentText": "",
"comments": [
{
"0": 10196,
"1": 10325,
"2": 62,
"3": 0,
"4": "2018-02-18T18:26:58.000Z",
"5": "text",
"6": "~/Images/User/Thumb1337305170Shahryar201711122149.jpg",
"7": "text",
"8": "text",
"9": "text"
},
{
"0": 10195,
"1": 10325,
"2": 50,
"3": 0,
"4": "2018-02-18T16:45:41.000Z",
"5": "text",
"6": "~/Images/User/Thumb1337305170mmkhalilzadeh2018294642.jpg",
"7": "text",
"8": "text",
"9": "text"
},
{
"0": 10194,
"1": 10325,
"2": 62,
"3": 0,
"4": "2018-02-17T09:06:39.000Z",
"5": "text",
"6": "~/Images/User/Thumb1337305170Shahryar201711122149.jpg",
"7": "ttt",
"8": "ttt",
"9": "ttt"
}
]
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<div class="post-content" ng-repeat="post in nfc.posts track by $index">
<div class="post-comment" ng-repeat="comment in post.comments">
<img src="{{comment[3]}}" alt="" class="profile-photo-sm" />
<p>
{{comment[4] + ' ' + comment[5]}} {{comment[6]}}
</p>
</div>
</div>
</body>

Related

Flutter: Parse json arrays without name

I am getting json response from server as below.
[
[{
"ID": 1,
"Date": "11-09-2015",
"Balance": 1496693.00
}, {
"ID": 2,
"Date": "01-10-2015",
"Balance": 1496693.00
}],
[{
"ID": 1,
"Date": "03-09-2000",
"IntAmount": "003.00"
}],
[{
"EmployeeId": "000",
"DesignationName": "deg"
}],
[{
"LoanAmount": "00000.00",
"IntRate": "3.00",
"LoanNo": "56656"
}]
]
I can parse json array with name but in above json there are three arrays without name.
How to parse above json in three different arrays?
If you are positive that the data will always come in the stated format, then you can iterate through the result. See below for example:
main(List<String> args) {
// Define the array of data "object" like this
List<List<Map<String, dynamic>>> arrayOfData = [
[
{"ID": 1, "Date": "11-09-2015", "Balance": 1496693.00},
{"ID": 2, "Date": "01-10-2015", "Balance": 1496693.00}
],
[
{"ID": 1, "Date": "03-09-2000", "IntAmount": "003.00"}
],
[
{"EmployeeId": "000", "DesignationName": "deg"}
],
[
{"LoanAmount": "00000.00", "IntRate": "3.00", "LoanNo": "56656"}
]
];
/*
Iterate through the array of "objects" using forEach,
then, iterate through each resulting array using forEach
*/
arrayOfData.forEach((datasetArray) => datasetArray.forEach((dataset) => print(dataset)));
/*
============== RESULT ========
{ID: 1, Date: 11-09-2015, Balance: 1496693.0}
{ID: 2, Date: 01-10-2015, Balance: 1496693.0}
{ID: 1, Date: 03-09-2000, IntAmount: 003.00}
{EmployeeId: 000, DesignationName: deg}
{LoanAmount: 00000.00, IntRate: 3.00, LoanNo: 56656}
*/
}

angular comparing two array values using ngIf else to show button

I am working on two arrays with ngIf else condition , I got two array values from two tables posts[post_id, user_id, description], likes[post_id, user_id, like_status, like_id].Here i need to compare post_id, user_id and like_status='like' if they are equal then condition true show success button else false default button.
I am already tried but its not working so please help to compare two arrays in using ngIf else .
<div class="container" *ngFor="let post of posts; let i = index">
<h6> {{post.description}} </h6>
<div class="container" style="border: 0px solid #ada5a5; ">
<div class="row">
<!--like button-->
<div class=" col-4">
<div *ngIf="(postLikes.indexOf(user_id) > -1) && (post.post_id == postLikes.post_id) && (postLikes.like_status == 'like'); else default">
<button type="button" class="btn btn-success" (click)=likeSubmit(post.user_id,post.post_id)>Liked</button><p>liked</p>
</div>
<ng-template #default>
<button type="button" class="btn btn-secondary" (click)=likeSubmit(post.user_id,post.post_id)>Like</button><p>like</p>
</ng-template>
</div>
</div>
</div>
</div>
// two tables data
posts: any[] =
[{
"post_id": 4,
"user_id": 2,
"description": " Hi How are you ",
"created_date": "2019-01-28T12:30:49.000Z"
}, {
"post_id": 5,
"user_id": 2,
"description": " Working a Fine ",
"created_date": "2019-01-28T12:31:20.000Z"
}, {
"post_id": 6,
"user_id": 2,
"description": " Hi How are you ......",
"created_date": "2019-01-28T12:32:15.000Z"
}, {
"post_id": 7,
"user_id": 2,
"description": " 4th test post",
"created_date": "2019-01-29T07:10:37.000Z"
}, {
"post_id": 9,
"user_id": 2,
"description": " 5th test post",
"created_date": "2019-01-31T11:17:31.000Z"
}, {
"post_id": 10,
"user_id": 2,
"description": " 6th test post",
"created_date": "2019-01-31T12:03:54.000Z"
}, {
"post_id": 11,
"user_id": 2,
"description": " 7th post post",
"created_date": "2019-02-08T05:50:02.000Z"
}, {
"post_id": 12,
"user_id": 2,
"description": " 8th test post ",
"created_date": "2019-02-08T06:08:01.000Z"
}];
postLikes:any[] =[{
"post_id": 4,
"user_id": 2,
"like_status": "unlike",
"like_id": 10
}, {
"post_id": 5,
"user_id": 2,
"like_status": "like",
"like_id": 9
}, {
"post_id": 6,
"user_id": 2,
"like_status": "like",
"like_id": 8
}, {
"post_id": 7,
"user_id": 2,
"like_status": "like",
"like_id": 7
}, {
"post_id": 9,
"user_id": 2,
"like_status": "like",
"like_id": 11
}];
post_id: any;
user_id:Number = 2;
// likes: Like[];
like_id: number | null ;
like_status: string;
Please try my StackBlitz code once and correct the error
https://stackblitz.com/edit/angular-wddupe?file=src%2Fapp%2Fapp.component.ts
I have updated code, please find changes
https://stackblitz.com/edit/angular-yjcpfk?file=src/app/app.component.html
Hope this helps you.
There is a problem with postlikes condition in html you compare string with array
Ngfor for postlikes array is remaining
I recommend you to do this in typescript using find keyword to compare and pass that result on posts objects like boolean from that it shows and hide your button
One way to do this
Create a public method in your component as
public isPostLikedByUser(postID: any, userID: any){
// This is actually matching the criteria exactly as you have described in question RETURN true or false
return this.postLikes.findIndex((i) => i.post_id == postID && i.user_id == userID && i.like_status == 'like') > -1;
}
Now call this method in your view as
<div *ngIf="isPostLikedByUser(post.post_id, post.user_id); else otherTest">
I have updated you stackblitz example as well. I hope this helps.
https://stackblitz.com/edit/angular-wddupe?embed=1&file=src/app/app.component.html

Getting elements from array of dictionary and save the keys as string, and values as string

I have an array of dictionaries of type <Int,String> like this:
[14: "2", 17: "5", 6: "5", 12: "Ali", 11: "0", 2: "4", 5: "It it it", 15: "5", 18: "2", 16: "5", 8: "2", 13: "4", 19: "4", 1: "2", 4: "12-09-2017 - 9:52"]
I need to get the keys alone and save them in a string, and the values alone and save them in another string.
The results should look like that:
string key = "12,17,6,12,11,2,5,15,18,16,8,13,19,1,4"
string values = "2,5,5,Ali,0,4,It it ti,5,2,5,2,4,4,2,12-09-2017 - 9:52"
A dictionary has a keys and a values property which return the
keys/values as a (lazy) collection. For the values you just have
to join them:
let dict = [14: "2", 17: "5", 6: "5", 12: "Ali", 11: "0", 2: "4", 5: "It it it", 15: "5", 18: "2", 16: "5", 8: "2", 13: "4", 19: "4", 1: "2", 4: "12-09-2017 - 9:52"]
let values = dict.values.joined(separator: ",")
// Ali,5,2,It it it,5,0,4,5,4,4,2,12-09-2017 - 9:52,5,2,2
The keys are integers and must be converted to strings first:
let keys = dict.keys.map(String.init).joined(separator: ",")
// 12,17,14,5,15,11,13,16,19,2,18,4,6,8,1
The order is unspecified, but the same for keys and values.
Try this, this can be refactored I am sure, this is the first logic that hit me.
let dictionary = [14: "2", 17: "5", 6: "5", 12: "Ali", 11: "0", 2: "4", 5: "It it it", 15: "5", 18: "2", 16: "5", 8: "2", 13: "4", 19: "4", 1: "2", 4: "12-09-2017 - 9:52"]
let arrayKeys = dictionary.map({ $0.key})
print(arrayKeys)
var stringValue: String = ""
for value in arrayKeys {
stringValue.append(value.description)
stringValue.append(",")
}

Angular create dynamic scope in controller(js) & bind in view(html)

I have created this plnkr to show what I'v tried.
$scope.myArray = [{
"productDetails": {
"productName": "productname1",
"qty": 5,
"pricePerPiece": 20
},
"vehiclecategory": "abcd"
},
...
]
Need to bind the values of each vehicle category for each record.
Have two records per row with Label & it's value that will be bind from key vehiclecategory for each object.
Label will remain as it is since its text will change depending upon internationalization, so it will be a constant that will be coming from properties file as per user location. There will be separate constants file for each location.
Currently have hard code the label value. Need to achieve below sample
(1)First Record : abcd1
(2)Second Record : abcd2
#JohnD answer is correct, you can display the item inside an array using ngRepeat but if you want to add ordinal numbers you can have a look in this post "Add st, nd, rd and th (ordinal) suffix to a number"
case 1 )
http://plnkr.co/edit/sA85huMV3nYUJME8tSVx?p=preview
you know the name of label property in your data (the key)
<div class="width50" ng-repeat="item in myArray track by $index">
<label>{{item.label}} - {{$index}}</label> : {{item.vehiclecategory}}
</div>
Javascript :
I added a label attribute to your $scope.myArray.
As JohnD explain, you have to use ng-repeat to iterate over an array and not use "$scope.first, $scope.second ..." (imagine if you have 100)
$scope.myArray = [{
"productDetails": { "productName": "productname1", "qty": 5, "pricePerPiece": 20 },
"vehiclecategory": "abcd1",
"label" : "My Data",
}, {
"productDetails": {
"productName": "productname1", "qty": 5, "pricePerPiece": 20
},
"vehiclecategory": "abcd2",
"label" : "Your Info",
}, {
"productDetails": { "productName": "productname1", "qty": 5, "pricePerPiece": 20 },
"vehiclecategory": "abcd3",
"label":"adresse"
}, {
"productDetails": { "productName": "productname1", "qty": 5, "pricePerPiece": 20 },
"vehiclecategory": "abcd4",
"label": "street"
}, {
"productDetails": { "productName": "productname1", "qty": 5, "pricePerPiece": 20 },
"vehiclecategory": "abcd5",
"label" : "city",
}, {
"productDetails": { "productName": "productname1", "qty": 5, "pricePerPiece": 20 },
"vehiclecategory": "abcd6",
"label":"etc"
}];
case 2 )
Maybe the name of the label attribute is not always the same like this :
$scope.myArray = [
{
"productDetails": { "productName": "productname1","qty": 5, "pricePerPiece": 20 },
"vehiclecategory": "abcd1",
"My Data" : "My Data",
}, {
"productDetails": { "productName": "productname1", "qty": 5, "pricePerPiece": 20 },
"vehiclecategory": "abcd2",
"Your Info" : "Your Info",
}, {
"productDetails": { "productName": "productname1", "qty": 5, "pricePerPiece": 20 },
"vehiclecategory": "abcd3",
"label":"adresse"
}, {
"productDetails": { "productName": "productname1", "qty": 5, "pricePerPiece": 20 },
"vehiclecategory": "abcd4",
"street": "street"
},
...
];
// this array contain all the possible label name
var listoflabel = ["etc","adresse","city","street","Your Info","My Data"];
// search on item if a label key exist and return its value
$scope.getLabel = function(item){
for(var l in listoflabel){
if(item[ listoflabel[l] ]){
return item[ listoflabel[l] ];
}
}
return "label";
}
HTML with function call
<div class="width50" ng-repeat="item in myArrayVariable track by $index">
<label>{{getLabel(item)}}</label> : {{item.vehiclecategory}}
</div>
I'm not sure I completely understand your question, but if I do, you might be able to solve it with ngRepeat. Check out the following example:
<div class="width50" ng-repeat="item in myArray track by $index">
<label>({{$index}}) {{item.vehiclecategory}}</label> : {{item.productDetails.productName}}
</div>

Sending data from server to client not working properly

I'm tying to send the last insert id from express to angularjs in my meanjs application.
When I check the id in server side it's returning properly. But in client side I'm not getting it the same way. For eg: say if the Id is 5527d2ed7ab73f7e412117c9, in angular what I'm getting is this:
Resource {0: "5", 1: "5", 2: "2", 3: "7", 4: "d", 5: "2", 6: "e", 7: "d", 8: "7", 9: "a", 10: "b", 11: "7", 12: "3", 13: "f", 14: "7", 15: "e", 16: "4", 17: "1", 18: "2", 19: "1", 20: "1", 21: "7", 22: "c", 23: "9", $promise: undefined, $resolved: true, $get: function, $save: function, $query: function…}0: "5"1: "5"2: "2"3: "7"4: "d"5: "2"6: "e"7: "d"8: "7"9: "a"10: "b"11: "7"12: "3"13: "f"14: "7"15: "e"16: "4"17: "1"18: "2"19: "1"20: "1"21: "7"22: "c"23: "9"$promise: undefined$resolved: true
My code is
Server code
exports.save(function (err, result) {
if (err) {
return res.send(400, err);
}
console.log(result._id);
res.jsonp(result._id);
});
Client code
$scope.$save(function (response) {
console.log(response)
}, onError);
Try returning an object instead, as result._id is a string and resource is expecting an object.
res.jsonp({id : result._id});
console.log(response.id)

Resources