We Keep Coding

AngularJS $http.get not pulling back

Why is this not pulling back anything? I keep getting the error message and I cannot figure out why. I tried to use JSONParse on the response data and reassigning it to the $scope but that didn't help. I have no errors in my F12 Console. I know JQuery is a much better solution but I prefer the Javascript, i'll take both though. Thanks ahead of time.
var controlSeletor = angular.module('moduleName', []);
controlSeletor .controller('variableController', function($scope, $http) {
$http.get("data.json")
.then(
function(response) {
// Success
$scope.variable = response.data;
},
function(response){
// Error
alert("Error!");
}
);
});
The json is a separate file and looks like this:
[{
"url": "place.html",
"name": "Bob",
"pic": "bob.jpg"
},
{
"url": "place.html",
"name": "Mike",
"pic": "mike.jpg"
},
{
"url": "place.html",
"name": "Tony",
"pic": "tony.jpg"
}];

Your JSON is not valid, change it as follows,
[ {
"url": "place.html",
"name": "Bob",
"pic": "bob.jpg" }, {
"url": "place.html",
"name": "Mike",
"pic": "mike.jpg" }, {
"url": "place.html",
"name": "Tony",
"pic": "tony.jpg" } ]
var app = angular.module('filterApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get('data.json').
then(function(response) {
$scope.variable = response.data;
});
});
DEMO

Few observations :
Controller declaration is not correct. It should be controlSeletor.controller instead of controlSeletor .controller.
Your JSON is not a valid JSON.
Valid JSON should be like this :

Refreshing Angular App takes to the default state

