I am trying to make an app that will display the job details in the modal window, depending on the template that is selected. For this I have combined ui.bootstrap and ui.router . But for some reason, I cannot manage to display the objects as I would want to. I know that $http.get is working, as when I do the console.log(specs), the object is displayed.
This is my code:
HTML
<div class="car-up" ng-controller="carCtrl">
<script type="text/ng-template" id="careersTpl.html">
<div class="closer">
<span class="close-me" ng-click="ok()">X</span>
</div>
<div class="modal-body">
<span>{{placeholder}}</span>
</div>
<div class="modal-body modtwo">
<ul>
<li><a ui-sref="sales">Sales Department</a></li>
</ul>
<ul>
<li><a ui-sref="webd">Web Developer</a></li>
<li><a ui-sref="crm">Client Relationship Manager</a></li>
<li></li>
</ul>
<div class="show-me" ui-view></div>
</div>
</script>
<button class="btn" ng-click="open()">Open</button>
</div>
app.js
var app = angular.module('carApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap', 'ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('webd', {
url: "/web-developer",
templateUrl: "templates/web-developer.html",
})
.state('crm', {
url: "/crm",
templateUrl: "templates/crm-uk.html"
})
}]);
ctrl.js
app.controller('carCtrl', function($scope, $http, $uibModal) {
$http.get('jobs.json').then(function(response) {
$scope.placeholder = response.data.default;
$scope.specs = response.data.specs;
$scope.open = function() {
var modalContent = $uibModal.open({
templateUrl: 'careersTpl.html',
controller : 'modalContentCtrl',
controllerAs: '$ctrl',
size: 'lg',
backdropClass: 'backdropOver',
openedClass: 'modal-opened',
resolve: {
items: function() { return $scope.specs; },
items2: function() { return $scope.placeholder;}
}
})
console.log($scope.placeholder);
console.log($scope.specs);
console.log($scope.specs.crm);
}
});
});
app.controller('modalContentCtrl', function($scope, $uibModalInstance, items, items2) {
$scope.specs = items;
$scope.placeholder = items2;
$scope.ok = function() {
$uibModalInstance.close();
}
});
crm-uk.html
<div ng-repeat="(k, v) in specs.crm">
<h3>{{v["job-title"]}}</h3>
<p>{{v["job-body"]}}</p>
Apply Here:
<p>{{v["job-apply"]}}</p>
</div>
web-developer.html
<div ng-repeat="(k, v) in specs.web-dev">
<h3>{{v["job-title"]}}</h3>
<p>{{v["job-body"]}}</p>
Apply Here:
<p>{{v["job-apply"]}}</p>
</div>
JSON
{
"default":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"specs":{
"web-dev":{
"job-title":"Web Developer",
"job-body":"Lorem Ipsum Body Text",
"job-apply":"applink"
},
"crm":{
"job-title":"Client Relationship Manager",
"job-body":"Lorem Ipsum CRM Text",
"job-apply":"applylink"
}
}
}
I believe something is wrong with my .json file or how I am accessing it, but cannot figure out what.
Can someone please help?
thanks.
First best to change the JSON structure as following:
{
"default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"specs": {
"web-dev": [{
"job-title": "Web Developer",
"job-body": "Lorem Ipsum Body Text",
"job-apply": "applink"
}],
"crm": [{
"job-title": "Client Relationship Manager",
"job-body": "Lorem Ipsum CRM Text",
"job-apply": "applylink"
}]
}
}
Make the "crm" as a list of multiples.
Then in the view file, you can loop the "crm" specs list.
<div ng-repeat="item in specs.crm">
{{item['job-title']}}<br/>
{{item['job-body']}}<br/>
{{item['job-apply']}}<br/>
</div>
Or use {{::item['job-title']}} for single data binding to limit digest cycles
Working Plunkr here
Please note only updated for 'CRM'
Related
I am trying to implement a component in AngularJS 1.5.8 with multi-slot transclusion.
My test works fine if I use a directive, but with a component, it seems like not even the slot is found!.
This is how I declare the component
app.component('asComponent', function() {
return {
transclude: {
'title': '?paneTitle',
'body': 'paneBody',
'footer': '?paneFooter'
},
template: `<h1>I am a component</h1>
<div style="border: 2px solid red;">
<div class="title" ng-transclude="title">Fallback Title</div>
<div ng-transclude="body"></div>
<div class="footer" ng-transclude="footer">Fallback Footer</div>
</div>`
}});
app.controller('ExampleController', [ function() {
var vm = this;
vm.title = 'Lorem Ipsum';
vm.link = 'https://google.com';
vm.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
}]);
And here the HTML
<div ng-controller="ExampleController as $ctrl" class="container">
<as-component>
<pane-title>
<a ng-href="{{$ctrl.link}}">{{title}}</a>
</pane-title>
<pane-body>
<p>{{$ctrl.text}}</p>
</pane-body>
</as-component>
</div>
Official AngularJS documentation says
In AngularJS, a Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure.
If this is the case, then multi-slot transclusion should work perfectly with components as well.
I know I am missing something, but I cannot see what it is!
I have crated a small Plunker with both a directive and a component.
https://plnkr.co/edit/yTMRD4SrH8CWLK4LQEwe?p=info
Thanks
For components, use an object (not a function):
app.component('asComponent', {
transclude: {
'title': '?paneTitle',
'body': 'paneBody',
'footer': '?paneFooter'
},
template: `<h1>I am a component</h1>
<div style="border: 2px solid red;">
<div class="title" ng-transclude="title">Fallback Title</div>
<div ng-transclude="body"></div>
<div class="footer" ng-transclude="footer">Fallback Footer</div>
</div>`
});
Also, you're missing $ctrl in {{ title }}. It should be:
<a ng-href="{{$ctrl.link}}">{{$ctrl.title}}</a>
Here it is working in a plnkr.
I want to display content beneath a table, from a JSON file, relative to to item the user clicked on in the table
Example:
JSON file
{
"patentInfo": [
{
"name": "item1",
"cost": "$33",
"date": "13/06",
},
{
"name": "item2",
"cost": "$29",
"date": "02/02",
}
]
}
View - table
click on item 1 > DISPLAY price:$33, date:13/06
click on item 2 > DISPLAY price:$29, date:02/02
I asked this question last week but didn't get a response as I don't think I made it too clear. I'm using ui-view to display content, and it is the state patents.list.item URL that needs to be relative, dependent on what the user clicked on. Any ideas on how to achieve this?
var app = angular.module('myApp', ['ngRoute', 'angularMoment', 'ui.router', "chart.js"]);
app.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function($stateProvider, $locationProvider, $urlRouterProvider ) {
$urlRouterProvider
.when('', '/patents/list-patents')
.when('/', '/patents/list-patents')
.when('/patents', '/patents/list-patents')
.when('/transactions', '/transactions/current-transactions')
.otherwise('/patents/list-patents');
$stateProvider
.state("patents", {
url: "/patents",
templateUrl: "templates/patents/patent-nav.htm",
controller: "patentCtrl"
})
.state("patents.list", {
url: "/list-patents",
templateUrl: "templates/patents/list/list-patents.htm",
controller: "patentCtrl"
})
.state("patents.list.item", {
url: "/patent-item",
templateUrl: "templates/patents/list/patent-item.htm",
controller: "patentCtrl"
})
Controller
app.controller('patentCtrl', ['$scope', '$http', 'patentTabFactory', 'loadPatents', '$stateParams', 'patentService', function($scope, $http, patentTabFactory, loadPatents, $stateParams, patentService) {
patentService.items.then(function (patents) {
$scope.items = patents.data;
console.log($scope.patents);
$scope.patents = patents.data[patentService.getPatentItem($scope.items, "aid", $stateParams.id)];
});
$scope.patent={id:null,applicationNumber:'',clientRef:'',costRenew:'',renewalDate:'',basketStatus:'', costEnd: '', nextStage:''};
$scope.patents=[];
$scope.submit = $scope.submit;
$scope.remove = $scope.remove;
$scope.fetchAllPatents = function(){
loadPatents.fetchAllPatents()
.then(
function(d) {
$scope.patents = d;
},
function(errResponse){
console.error('Error while fetching Users');
}
);
}
$scope.fetchAllPatents();
$scope.deletePatent = function(id){
loadPatents.deletePatent(id)
.then(
$scope.fetchAllPatents,
function(errResponse){
console.error('Error while deleting Patent');
}
);
}
$scope.submit = function() {
if($scope.patent.id===null){
console.log('Saving New User', $scope.patent);
loadPatents.createPatent($scope.patent);
}
console.log('User updated with id ', $scope.patent.id);
}
$scope.remove = function(id){
console.log('id to be deleted', id);
if($scope.patent.id === id) {//clean form if the patent to be deleted is shown there.
reset();
}
$scope.deletePatent(id);
}
$scope.tabs = patentTabFactory.tabs;
$scope.currentTab = patentTabFactory.currentTab;
// $scope.isActiveTab = patentTabFactory.isActiveTab();
$scope.onClickTab = function(currentTab) {
patentTabFactory.onClickTab(currentTab);
$scope.currentTab = patentTabFactory.currentTab;
};
$scope.isActiveTab = function(tabUrl) {
return tabUrl == patentTabFactory.currentTab;
}
}]);
list-patents view
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-striped text-md-center">
<thead class="thead-inverse">
<tr>
<td ng-click="patentAppOrder()" class="align-middle">Application No. </td>
<td class="align-middle">Client Ref</td>
<td class="align-middle">Cost to renew</td>
<td class="align-middle">Basket</td>
<td class="align-middle">Remove</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in patents">
<td><a ui-sref="patents.list.item">{{x.applicationNumber}}</a></td>
<td ng-bind="x.clientRef"></td>
<td ng-bind="x.costToRenew">$</td>
<td ng-bind="x.renewalDueDate"></td>
<td><button type="button" class="btn btn-danger" ng-click="remove(x.id)">Remove</button></td>
</tr>
</tbody>
</table>
<div ui-view></div>
</div>
</div>
<div ui-view></div>
patent item view
<div id="tabs">
<ul>
<li ng-repeat="tab in tabs"
ng-class="{active:isActiveTab(tab.url)}"
ng-click="onClickTab(tab)">{{tab.title}}</li> <!--applies active to the returned tab url -->
</ul>
<div id="mainView">
<div class="row">
<div ng-include="currentTab"></div>
</div>
</div>
</div>
<script type="text/ng-template" id="patent-info.htm">
<div class="col-md-6 text-xs-center">
<h2>Application Number</h2>
<table class="table table-striped">
<tbody>
<table>
<tr ng-repeat="(x, y) in patents">
<td ng-repeat="x.id in patents"></td>
<td>{{y.applicationNumber}}</td>
</tr>
</table>
</tbody>
</table>
</div>
<div class="col-md-6 text-xs-center">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
</p>
</div>
</script>
<script type="text/ng-template" id="cost-analysis.htm">
<div class="col-md-6 text-xs-center" ng-controller="LineCtrl">
<h2>Cost Analysis</h2>
<canvas class="chart chart-line" chart-data="data" chart-labels="labels"
chart-series="series" chart-click="onClick"></canvas>
</div>
</script>
<script type="text/ng-template" id="renewal-history.htm">
<div class="col-md-6 text-xs-center">
<h2>Renewal History</h2>
<p>In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor..</p>
</div>
</script>
What you have to do first is to add a dynamic URL parameter to the route which is supposed to display information about a selected patent and give it another controller.
.state("patents.list.item", {
url: "/patent-item/:name",
templateUrl: "templates/patents/list/patent-item.htm",
controller: "patentDetailsCtrl"
})
Then when you are navigating to that patent, you have to include the name (assuming that is a unique identifier) in the link.
<td><a ui-sref="patents.list.item({ name: x.name })">{{x.applicationNumber}}</a></td>
After that in your patentDetailsCtrl, you can fetch information about the patent from the JSON file and display it.
Alternative Solutions
Another solution would be handle it in your patentCtrl without an additional (patents.list.item) route. But I would not recommend that approach.
You could also use components if you are using AngularJS v1.5+. To learn more about components, see the official documentation.
I am developing Angularjs SPA application. I have one div tag where I am binding few details using ng-repeat as below.
<div class="grid-container">
<div class="grid" ng-repeat="car in carDetails">
<img class="car" src="{{car.WebImageURL}}">
<div class="car-name">{{car.make}}<span class="make">{{car.model}}</span></div>
<div class="car-des">lorem ipsum dolor sit amet,</div>
<div class="car-price">{{car.Price}} <span class="sar">{{car.style}}</span></div>
</div>
</div>
On clicking on the div tag(with class="grid-container") i want to redirect to new state. So How can I use ui-sref and ng-click? I am little confused about this. Can someone help me in this regard? Thanks.
You can try like the below code,
<div class="grid-container">
<div class="grid" ng-repeat="car in carDetails">
<img class="car" src="{{car.WebImageURL}}">
<a ui-sref="MainPageRoute.SubPage1Route({name: car.make})"><div class="car-name">{{car.make}}<span class="make">{{car.model}}</span></div></a>
<a ui-sref="MainPageRoute.SubPage2Route({des: car.desc})"><div class="car-des">lorem ipsum dolor sit amet,</div></a>
<a ui-sref="MainPageRoute.SubPage3Route({price: car.Price})"><div class="car-price">{{car.Price}} <span class="sar">{{car.style}}</span></div></a>
</div>
</div>
<ui-view></ui-view>
route file should be like:
$stateProvider.state('MainPageRoute', {
url: "/MainPage",
templateUrl: "templates/main-template.html",
controller: 'main-ctrl'
});
$stateProvider.state('MainPageRoute.SubPage1Route', {
url: "/SubPage1/:name",
templateUrl: "templates/sub-page1-template.html",
controller: 'sub-page1-ctrl'
});
$stateProvider.state('MainPageRoute.SubPage2Route', {
url: "/SubPage2/:des",
templateUrl: "templates/sub-page2-template.html",
controller: 'sub-page2-ctrl'
});
$stateProvider.state('MainPageRoute.SubPage3Route', {
url: "/SubPage3/:price",
templateUrl: "templates/sub-page3-template.html",
controller: 'sub-page3-ctrl'
});
Add a goto function to your controller like this:
$scope.goto = function(sref) {
$state.go(sref);
}
And call your function via ng-click:
<div class="car-name" ng-click="goto('ui-sref')">
{{car.make}}
<span class="make">{{car.model}}</span>
</div>
I'm an Angular beginner.
I want to load a json on load, this works well
but if I make a change to an input field, I get an error message.
Error: $rootScope:infdig Infinite $digest Loop
Thanks
My HTML
<body ng-app="myApp" ng-controller="mainCtrl">
<div id="wrapper">
<header style="height:50px;"> </header>
<div class="container">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="js/controller.js"></script>
<section>
<div class="col-md-4">
<label for="words">Wörter</label>
<input ng-model="words" id="words" type="number" name="words" placeholder="Wörter" min="10" max="10000" value="{{words}}" step="10">
</div>
<p>{{words}}</p>
<div id="view" class="col-md-6">
<ul ng-controller="loadContent">
<li ng-repeat="content in contents | orderBy:random">{{content.text}}</li>
</ul>
</div>
</section>
</div>
</div>
My javascript
var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($scope, $http) {
$scope.words = 40;
$scope.letterLimit = 400;
});
app.controller('loadContent', function ($scope, $http) {
$scope.random = function () {
return 0.5 - Math.random();
}
$scope.loadContent = function() {
var def = $http.get('data.json').success(function(data) {
$scope.contents = data;
});
}
$scope.loadContent();
});
My json
[
{"text": "Lorem ipsum1", "date" : true},
{"text": "Lorem ipsum2", "data" : true},
{"text": "Lorem ipsum3", "data" : true}
]
I think that angular is continuously disgesting your controller as soon as you interact with the view, and is therefore executing $scope.loadContent(); at the bottom of your controller repeatedly.
I assume you only wish for this to fire once? If so, remove the function call from your controller and modify your view as below.
<body ng-app="myApp" ng-controller="mainCtrl" ng-init="loadContent">
With this, $scope.loadContent is only called once. if you wish to call it another way, or multiple times, please specify in your question.
I have a large json file almost 5 MB in size with the following array format.
There are about 3000 records.
I am using microsoft mvc 4 and angular + ngTable to display this data in the front end. It needs to be searchable and sortable on all columns.
The server side code does not take any arguments and returns all 3000 records in the format below.
{
"MR": "Inact",
"EncType": null,
"ClientAlias": 111020.0,
"OrgName": "Zic",
"CharacterAlias": null,
"Account#": 30645147.0,
"MRN": null,
"PlanCode": null,
"Address": "PO Box 123456",
"City": "Richmond ",
"St": "VA",
"ZIP": 23298.0,
"ContactName": "Jonny J",
"Fax": "(111) 111-1111",
"PHONE": "pager 111-1111",
"CriticalValueNotification": null,
"ClientPracticeTesting": null,
"Doctor": "John Smith",
"BeginDate": 36395.0,
"medBeginDate": null
}
The javascript file (app.js) contains the following code.
I have a separate files for the views as shown in the angular code below.
For ease of understanding the question, I have put everything in one snippet below.
var flexTable = angular.module("flexTable", ["ngRoute", "ngTable", "ngResource"]);
flexTable.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/about', {
templateUrl: '../../about.html',
controller: 'tableController'
})
.when('/contact', {
templateUrl: '../../contact.html',
controller: 'tableController'
})
.when('/', {
templateUrl: '../../table.html',
controller: 'tableController'
})
.when('/table', {
templateUrl: '../../table.html',
controller: 'tableController'
})
.otherwise({
redirectTo: '/table'
});
}]);
flexTable.controller('tableController',['$scope', '$resource' ,'ngTableParams', function ($scope, $resource,ngTableParams) {
var data = '';
var api = $resource("/Home/GetData")
$scope.tableParams = new ngTableParams({}, {
getData: function (params) {
var varApiGet = api.get(params.url()).$promise.then(function (data) {
params.total(data.inlineCount);
return data.results;
});
return varApiGet;
}
});
}]);
The html page looks as follows
<%# Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta name="viewport" content="width=device-width" />
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="../../Assets/css/justified-nav.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="../../Assets/css/ng-table.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-sanitize.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-resource.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-route.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-animate.js"></script>
<script src="../../Assets/js/lib/ng-table.min.js"></script>
<script src="../../Assets/js/app.js"></script>
</head>
<body>
<div class="container" >
<!-- The justified navigation menu is meant for single line per list item.
Multiple lines will require custom code not provided by Bootstrap. -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="jumbotron">
<h1>Instructions stuff!</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
ut fermentum massa justo sit amet.</p>
<!--<p><a class="btn btn-lg btn-success" href="#" role="button">Get started today</a></p>-->
</div>
<div class="container" ng-controller="tableController">
<div ng-view>
<div class="row">
<table ng-table="tableParams" class="table">
<tr ng-repeat="row in $data track by $index">
<td title="'EncType'">
{{row.EncType}}
</td>
<td title="'ClientAlias'">
{{row.ClientAlias}}
</td>
<td title="'OrgName'">
{{row.OrgName}}
</td>
<td title="'CharacterAlias'">
{{row.CharacterAlias}}
</td>
<td title="'AddressCity'">
{{row.AddressCity}}
</td>
<td title="'St'">
{{row.St}}
</td>
<td title="'ZIP'">
{{row.ZIP}}
</td>
<td title="'ContactName'">
{{row.ContactName}}
</td>
<td title="'Fax'">
{{row.Fax}}
</td>
<td title="'PHONE'">
{{row.PHONE}}
</td>
<td title="'CriticalValueNotification'">
{{row.CriticalValueNotification}}
</td>
<td title="'Doctor'">
{{row.Doctor}}
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<footer class="footer">
<p>© 2015 Company, Inc.</p>
</footer>
</div><!--container-->
</body>
</html>
When I have the data hardcoded in the javascript controller function, the table displays fine without the search and sort functionality. When I have the data come in through the ajax call as shown in the code, it displays no data. only the table heading.
I can answer any questions that anyone has about this.
Thanks,
Paras
Any help appreciated.
EDIT
Here is the controller code that worked for me. I also added some extra code for the sorting and the filters.
flexTable.controller('tableController', ['$scope', '$http', 'ngTableParams', '$filter', '$log'
, function ($scope, $http, ngTableParams, $filter, $log) { //
$http.get('/Home/GetData')
.success(function (data, status) {
$scope.data = data;
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
OrganizationName: 'asc' // initial sorting
}
}
, {
total: $scope.data.length, // length of data
getData: function ($defer, params) {
// use build-in angular filter
var filterData = params.filter() ?
$filter('filter')($scope.data, params.filter()) :
$scope.data;
var orderedData = params.sorting() ?
$filter('orderBy')(filterData, params.orderBy()) :
filterData;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
}
);
});
}]);
You could use $http instead of $resource. Your response data will be in the data property of your response. Try the following:
$scope.tableParams = new ngTableParams({}, {
getData: function(params) {
var varApiGet = $http.get(params.url()).then(function(response) {
var data = response.data;
params.total(data.inlineCount);
return data.results;
});
return varApiGet;
}
});
Edit
Here is a working fiddle. I simulated the response as an array with one entry (the one you posted in the question). Make sure that your response data is in the correct format.