We Keep Coding

filtering $http json data with angular

I have read through numerous questions here already, but something just isnt clicking with me and understanding this issue i have.
the js code:
app.controller('example_ctrl',['$scope','$http', function($scope,
$http){
$http.get('api_call_here').then(function successCallBack(response){
$scope.response = response;
});
Json format of api:
{
"categoryOne": {
"1": {
"title": "someData1",
"description": "This is number One"
},
"2": {
"title": "moreData1",
"description": "I am not a number, I'm a free man!"
}
}
}
Now because this hasnt been returned in an array, I get an error whenever I try to filter it. As an example:
<div ng-repeat="(category, object) in response.data">
<div ng-repeat="item in object">
<p>{{item.title}}</p>
</div>
</div>
Now if i try to put an ng-model on a search input, and tie that to the ng-repeat with a |filter:ng-model name, I get an error.
What I basically WANT to do, is when you type text into the search field, have it return only the title/descriptions that contain that text.

You can transform the list of object in each category to array:
app.controller('example_ctrl',['$scope','$http', function($scope, $http){
$http.get('api_call_here').then(function(response) {
Object.keys(response.data).forEach(function(category) {
response.data[category] = Object.values(response.data[category]); // Transfom list of objects in each category to array
});
console.log("transformed: ", response);
$scope.response = response;
});

Ionic get integer ID from JSON data

This should be a very simple thing to do. I am building an IONIC app with a JSON data file. The data is something like this.
[
{ "id": 1,
"name": "John",
"type": "male",
"bio": "this is John"
},
{ "id": 10,
"name": "Mary",
"type": "female",
"bio": "this is Mary"
}
]
Now I want to filter by by "type" in the data and then loop the data by "id".
<ion-list ng-repeat="person in people | filter: {'type': 'male'}">
<ion-item href="#tab/people/males/{{ person.id }}">{{ person.name }}
</ion-item>
</ion-list>
The Controller for this is:
.controller('PeopleController', ['$scope', '$state', '$http', function($scope, $state, $http){
$http.get('data/people.json').success(function(data){
$scope.people = data;
$scope.whichPerson = $state.params.id;
}),
}])
This displays the required data of males only by name.
However if I want to see the individual bio using the following code
<div class="card" ng-repeat="person in people | filter: { id: whichPerson }">
<h2>{{ person.name }}</h2>
<p>{{ person.bio}}</p>
</div>
When I click the individual item for each person to display person.bio I get both John and Mary.'
I figured this was because the "id" is 1 and 10 which seems to be parsing as a string to the controller. I tried putting this
"id": "1" and "id": "10"
Did not work. I did this in the controller
$scope.whichPerson = parseInt($state.params.id, 10);
This does not work either. I am totally stumped. How do I get the individual id's from the data? In fact I noticed that I can change the id to 11 or 12 or 13 etc and it still returns both records?
Any help appreciated.

Try to add the comparator :true to your filter as described in the documentation. This forces a strict comparison of the filter value instead of just checking if the data contains it.

Given the above doesn't work, you could try a custom filter by doing:
filter: { id: whichPerson }:sameID
and then in your controller:
$scope.sameID = function(actual, expected) {
return parseInt(actual) === parseInt(expected)
};
Even if this doesn't work, you could then at least debug within the custom filter to see where the comparison is failing

$resource : expected response to contain an object but got an array

I know this question already exists on SO (as here : Error in resource configuration. Expected response to contain an object but got an array ) and even if I've already faced this error a few days ago, I didn't find why I'm getting it now.
On the one hand, I have a RESTful API in Node Express. It gives me access to a database, where I'm trying to get some data. When using a specific $resourcerequest, I'm getting this JSON (tested with Postman) :
[
{
"ref": 2,
"type": "string here",
"matriculeMD": 4567,
"name": "William",
"date": "2016-09-14T22:00:00.000Z",
"client": 1
},
{
"ref": 4,
"type": "string here",
"matriculeMD": 1589,
"name": "Averell",
"date": "0000-00-00",
"client": 1
}
]
On the other hand, I have an Angular JS app. This one use a factory to get the data from the API :
.factory('Things', ['$resource', function($resource) {
return $resource(
'api_url/:client_id',
{client_id: '#client_id'}, // getting some data from an ID
{'query' : {
method : 'GET', // ofc, it's a get request in the API
isArray : false // to be sure to get an object and not an array
}
}
I also have a controller which uses this factory, trying to execute the query with the param :
app.controller('ctrl', ['$scope','Things', function ($scope,$things)
{
$scope.thing = $things.query({},{'client_id':'1'});
// replacing '#client_id' from factory with 1. I also tried with quoteless 1.
}
]);
And, finally, I have an html view, where I try to use the data I'm supposed to get in $scope.thing with some <div ng-repeat'thing in things'>{{thing.ref}}</div>.
By reading other posts, I was sure that adding an isArray : false to the factory would fix the problem, as it has already fixed it in another factory.
Any idea ?
Edit : Thanks for your replies. I changed my factory code with :
.factory('Things', ['$resource', function($resource) {
return $resource(
'api_url/:client_id',
{client_id: '#client_id'}, // getting some data from an ID
{'query' : {
method : 'GET', // ofc, it's a get request in the API
isArray : true //
}
}
And it fixed the error. Now, I'm working on another problem with my $scope content which is undefined and send $promise : Promise, $resolved : Resolved. I read $resource doc to understand what it means, but I still have no idea of how to make it work.

As doldt said before, you are actually expecting an array.
Your response is an array of objects.
Either you change isArray to true or you change the response on the server to return an object.
Once you have this changed, you can use your resource on the controller this way (providing a callback for the $resource, since you are now dealing with promises) :
$things.query( {}, { 'client_id' : '1' }, function( response ){
$scope.thing = response;
});

I think you are doing wrong with isArray flag. It must be true if you are sending array.
Try it....

// Code goes here
var myApp = angular.module('myApp', ['ngResource']);
myApp.factory('Things', ['$resource',
function($resource) {
return $resource(
'data/sample.json'
//, {
// client_id: '#client_id'
//}, // getting some data from an ID
//{
// 'query': {
// method: 'GET', // ofc, it's a get request in the API
// isArray: true // to be sure to get an object and not an array
// }
//})
)
}
]);
myApp.controller('myCtrl', function($scope, Things) {
Things.query({}, {
'client_id': '1'
}).$promise.then(function(data) {
$scope.thing = data;
console.log($scope.thing);
})
});
[
{
"ref": 2,
"type": "string here",
"matriculeMD": 4567,
"name": "William",
"date": "2016-09-14T22:00:00.000Z",
"client": 1
},
{
"ref": 4,
"type": "string here",
"matriculeMD": 1589,
"name": "Averell",
"date": "0000-00-00",
"client": 1
}
]
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#*" data-semver="2.0.0-alpha.26" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-resource.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<h1>{{1/2}}</h1>
<ul ng-repeat="t in thing">
<li>{{t.name}}</li>
</ul>
</body>
</html>
--output
0.5
William
Averell

Try:
$things.query({},{'client_id':'1'}).$promise.then(function(result){
$scope.thing = result;
console.log($scope.thing);
});

AngularJS: How to create a model which holds an array for a dynamic list of input fields?

I have quite an interesting question (I hope) for all you AngularJS gurus out there. I am looking to create a dynamic list of form input fields based on a SELECT dropdown. As an example, we have a number of categories with each category having a set of specifications which are unique to that category. To help with the explanation we have the following:
Firstly, in the controller we start by initializing the models.
$scope.category = {};
$scope.category.specs = [];
Next we ready the data to be used in the form (actually retrieved from the server via $http). We also initialize a variable to the first element in the categories array.
$scope.categories = [
{ "id": "1", "name": "mobile", specs: [
{ "id": "1", "label": "Operating System" },
{ "id": "2", "label": "Camera type" } ] },
{ "id": "2", "name": "laptop", specs: [
{ "id": "1", "label": "Operating System" },
{ "id": "2", "label": "Graphics Card" } ] }
};
$scope.selectedCategory = $scope.categories[0];
In the form, we have a dropdown which when selected loads the appropriate input fields specific to that category. We use the ngRepeat directive to accomplish this. This is a dynamic list of fields based on $scope.categories.specs. (please note the ???)
<select ng-model="selectedCategory" ng-options="category.name for category in categories"></select>
<div ng-repeat="spec in selectedCategory.specs">
<label>{{spec.label}}</label>
<input type="text" ng-model="???">
</div>
Ultimately, when the user clicks the submit button, we would like to extract the category he/she has selected and then package it together with the specifications they have filled in. The post request should contain something like the following for instance (of course, I only included one spec item, but in reality there would be many):
{ "id": "1", specs [ { "id": "2", "details": "RADEON HD 8970M" } ] }
Unfortunately I am not really sure how to accomplish this. I need to somehow create an array for the spec model, and then ensure that both the ID and user entered data are appropriately extracted... what goes in the ??? and what do we do after? Any help would be much appreciated.

this is how I do it. I make a form, validate it with angular, and then when its valid I submit it with a function.
<form name="signup_form" novalidate ng-submit="signupForm()"></form>
$scope.signupForm = function() {
var data = $scope.signup;
$http({
method : 'POST',
url : 'http://yoursite.com/mail.php',
data : $.param(data), // pass in data as strings
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
})
.success(function(data) {
});
}
also if you want to look at another form validation system for angular check out http://nimbly.github.io/angular-formly/#!/ It may help you solve your current form system.

In the controller, initialize $scope.specDetails as follows:
$scope.specDetails = {};
angular.forEach($scope.categories, function (category, index1) {
$scope.specDetails[category.id] = {};
angular.forEach(category.specs, function (spec, index2) {
$scope.specDetails[category.id][spec.id] = '';
});
});
In the html, replace "???" with specDetails[selectedCategory.id][spec.id]

Angularjs ng-repeat not updating after array update

I'm not sure what I'm missing here but I'm trying to update a value inside an array, and then have this reflected in the repeater. Do I need to make a copy or something before applying the update in order for Angular to show the changes?
---sample json
"lists": [
{
"name": "one",
"enabled": true
},
{
"name": "two",
"enabled": false
}
]
!-- code
setTimeout(function(){
$scope.$apply(function(){
$scope.lists[1].enabled = true;
});
},1);
!--- html
<span data-ng-repeat="list in lists | filter: {enabled: true}"></span>

From the "other controller" you are talking about broadcast an event:
$rootScope.$broadcast('listChange', listArray);
Then in the controller that controls your $scope.lists value, listen for the event:
$scope.$on('listChange', function(event, list) {
$scope.$apply(function() {
// Update goes here
});
});

It might help if you use angulars built-in timeout function $timeout.
$timeout(function(){
$scope.lists[1].enabled = true;
},1);
Documentation here: https://docs.angularjs.org/api/ng/service/$timeout

Add your lists variable to the $scope inside your controller like this:
$scope.lists = [{
"name": "one",
"enabled": true
},
{
"name": "two",
"enabled": false
}];
You also have to add something inside the <span>, because the Html you posted would not display anything. (You need to do something inside the <span> tag in order to show something)
<span ng-repeat="list in lists | filter:{enabled: true}">{{list.name}}</span>
Now when you update the lists variable, this will be reflected in the Html immediately.
Works fine for me. Hope i could help!