I am creating angularjs based Dashboeard, I am using ui.router to create states from json file,
My topNavbar and states are being created by pages.json file.
My app works fine but when refresh the page with this"localhost:#/map" url it redirects to "localhost:#/dashboard" state.
how I can set the state which user enters in URL?
var $urlRouterProviderRef = null;
var $stateProviderRef = null;
myApp.run(function ($q, $rootScope, $state, $http, navbars)
{
navbars.load()
$http.get("js/config/pages.json")
.success(function (data) {
angular.forEach(data, function (value, key) {
var state = {
"url": value.url,
"templateUrl": value.templateUrl,
"controller": value.controller
};
$stateProviderRef.state(value.sref, state);
});
});
}
myApp.config(function ($stateProvider, $locationProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/dashboard');
$urlRouterProviderRef = $urlRouterProvider;
$stateProviderRef = $stateProvider;
})
pages.json
[
{
"displayname": "Dashboard",
"active": true,
"name": "dashboard",
"sref": "dashboard",
"url": "/dashboard",
"controller": "layoutOneCtrl",
"templateUrl": "views/dashboard.html",
"icon": "fa-dashboard",
"children": [{
"name": "dashboard"
}]
}, {
"displayname": "Map",
"open": false,
"active": false,
"name": "map",
"sref": "map",
"url": "/map",
"templateUrl": "views/layout1.html",
"controller": "layoutOneCtrl",
"icon": "fa-map-marker",
"children": [{
"name": "map"
}]
}
.
.
.
]

when you refresh page , your run function called and read value from pages.json , you need to update pages.json file or you need to save the url value in localstorage or sessionstorage so whenever you refresh the page you can access url value from localstorage or sessionstorage.

ionic ui-router resolve's result didn't show in the page

Here is the code
APP.js
.state('app.aboutus', {
url: '/aboutus',
views: {
'mainContent': {
templateUrl: 'templates/aboutus.html',
controller: 'AboutController',
resolve: {
leaders: ['corporateFactory', function(corporateFactory){
return corporateFactory.query();
}]
}
}
}
})
Controller.js
.controller('AboutController', ['$scope', 'leaders', 'baseURL', function($scope, leaders, baseURL) {
$scope.baseURL = baseURL;
$scope.showLeaders = false;
$scope.message="Loading ...";
$scope.leaders = leaders;
console.log($scope.leaders);
}])
Aboutus.html
<ion-view view-title="About Us">
<ion-content>
<div class="card">
<div class="list list-inset">
<div ng-repeat="leaders in leadership" class="item item-avatar item-text-wrap">
<h2>{{leaders.name}}</h2>
<h4>{{leaders.designation}}</h4>
</div>
</div>
</div>
</ion-content>
</ion-view>
db.json
"leadership": [
{
"id": 0,
"name": "Human 1",
"designation": "Chief Executive Officer"
},
{
"id": 1,
"name": "Human 2",
"designation": "Chief Food Officer"
},
{
"id": 2,
"name": "Human 3",
"designation": "Chief Taste Officer"
},
{
"id": 3,
"name": "Human 4",
"designation": "Executive Chef"
}
]
When I checked using inspect element - console tab in Google Chrome, the $resolved: has successfully changed from false into true, and every array contain the information per ID.
But, the data didn't show in the aboutus.html
Did I typed something wrong? or maybe I'm using a wrong method?
Thank you in advance!

Your problem is likely that your ng-repeat syntax is incorrect. Where you have leadership, that should be the object/array you're referencing in your scope. So try changing it to this:
<div ng-repeat="leader in leaders" class="item item-avatar item-text-wrap">
<h2>{{leader.name}}</h2>
<h4>{{leader.designation}}</h4>
</div>

Angular translate and ui router

I'm trying to translate a multistep form with angular translate and for routing, i'm using ui-router .
everything works fine except one thing .
here is my code :
translate
.config(function ($translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: 'App/i18n/locale-',
suffix: '.json'
});
$translateProvider.preferredLanguage('ir');
})
en.json and ir.json
{
"wizardForm":{
"stepOne":{
"LABEL": "ثبت متقاضی",
"NATIONALCODE": "کد ملی",
"NAME": "نام",
"FATHERNAME": "نام پدر",
"GENDER": "جنسیت",
}
}
en.json////////
{
"wizardForm":{
"stepOne":{
"LABEL": "Register Requester",
"NATIONALCODE": "National Code",
"NAME": "NAme",
"FATHERNAME": "Father Name",
"GENDER": "Gender",
}
}
html
<label translate="wizardForm.stepOne.NATIONALCODE">
</label>
translate works fine in other sections but not in form ? am i missing something ?

Your json is not valid. It should be
{
"wizardForm": {
"stepOne": {
"LABEL": "Register Requester",
"NATIONALCODE": "National Code",
"NAME": "NAme",
"FATHERNAME": "Father Name",
"GENDER": "Gender"
}
}
}
and not
{
"wizardForm":{
"stepOne":{
"LABEL": "Register Requester",
"NATIONALCODE": "National Code",
"NAME": "NAme",
"FATHERNAME": "Father Name",
"GENDER": "Gender",
}
}
You are missing one '}' and have one ',' too much.
Try your json here: jsonlint
Does that help?

ng-repeat on a multi-dimensional array/object

I am getting json object from an external url.
$http.get('http://dev-newsbackend.gotpantheon.com/articles')
.success(function(data, status){
$scope.articles = data.articles;
console.log(data.articles);
}).error(function(err){
console.log(err);
})
})
The json I get is as below:
{
"articles": [
{
"single": {
"title": "7 Tech Upgrades to the Old-School Science Class"
}
},
{
"single": {
"title": "What Will the ALS Association Do With That $100 Million?"
}
},
{
"single": {
"title": "President Obama Rocked a Tan Suit, So Twitter Went Nuts"
}
}
],
"view": {
"name": "articles",
"display": "page",
"path": "articles",
"root": "articles",
"child": "single",
"pages": 1,
"page": 0,
"count": 3,
"limit": 10
}
}
However, when I am doing a ng-repeat though the element is printed multiple times. Am not getting the value.
<ion-list ng-repeat="article in articles">
<ion-item>Test : {{ single.title }}</ion-item>
</ion-list>
My developer console screen-shot:
This is what I got for console.log(data.articles);
The screen-shot of my browser where am getting the list without the title value:

Try this:
<ion-list ng-repeat="article in articles">
<ion-item>Test : {{article.single.title }}</ion-item>
</ion-list>