I need to add slider that is auto moving with a speed of 4 seconds , scrolling by one element.I used bower component, angular-slick from vasyabigi.github.io/angular-slick/ , it is working fine with static data, but I am fetching data from server in controller with $http. It is not working with dynamic data.
landing.html
<div ng-repeat="cat in barsubData">
<span> {{cat.subCategoryId.name | uppercase}} </span>
</div>
controller.js
// get subcat bar function
var getsubcatdetails = function () {
services.webscreensucatService($scope, function (data) {
$scope.barsubData = data.data.stock;
console.log($scope.barsubData);
});
}
getsubcatdetails();
service.js
// webscreen subcat service
this.webscreensucatService = function ($scope, callback) {
// var data = {};
// data.email = $scope.login.username;
// data.password = $scope.login.password;
$http({
method: 'GET',
url: constants.BASEURL + '/api/BranchManager/lcdScreenDataSubCategory?accessToken=xxxxxxxxx',
contentType: 'application/json',
}).success(function (data) {
if (data.statusCode == constants.SUCCESS) {
// console.log(data);
callback(data);
} else {
$scope.loading = 0;
factories.invalidDataPop(data.message);
}
}).error(function (error) {
factories.invalidDataPop("Invalid accessToken");
});
};
Kind of DATA I am getting from server
{
"statusCode": 200,
"message": "Success",
"data": {
"_id": "57a87e09cae4c29148233157",
"stock": [
{
"startingPrice": 120,
"currentPrice": 153,
"lowPrice": 120,
"highPrice": 153,
"basePrice": 120,
"currentStock": 99,
"totalStock": 100,
"_id": "57a87f49cae4c29148233165",
"Date": "2016-08-08T12:47:05.975Z",
"subCategoryId": {
"_id": "57a87e81cae4c2914823315d",
"name": "Sauvignon Blanc"
},
"categoryId": {
"_id": "57a87e48cae4c29148233159",
"imageURL": {
"thumbnail": "s3-us-west-2.amazonaws.com/barsupply/profileThumb_12JURVq.png",
"original": "s3-us-west-2.amazonaws.com/barsupply/profilePic_12JURVq.png"
},
"name": "Wine"
}
}]
Please help me working with slider. I am free to use any angularjs slider which is working.
Thank you for the help.
Related
I have this J Query code:
$(document).ready(function(){
var $outData = $('#data');
var ajaxUrl = 'url.json';
$.ajax(
{
type: 'GET',
url:ajaxUrl,
success: function (result) {
console.log(result.passwords);
}
})
}
);
JSON file looks like this:
{
"passwords":[
{
"value":"tom",
"count":"432517"
},
{
"value":"anaconda",
"count":"454658"
},
{
"value":"111111",
"count":"148079"
},
What I need to do, is to print out each of these objects to be printed out in an ordered list (for instance it should look like this:
tom 432517
anaconda 454658
111111 148079
So far, nothing I have tried works. Althoug, I can console.log the entire object. Any suggestions?
Example rendering:
var $outData = $('#data');
var ajaxUrl = 'url.json';
$.ajax(
{
type: 'GET',
url:ajaxUrl,
success: function (result) {
result.passwords.forEach(pwd => $outData.append(`<div>${pwd.value} ${pwd.count}</div>`));
}
})
}
);
you can create elements and append to dom when you are done,
const data = {
"passwords": [{
"value": "tom",
"count": "432517"
},
{
"value": "anaconda",
"count": "454658"
},
{
"value": "111111",
"count": "148079"
}
]
}
const ol = document.createElement("ol");
for (const {
value,
count
} of data.passwords) {
const li = document.createElement("li")
li.innerText = `${value} -> ${count}`
ol.appendChild(li)
}
document.querySelector("#root").appendChild(ol)
<div id="root"></div>
I put the tracking code of google analytics in my web Application, now i want to get the Interests of the user from Google analytics API, I am using Nodejs, here is my request's code and the JSON response I get.
const dimensions_rows = [{
name: 'ga:interestAffinityCategory'
}, ];
const date_filters = [{
startDate: '7daysAgo',
endDate: 'today',
}];
const req = {
reportRequests: [{
viewId: viewId,
dateRanges: date_filters,
dimensions: dimensions_rows,
}],
};
analytics.reports.batchGet({
auth: oauth2Client,
requestBody: req
},
function(err, response) {
if (err) {
console.log('Failed to get Report');
console.log(err);
return;
}
// response.data is where the good stuff is located
console.log('Success - got something back from the Googlez');
console.log("responseee: ", JSON.stringify(response.data));
}
);
//JSON response
{
"reports": [{
"columnHeader": {
"dimensions": ["ga:interestAffinityCategory"],
"metricHeader": {
"metricHeaderEntries": [{
"name": "ga:visits",
"type": "INTEGER"
}]
}
},
"data": {
"totals": [{
"values": ["0"]
}]
}
}]
}
I seem to be having an issue getting my ng-grid directive to populate from a returned REST api json obj.
I have verfied that a valid json obj is returned and i have retrieved a nested obj of the data I need. It seems that it is not making it into the gridOptions function. Where myData is the correct valid json.
Any help will be greatly appreciated. I am pulling my hair out at this point.
Here is my service:
grid-service.js
'use strict';
app.factory('GridService', ['$http', '$q', function($http, $q) {
var apiUrl = "http://xx.xx.xx.xx/coName/public/index.php/";
// configure the send request
function sendRequest(config){
var deferred = $q.defer();
config.then(function(response){
deferred.resolve(response);
}, function(error){
deferred.reject(error);
});
return deferred.promise;
}
// retrieve all
function getRoles() {
var request = $http({
method: 'GET',
url: apiUrl + 'roles'
});
return sendRequest(request);
}
return {
getRoles: getRoles
};
}]);
I inject it into my ctrl here, and my init function and gridOption functions:
app.controller('ModuleCtrl', [ '$scope', '$http', '$modal', '$filter', 'GridService', function($scope, $http, $modal, $filter, gridService) {
var initializeGrid = function(){
getRoles();
};
var getRoles = function(){
gridService.getRoles().then(function(myRoles){
var myRolesData = myRoles.data._embedded.roles;
$scope.myData = myRoles.data._embedded.roles;
console.log($scope.myData);
});
};
$scope.gridOptions = {
data: 'myData',
enableRowSelection: true,
enableCellEditOnFocus: true,
showSelectionCheckbox: true,
selectedItems: $scope.selectedRows,
columnDefs: [{
field: 'ID',
displayName: 'Id',
enableCellEdit: false
}, {
field: 'APP_ID',
displayName: 'Module ID',
enableCellEdit: false
}, {
field: 'RLDESC',
displayName: 'Role Description',
enableCellEdit: true
}, {
field: 'APDESC',
displayName: 'Module Description',
enableCellEdit: true
}, {
field: 'ZEND_DB_ROWNUM',
displayName: 'Record number',
enableCellEdit: false
}]
};
// fire it up
initializeGrid();
}
My complete json:
{
"_links": {
"self": {
"href": "http://xx.xx.xx.xx/coName/public/index.php/roles?page=1"
},
"describedBy": {
"href": "Some Fun Stuff"
},
"first": {
"href": "http://xx.xx.xx.xx/coName/public/index.php/roles"
},
"last": {
"href": "http://xx.xx.xx.xx/coName/public/index.php/roles?page=1"
}
},
"_embedded": {
"roles": [
{
"ID": 1,
"APP_ID": 1,
"RLDESC": "Admin",
"APDESC": "authLive",
"ZEND_DB_ROWNUM": "1"
},
{
"ID": 2,
"APP_ID": 1,
"RLDESC": "User",
"APDESC": "authLive",
"ZEND_DB_ROWNUM": "2"
},
{
"ID": 4,
"APP_ID": 1,
"RLDESC": "SuperUser",
"APDESC": "authLive",
"ZEND_DB_ROWNUM": "3"
}
]
},
"page_count": 1,
"page_size": 25,
"total_items": 3
}
Remove the following line from the gridOptions
data: 'myData'
Then in getRoles() use
$scope.gridOptions.data = myRolesData;
instead of
$scope.myData = myRoles.data._embedded.roles;
(Maybe you need $scope.myData for some other reason than the grid, but if not I think the above is all you need. I have not tested this live, but it should work.)
This is the JSON file ..
Using angular js controller and view how can I parse this json and display the drop1 and drop2 values of respective technology in drop down menu.getting the JSON data using http get.
Thanks in advance
{
"technology": [
{
"id": "AKC",
"detail": {
"drop1": [
{
"id": "AKC-lst-1231"
},
{
"id": "AKC-lst-1232"
},
{
"id": "AKC-lst-1233"
}
],
"drop2": [
{
"id": "T_AKC_live"
},
{
"id": "T_AKC_Capt"
},
{
"id": "T_AKC_live1"
}
]
}
},
{
"id": "MET",
"detail": {
"drop1": [
{
"id": "MET-2st"
},
{
"id": "MET-34"
}
],
"drop2": [
{
"id": "sd-232"
},
{
"id": "sd-121"
}
]
}
}
]
}
Please consider this example:
<!DOCTYPE html>
<html ng-app="postExample">
<head>
<script data-require="angular.js#1.2.22" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script>
<script src="usersController.js"></script>
<script src="userRepoService.js"></script>
</head>
<body ng-controller="UsersController">
<h1>Post Angular Example</h1>
<select id="UserSelector" style="width: 100%;">
<option ng-repeat="user in users" value="{{user.id}}">{{user.login}} </option>
</select>
</body>
</html>
userRepoService.js
(function(){
var userRepoService = function($http){
var getUsers = function(username){
return $http.get("https://api.github.com/users")
.then(function(response){
return response.data;
});
};
return {
get: getUsers
};
};
var module = angular.module("postExample");
module.factory("userRepoService", userRepoService);
}());
Controller:
(function(){
var app = angular.module("postExample",[]);
var UsersController = function($scope, userRepoService){
var onFetchError = function(message){
$scope.error = "Error Fetching Users. Message:" +message;
};
var onFetchCompleted = function(data){
$scope.users =data;
};
var getUsers = function(){
userRepoService.get().then(onFetchCompleted,onFetchError);
};
getUsers();
};
app.controller("UsersController", UsersController);
}());
You can directly call $http service, and get that response inside success data parameter.
CODE
$http.get("test.json").
success(function(data, status, headers, config) {
//get data and play with it
}).
error(function(data, status, headers, config) {
alert("Error fetching data");
// log error
});
Hope this could help you, Thanks.
i want my jqgrid programmatically move next page with reloaded data. for example: every 5 seconds change page and get refreshed data.
---> datatype: 'json' <---
is in loop() function. brings reloaded page, but it does not pass the next page. stuck on the first page. if i delete it goes the next page, but the page doesn't refresh.
i read and tried, tried, tried everything but no luck as of yet. Please help..
<script>
function fill() {
jQuery("#jqGrid").jqGrid({
url: '#Url.Content("~/Handler/GetAjaxGridData")',
datatype: 'json',
height: 'auto',
altRows: true,
loadonce:true,
pager: '#pager',
rowNum: 3,
colNames: ['birim_adi', 'durum'],
colModel: [
{ name: 'cell.birim_adi', index: 'birim_adi' },
{ name: 'cell.durum', index: 'durum' }
],
jsonReader: {
repeatitems: false,
root: function (obj) { return obj.rows; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.rows.length; }
},
loadComplete: function (data) {
var total_pages = $("#sp_1_pager").text(); // total pages
$('#hdn_total_pages').val(total_pages);
},
ajaxGridOptions: { cache: false }
});
}
function loop() {
var i = 1;
setInterval(function () {
var total_pages = $('#hdn_total_pages').val();
$("#jqGrid").setGridParam({
datatype: 'json', // <--When I delete it goes to another page, but the page does not refresh.
page: i,
}).trigger('reloadGrid');
i++;
if (i > total_pages) { i = 1; }
}, 5000);
}
</script>
<script>
$(function () {
fill();
loop();
});
</script>
<table id="jqGrid"></table>
<div id="pager"></div>
<input type="hidden" id="hdn_total_pages" value="1" />
and then my json like this:
{
"total": 1,
"page": 1,
"records": 6,
"rows": [
{
"id": 1,
"cell": {
"birim_adi": "a",
"durum": "test"
}
},
{
"id": 2,
"cell": {
"birim_adi": "b",
"durum": "test1"
}
},
{
"id": 3,
"cell": {
"birim_adi": "c",
"durum": "test3"
}
},
{
"id": 4,
"cell": {
"birim_adi": "d",
"durum": "test4"
}
}
]
}
The jsonReader is returning a hard-coded value of '1' for page. It looks like your data conforms to the structure jqGrid will work with automatically. You might just try deleting the jsonReader section entirely and give it a shot.
If that's not working (or your data has different names than jqGrid is expecting) you will need to look at fixing jsonReader to return proper values.
Take a look at this blog entry about customizing the jsonReader to work with different data formats. It might help you resolve the page getting stuck. (Full disclosure: I'm the author.)