I have data the following data:
var v = {
"2015-09-23":[
{"AllConversions":"0.1","AverageCpc":"0.01","AverageCpm":"0.02","AveragePosition":"8.3",Id:1},
{"AllConversions":"0.0","AverageCpc":"0.00","AverageCpm":"0.00","AveragePosition":"9.0",Id:1}
],
"2015-09-18":[
{"AllConversions":"0.1","AverageCpc":"77.14","AverageCpm":"239.57","AveragePosition":"7.7",Id:1},
{"AllConversions":"0.0","AverageCpc":"39.97","AverageCpm":"703.91","AveragePosition":"3.8",Id:1},
{"AllConversions":"0.0","AverageCpc":"20.40","AverageCpm":"381.36","AveragePosition":"4.3",Id:1}
]
};
var columns = [
"AllConversions",
"AverageCpc",
"AverageCpm",
"AveragePosition"
];
And I want to return the following object which is the sum of all the fields without Id:
{
"2015-09-23": [
{"AllConversions":"0.1","AverageCpc":"0.01","AverageCpm":"0.02","AveragePosition":"17.3",Id:1}
],
"2015-09-18": [
{"AllConversions":"0.1","AverageCpc":"137.51","AverageCpm":"1324.84","AveragePosition":"15.8",Id:1}
]
}
I tried this code utilising underscrore:
_.each(columns,function(item){
var out = _(groups).map(function (g, key) {
return {
Date: key,
item: _(g).reduce(function (m, x) { return m + x.item; }, 0)
}
});
});
But I get a 'NaN' error when running the code.
Check this out..
<html>
<head>
<script>
var v={
"2015-09-23":[
{"AllConversions":"0.1","AverageCpc":"0.01","AverageCpm":"0.02","AveragePosition":"8.3",Id:1},
{"AllConversions":"0.0","AverageCpc":"0.00","AverageCpm":"0.00","AveragePosition":"9.0",Id:1}
],
"2015-09-18":[
{"AllConversions":"0.1","AverageCpc":"77.14","AverageCpm":"239.57","AveragePosition":"7.7",Id:1},
{"AllConversions":"0.0","AverageCpc":"39.97","AverageCpm":"703.91","AveragePosition":"3.8",Id:1},
{"AllConversions":"0.0","AverageCpc":"20.40","AverageCpm":"381.36","AveragePosition":"4.3",Id:1}
]};
var columns=[
"AllConversions","AverageCpc","AverageCpm","AveragePosition"
];
var output = {};
var smallOutput = {};
var tempDate = [];
for(var i in v){
var temp = 0;
for(var j = 0; j < columns.length ; j++){
for(var k = 0 ; k < v[i].length; k++) temp += parseFloat(v[i][k][columns[j]]);
smallOutput[columns[j]] = temp ;
temp=0;
}
output[[i]] = smallOutput;
}
console.log(output);
</script>
</head>
<body>
</body>
</html>
Here is the fiddle.. https://jsfiddle.net/4t1teyk0/
Check your console.
Here is the output
Related
<script type="text/jsx">
var Counter = React.createClass({
ChangeValue: function(ctr){
alert(this.state.arr[ctr]);
this.setState({
arr : this.state.arr[5]
});
},
getInitialState: function(){
return {
arr:[
'0','0','0',
'0','0','0',
'0','0','0'
],
arr2:[
0,0,0,
0,0,0,
0,0,0]
}
},
render: function(){
var sese = [];
var ctr = 0;
sese.push( <h1>Count: {this.state.arr}</h1>)
for(var i = 0; i < 3 ; i++)
{
for(var j = 0 ; j< 3 ; j++)
{
sese.push(<button type="button" key={ctr} id={ctr} onClick={this.ChangeValue.bind(null, this.ctr)}>{this.state.arr2[ctr]}</button>)
ctr = ctr + 1;
}
sese.push(<br/>)
}
return (
<div>{sese}</div>
);
}
});
ReactDOM.render(
<Counter/>,
document.getElementById('root')
);
</script>
i tried this
var Counter = React.createClass({
ChangeValue: function(ctr){
alert(this.state.arr[this.ctr]);
this.setState({
arr : this.state.arr[5]
});
},
and still undefined..
i'm studying react , get stucked with my ctr in alert , and don't know the solution..
i'm trying to change the value of my button. if i click the button, the value will become 1 but my ctr is always undefined. does anyone know why my alert is always undefined?
In your onClick you have to pass just ctr and not this.ctr as it does not exist.
onClick={this.ChangeValue.bind(null, ctr)}
I have one grid and according to some conditions, I have to change the data which comes from the back-end.The first time I load data from the back the grid works fine. When I start switching data the grid displays new data well but stays frozen for a while. I notice that this time is random and is often about 3 seconds or plus.
I tried to assign data to the grid through different ways but the result is the same:
1)
$scope.gridOptions = {
//some options,
data: $scope.myData
}
And then
Demande.query({lb: condition}, function (result) {
$timeout(function () {$scope.myData = result;},0);// I also try without $timeout
}
2) I try to assign the data directly to the grid
Demande.query({lb: condition}, function (result) {
$timeout(function () {$scope.gridOptions.data = result;},0);
}
3) I combine the above approachs with
a) $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.ROW)
b) $scope.gridApi.core.refreshRows()
but the problem persists. I am using angular-ui-grid 4.0.1
Any idea will be appreciated.
Another option:
4) $scope.gridOptions.data = angular.copy($scope.myData);
Should give the grid the little time that it needs to breath!
Update:
angular.module('app', ['ui.grid'])
.controller('MainCtrl', ['$scope', function($scope) {
$scope.gridOptions = {
columnDefs: []
}
for (var i = 0; i < 80; i++) {
$scope.gridOptions.columnDefs.push({
name: 'C' + (i + 1),
enableColumnMenu: false
});
}
var dataLoadCounter = 1;
$scope.switchData = function() {
$scope.gridOptions.data = [];
for (var i = 0; i < 1000; i++) {
$scope.gridOptions.data.push({});
for (var j = 0; j < 80; j++) {
$scope.gridOptions.data[i]['C' + (j + 1)] = 'D' + dataLoadCounter + (j + 1);
}
}
dataLoadCounter++;
}
$scope.switchData();
}]);
div[ui-grid] {
width: 4500px;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" />
<div ng-app="app" ng-controller="MainCtrl">
<button ng-click="switchData()">Switch Data</button>
<div ui-grid="gridOptions">
</div>
</div>
here is app.js
AllServices.teamAllDataFunction1(User)
.then(function(response) {
$scope.User.data=response.data['DeatilTeam'];
console.log($scope.User.data);
var sum = 0;
for (var i = 0; i < ($scope.User.data).length; i++) {
sum += parseInt($scope.User.data[i].dp_inst_pending) || 0;
}
});
here m getting all data in which so many records having same name but differnt pending amount, so i want to show only single name and the summation of there penging amount, so that i can show it in single row. I'm not getting how to achieve it.. please help me..
here is html,
<table ng-table>
<tr>
<th>advisor_name</th>
<th>totalpending</th>
</tr>
<tr ng-repeat="data in User.data" ng-if="data.dp_inst_pending && data.dp_inst_pending == 0">
<td>{{data.AdvisorName}}</td>
<td>{{data.dp_inst_pending}}</td>
</tr>
</table>
in this way i 'm getting data
code has few generic issues, let's resolve that first.
First of all, assuming your data.dp_inst_pending is Integer, you have used it directly in ng-if. In that case, if someone actually has zero pending amount it won't be displayed.
Secondly, you want to calculate sum of pending amount for those accounts which have same name. for that you will have to run a double for loop. One to check names and other to add pending amount if name is same. I have created one sample for the same, which i think satisfies your requirements. Please go through it and optimize as required.
var myApp = angular.module("myApp", []);
myApp.controller("MyController", ['$scope',
function($scope) {
$scope.User = {};
$scope.User.data = [{
"advisor_name": "Test1",
"dp_inst_pending": 300
}, {
"advisor_name": "Test2",
"dp_inst_pending": 0
}, {
"advisor_name": "Test1",
"dp_inst_pending": 500
}, {
"advisor_name": "Test2",
"dp_inst_pending": 600
}, {
"advisor_name": "Test1",
"dp_inst_pending": 15
}, {
"advisor_name": "Test2",
"dp_inst_pending": 150
}, {
"advisor_name": "Test3",
"dp_inst_pending": 30
}];
$scope.User.summedData = [];
var sums = [];
var advisorNames = [];
for (i = 0; i < $scope.User.data.length; i++) {
var key = $scope.User.data[i].advisor_name;
if (advisorNames.indexOf(key) >= 0) {} else {
var sumOfKey = 0;
for (j = 0; j < $scope.User.data.length; j++) {
if ($scope.User.data[j].advisor_name == key) {
sumOfKey += $scope.User.data[j].dp_inst_pending;
}
}
sums.push(sumOfKey);
advisorNames.push(key);
}
}
$scope.Test = {};
$scope.Test.data = [];
for (k = 0; k < sums.length; k++) {
$scope.Test.data[k] = {
"advisor_name": advisorNames[k],
"dp_inst_pending": sums[k]
}
}
console.log(sums);
console.log(advisorNames);
console.log($scope.Test.data);
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyController">
<table ng-table>
<tr>
<th>advisor_name</th>
<th>totalpending</th>
</tr>
<tr ng-repeat="data in Test.data">
<td>{{data.advisor_name}}</td>
<td>{{data.dp_inst_pending}}</td>
</tr>
</table>
</div>
</div>
I am not optimizing it, as it should be done by you.
im new in angular js and i need to use highchart in my angular page . the problem is that i must draw chart with dynamic data from json and the number of charts will be dynamic too , maybe it should draw 3 or 4 different chart from one json . I searched alot but couldnt solve my problem.
this code works but show the data in one chart in different series. I need to show each series in different charts, and in this case the json send 4 data but it will be changed .
1. List item
$scope.draw_chart = function(){
Highcharts.chart('container2', {
chart:{
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
var this_chart = this;
$scope.ws = ngSocket('ws://#');
$scope.ws.onOpen(function () {
});
var k = 0 ;
var time=0;
$scope.points_avarage = [];
$scope.ws.onMessage(function (message) {
listener(JSON.parse(message.data));
var z = JSON.parse(message.data);
var line_to_draw = z.result.length;
var j = 0 ;
for(i=0 ; i < line_to_draw*2 ; i+=2)
{
$scope.data_to_draw[i] = {
name : z.result[j][0]['name'] ,
y : z.result[j][0]['rx-bits-per-second']
}
$scope.data_to_draw[i+1] = {
name : z.result[j][0]['name'] ,
y : z.result[j][0]['tx-bits-per-second']
}
j++;
}
this_chart.series[0].name= $scope.data_to_draw[0].name;
this_chart.series[1].name= $scope.data_to_draw[1].name;
this_chart.series[2].name= $scope.data_to_draw[2].name;
this_chart.series[3].name= $scope.data_to_draw[3].name;
for(i=0; i < line_to_draw*2; i++) {
var x = (new Date()).getTime(); // current time
var y = parseInt($scope.data_to_draw[i].y);
this_chart.series[i].addPoint([x, y], true, true);
}
});
var d = new Date().toTimeString();
}
}
},
global: {
useUTC: false
},
title: {
text: 'Live data'
},
xAxis: {
type: 'datetime'//,
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
width: 1,
color: '#808080'
}
]
}
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [{
data: (function () {
var data = [],
time = (new Date()).getTime(),
i;
for (i = -5; i <= 0; i += 1) {
data.push({
x: time ,
y: 0
});
}
return data;
}())
},
{
data: (function () {
var data = [],
time = (new Date()).getTime(),
i;
for (i = -5; i <= 0; i += 1) {
data.push({
x: time ,
y: 0
});
}
return data;
}())
},
{
data: (function () {
var data = [],
time = (new Date()).getTime(),
i;
for (i = -5; i <= 0; i += 1) {
data.push({
x: time ,
y: 0
});
}
return data;
}())
},
{
data: (function () {
var data = [],
time = (new Date()).getTime(),
i;
for (i = -5; i <= 0; i += 1) {
data.push({
x: time ,
y: 0
});
}
return data;
}())
}
]
});
};
<div id="containet" ng-init="draw_chart()"></div>
app.controller('reviewCtrl',function($scope,$http) {
$http.get('http://~~~~~~~~~~~~~')
.success(function(data) {
$scope.reviewInfoList = data;
var cnt = 5;
var ind = 0;
$scope.reviewInfo = $scope.reviewInfoList.slice(0,cnt);
$scope.resetList = function(){
ind = 0
$scope.reviewInfo = $scope.reviewInfoList.slice(0,cnt);
};
$scope.loadMore = function() {
ind = ind + cnt
var r = cnt
if (ind + cnt > $scope.reviewInfoList.length) {
r = $scope.reviewInfoList.length - ind
}
$scope.reviewInfo = $scope.reviewInfo.concat($scope.reviewInfoList.slice(ind, r + ind))
}
});
This code is use in My project AngularJS.
I want add fadeIn effect at loadmore function
How to do that
some body help..please
You need to include the ng-animate script, and then when you create your module, include ngAnimate as a dependency. Then the rest is just css. Take a look at this snippet to see it in action.
angular.module('app', ['ngAnimate']).controller('reviewCtrl', function($scope, $http) {
$scope.reviewInfoList = [];
$scope.reviewInfo = [];
var cnt = 2;
var ind = 0;
//for the sake of this demo, generate some dummy data
for (var i = 0; i < 1000; i++) {
$scope.reviewInfoList.push(i);
}
$scope.loadMore = function() {
ind = ind + cnt
var r = cnt
if (ind + cnt > $scope.reviewInfoList.length) {
r = $scope.reviewInfoList.length - ind
}
$scope.reviewInfo = $scope.reviewInfo.concat($scope.reviewInfoList.slice(ind, r + ind))
}
//load the first bit right away
$scope.reviewInfo = $scope.reviewInfoList.slice(0, cnt);
$scope.resetList = function() {
ind = 0
$scope.reviewInfo = $scope.reviewInfoList.slice(0, cnt);
};
});
/* The starting CSS styles for the enter animation */
.fade.ng-enter {
transition: 0.5s linear all;
opacity: 0;
}
/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.min.js"></script>
<div ng-app="app" ng-controller="reviewCtrl">
<button ng-click="loadMore()">Load more</button>
<ul>
<li class="fade" ng-repeat="review in reviewInfo">{{review}}</li>
</ul>
</div>