Is it normal, that angularjs ng-repeat takes 1.5 Seconds to render data from an rest api? The result consists of only 10 rows with in total 1KB of data. How can I improve the speed or where to look for the problem?
ADDED INFOS:
The rest request itself only takes 128ms if I run it directly on the browser.
This is a set of sample data you get from the rest api:
{
"result": [
{
"id": 1224,
"name": "Schokolade-Vanille",
"kcal": 35500,
"displayName": "Schokolade-Vanille"
},
{
"id": 23423,
"name": "Naturreis Uncle Bens",
"kcal": 34400,
"displayName": "Naturreis Uncle Bens"
},
{
"id": 123231,
"name": "Paprikahendl",
"kcal": 4100,
"displayName": "Paprikahendl"
},
{
"id": 434,
"name": "Vanille Kugeln",
"kcal": 53700,
"displayName": "Vanille Kugeln"
},
{
"id": 323423,
"name": "Weihnachtstraum, Lindor-Kugeln",
"kcal": 60800,
"displayName": "Lindor-Kugeln"
},
{
"id": 5435,
"name": "Schokolade",
"kcal": 4300,
"displayName": "Schokolade"
},
{
"id": 23213,
"name": "Hühner-Nuggets",
"kcal": 23400,
"displayName": "Hühner-Nuggets"
},
{
"id": 5534,
"name": "Knödel, Kartoffel",
"kcal": 1230,
"displayName": "Knödel, Kartoffel"
},
{
"id": 23233,
"name": "Curvers",
"kcal": 15400,
"displayName": "Curvers"
},
{
"id": 53434,
"name": "Frites Original",
"kcal": 14100,
"displayName": "Frites Original"
}
],
"count": 12854
}
NEW ADDED INFOS
I have had a closer look now and found out, that not te repeat funktion is the problem.
I used the following code:
$scope.updateResultset = function() {
$scope.result = Food.query({
offset: $scope.offset,
order_by: $scope.orderby,
name: $scope.textfilter,
},function(){
console.log( "response " + (new Date().getTime() - start) );
});
$scope.offset = undefined;
console.log( "updateResultset " + (new Date().getTime() - start) );start = new Date().getTime();
And get the following response:
response 435
But the request itself only takes 131ms. In my opinion, >300ms is a lot of time to waste in a single method?
Compared to my former version, where I showed a plan html list, which was replaced by jquery ajax response html, its much slower?
As others indicated in the comments, the cause in the code is likely something else aside from ng-repeat. However, here are other options to consider, if speed still seems like an issue for ng-repeat:
quick-ng-repeat directive on github: https://github.com/allaud/quick-ng-repeat
ng-scroll, as part of angular-ui: https://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md
Ok, I found out the problem. Not the repeatition of the 10 list items was the problem! As you can see in my question, I return not only the 10 results, but also the total amount of results. In my case it was '"count": 12854'.
On the same page, I have a pagination which was the part which slows down the whole page, since it had to render 1286 pager buttons (~12854/10). Now I only show 10 pager-buttons.
Related
I’m trying to create an item using the Quickbooks Online API, but the field Sku is just ignored. I send a body like this:
{
"TrackQtyOnHand": true,
"Name": "Garden Supplies",
"Sku": "ITEM-1",
"QtyOnHand": 10,
"IncomeAccountRef": {
"name": "Sales of Product Income",
"value": "79"
},
"AssetAccountRef": {
"name": "Inventory Asset",
"value": "81"
},
"InvStartDate": "2015-01-01",
"Type": "Inventory",
"ExpenseAccountRef": {
"name": "Cost of Goods Sold",
"value": "80"
}
}
However in the object I get back as response, the Sku field is not there.
I set the parameter minorVersion to 45 (which is something I was suggested to do), but still not working.
I think the problem is that the param minorVersion should actually be minorversion (all lowercase).
I'm building 'Comments Detail page' which is a list view for comments in a single post (basically it's just facebook comments page).
I generated this JSON response data below, and as you can see, there are duplicate image urls. It means that if same user comments 100 times on a post, it needs to get image data from AWS 100 times rather than 1 time.
Maybe it's over-engineering? How do you guys deal with this?
Here is JSON data
{
"comments": [{
"id": 4,
"user": {
"image": "https://xxx.s3.amazonaws.com:443/-",
"id": 1,
"username": "jbaek73"
},
"content": "Edited!",
"publish": "2017-09-18T12:11:41.002838Z",
"updated": "2017-09-19T08:16:25.408756Z",
"reply_count": 1
},
{
"id": 13,
"user": {
"image": "https://xxx.s3.amazonaws.com:443/-",
"id": 1,
"username": "jbaek73"
},
"content": "Neaa!",
"publish": "2017-09-18T14:12:51.876523Z",
"updated": "2017-09-18T14:12:51.876600Z",
"reply_count": 0
},
{
"id": 14,
"user": {
"image": "https://xxx.s3.amazonaws.com:443/random",
"id": 5,
"username": "koreana"
},
"content": "Newa!",
"publish": "2017-09-19T08:16:35.190351Z",
"updated": "2017-09-19T08:16:35.190398Z",
"reply_count": 0
},
In this case, i would create an image object with all the required images and the user id as key:
randomFuntionName() { //you can call after you get your json
var img = []
comments.forEach((element) => { //comments are comming from your json btw
if (img[element.user.id] == null) {
img[element.user.id] = require(element.user.image)
}
})
this.setState({img})
}
render() {
//this part is only for example, you need to dynamicaly change userID
return (<Image source={this.state.img[userId]}/>)
}
This should do the work, but didn't tested it in app.
I want to insert array of document to mongodb using node.js but while inserting it's only inserting first data only.
[{
"userid": "5664",
"name": "Zero 2679",
"number": "1234562679",
"status": "contact",
"currentUserid": "Abcd"
},
{
"userid": "5665",
"name": "Zero 3649",
"number": "1234563649",
"status": "contact",
"currentUserid": "Xyz"
}]
Sample code
collection.insert([{"userid": userid,"name": name,"number": number,"status": status,"currentUserid": currentUserid}], function(err, docs) {
if (err) {
res.json({error : "database error"});
}else {
collection.find({currentUserid:currentUserid}).toArray(function(err, users) {
res.send(users);
});
}});
But it still inserting first value only can you please tell me how to insert all these documents.
Please kindly go through my post and suggest me some solution.
In your sample code you are adding only 1 user.
db.collection('myCollection').insert([doc1, doc2]); inserts two documents using bulk write.
See documentation here: https://docs.mongodb.org/manual/reference/method/db.collection.insert/
From your sample, you can do:
var data = [{
"userid": "5664",
"name": "Zero 2679",
"number": "1234562679",
"status": "contact",
"currentUserid": "Abcd"
},
{
"userid": "5665",
"name": "Zero 3649",
"number": "1234563649",
"status": "contact",
"currentUserid": "Xyz"
}];
db.collection('myCollection').insert(data)
.then(function() {
return db.collection('myCollection').find({number: {$in: ["1234563649", "1234562679"]}});
})
.then(function(res) {
console.log(res);
});
I'm new in Node.JS and I'm able to parse the JSON data and do a console log to print out name and badges.
var details = JSON.parse(body);
console.log(details.name, details.badges.length);
But I don't know how I can get the data inside the arrays of the bagdes such as id, name, url.
I tried
console.log(details.badges.length.id);
But nothing shows up. How can I access that? Thank you.
{
"name": "Andrew Chalkley",
"badges": [
{
"id": 49,
"name": "Newbie",
"url": "http:\/\/teamtreehouse.com\/chalkers",
"icon_url": "https:\/\/achievement-images.teamtreehouse.com\/Generic_Newbie.png",
"earned_date": "2012-07-23T19:59:34.000Z",
"courses": [
]
},
{
"id": 26,
"name": "Introduction",
"url": "http:\/\/teamtreehouse.com\/library\/html\/introduction",
"icon_url": "https:\/\/achievement-images.teamtreehouse.com\/HTML_Basics.png",
"earned_date": "2012-07-23T21:57:24.000Z",
"courses": [
{
"title": "HTML",
"url": "http:\/\/teamtreehouse.com\/library\/html",
"badge_count": 1
},
{
"title": "Introduction",
"url": "http:\/\/teamtreehouse.com\/library\/html\/introduction",
"badge_count": 1
}
]
}
}
It is an array, so you need the index, for example: details.badges[0].id
This will return the first (index 0) element id.
.length only returns the length of the array, so it will not be useful to get the data in it.
So I am trying to insert an object in parameters and have been unsuccessful. My mongodb structure looks like this:
[
{
"_id": "04",
"name": "test service 4",
"id": "04",
"version": "0.0.1",
"title": "testing",
"description": "test",
"protocol": "test",
"operations": [
{
"_id": "99",
"oName": "test op 52222222222",
"sid": "04",
"name": "test op 52222222222",
"oid": "99",
"parameters": {},
"description": "testing",
"returntype": "test"
},
{
"_id": "58",
"oName": "test op 52222222222",
"sid": "04",
"name": "test op 52222222222",
"oid": "58",
"parameters": {},
"description": "testing",
"returntype": "test"
}
]
}
]
I want to be able to add an object into parameters with basic details such as name, id, and type. I am not entirely sure how to tackle this as I have all other CRUD operations implemented up until the parameters part. How should I go about to complete this? I know mongodb has issues when trying to insert something into an array inside an array, so if anyone has any suggestions as to how I can complete this I would really appreciate it. Thanks.
One of the problems is I do not have access to the _id of the root object, but I do have the _id for the operation where I am inserting the parameter. Hence I was trying to insert the parameter using this code:
collection.update({"operations":{"$elemMatch": {"oid": oid}}}, {'$addToSet':{"operations.parameters": {name: "test"} }}, {safe:true}, function(err, result) {
if (err) {
res.send({'error':'An error has occurred'});
} else {
res.send(result[0]);
}
});
This does not work though.
I was able to complete the insert by using the following code:
collection.update({ "operations": {$elemMatch: {_id:oid}}}, {$addToSet: { "operations.$.parameters" : parameter}}, function(err, result) {
if (err) {
res.send({'error':'An error has occurred'});
} else {
res.send(result[0]);
}
});
Just in case anyone needed it.
This is because you need to use positional operator, The example I am copying from the link is almost the same as in your case:
db.students.update(
{ _id: 4, "grades.grade": 85 },
{ $set: { "grades.$.std" : 6 } }
)