We Keep Coding

Looping through the json service response in Angular JS

I am working on a angular project. i have a scenario where i need to list some details in a page of the application.I have a service call in the page which returns the following json structure. i want to loop through this json structure to list few of the data in the response.
[
{
"ProductDetails": [
{
"ProductType": "Application1",
"Name": "Product1",
"New": false,
"Category": "product",
"Country": "India",
"description": "Description for Product1",
"Favourite": false,
"settings": {
"WebsiteFlag": true,
"SmsFlag": false,
"EmailFlag": true
}
}
]
},
{
"ProductDetails": [
{
"ProductType": "Application2",
"Name": "Product2",
"New": true,
"Category": "product",
"Country": "India",
"description": "Description for Product2",
"Favourite": true,
"settings": {
"WebsiteFlag": false,
"SmsFlag": false,
"EmailFlag": true
}
}
]
}
]
JS
$ctrl.getSettings = function () {
var url = "http://localhost:3000/json/settings-updated.json";
rsicontext.getData(url).then(function (response) {
$ctrl.Settings = response.data;
});
}
HTML
<tbody>
<tr data-ng-repeat="app in $ctrl.Settings" class="content-box">
<td data-ng-bind="app.ProductDetails.ProductType"></td>
<td data-ng-bind="app.ProductDetails.Name"></td>
<td><ng-checkbox data-checked="app.SmsFlag" rounded="true"></ng-checkbox></td>
<td><ng-checkbox data-checked="app.EmailFlag" rounded="true"></ng-checkbox></td>
</tr>
</tbody>
I am trying to list the Product Type, Name, EmailFlag and SmsFlag. How can i loop through the json structure to list the data.

Simply go over the response and build a new array from the fields you need. Like so:
var d = [];
for( vari=0;i< response.data.ProductDetails.length; ++i) {
var curr= {
ProductType: response.data.ProductDetails[i].ProductType,
Name: response.data.ProductDetails[i].Name
}
d.push(curr);
}
$ctrl.Settings = d;

To manipulate object or array I always use a library called underscore.js
This can help you to do what you want.
var plucked=_.pluck($ctrl.Settings, 'ProductDetails');
This function will return an array of object. Then you can loop it.
https://jsfiddle.net/wz2njukj/

You can achieve this throw ng-repeat
<div ng-repeat="d in data[0].ProductDetails[0]">
{{ d.SmsFlag }} {{ d.WebsiteFlag}} {{d.EmailFlag}}
</div>
Look this and get data as you want.
PlunkerHere

ProductDetails contains an array, so you would have to nest ngRepeats
<span data-ng-repeat="detail in app.ProductDetails">
If you know that ProductDetails will only have one element it would be best to change the structure that is being generated if you can. If not you can access it in markup
<tbody>
<tr data-ng-repeat="app in $ctrl.Settings" class="content-box">
<td data-ng-bind="app.ProductDetails[0].ProductType"></td>
<td data-ng-bind="app.ProductDetails[0].Name"></td>
<td><ng-checkbox data-checked="app.ProductDetails[0].settings.SmsFlag" rounded="true"></ng-checkbox></td>
<td><ng-checkbox data-checked="app.ProductDetails[0].settings.EmailFlag" rounded="true"></ng-checkbox></td>
</tr>
</tbody>
Or you can massage the data in your controller before passing it off to the view.
$ctrl.Settings = response.data.map(products=>products.ProductDetails[0])

Parsing Non Standard JSON in Angular Js

I am getting a JSON response from a Restful service in the following format,
{
"comments":{
"columns":[
"clientId",
"treatmentDate",
"comments",
"photo",
"practitioner"
],
"records":[
[
"1",
"2016-09-12",
"Some Coments",
"0",
"Doc 4"
],
[
"1",
"2016-09-11",
"DDD oNE",
"1",
"Docc 3"
]
]
}
}
Record is starting with table name and separate arrays of columns and records follows. Angular is not accepting data is this format. However if I provide data with standard format as follows, it works perfectly.
[
{
"clientId":"1",
"treatmentDate":"2016-09-12",
"comments":"Some Coments",
"photo":"0",
"practitioner":"Doc 4"
},
{
"clientId":"1",
"treatmentDate":"2016-09-11",
"comments":"DDD oNE",
"photo":"1",
"practitioner":"Docc 3"
}
]
Is there a directive that can do this for me or shall I create a custom function, any ideas?

Is there a reason you cannot just manually reshape the data to conform the form you expect?
var data = json.comments.records.map(function(record) {
return json.comments.columns.reduce(function(reshaped, columnName, idx) {
reshaped[columnName] = record[idx];
return reshaped;
}, {});
});
Be careful with this though; this expects the length of each of the arrays in records to always be the same as the number of column names.

Delete item using ANgularJS

I have a JSON file which contains data. I can print the data using ANgularJS. It will show in row with a checkbox and there is a Delete button. I want to delete the data from display and as well as from JSON file. Delete process would be like, Click on the checkbox which you want to Delete > Click on the Delete button. This is my plnkr link :-
http://plnkr.co/edit/A07XJk1RQNmhSnLFqLxH?p=preview
api.json is the JSON file.
This is the JSON file look like :-
{
"1": {
"venture": "XYZ Informatics",
"member": [
{
"name": "abcd",
"email": "abcd#gmail.com"
}
],
"message": "This is good day",
"isclicked": false
},
"2": {
"venture": "BBC Informatics",
"member": [
{
"name": "xyz",
"email": "xyz#gmail.com"
}
],
"message": "This is bad day",
"isclicked": true
}
}

Add ng-model to checkbox....then iterate data and use delete if it is checked
$scope.delete = function() {
angular.forEach($scope.datas, function(val, key) {
if (val.isclicked) {
delete $scope.datas[key];
}
})
}
View
<form ng-repeat="data in datas">
<input type="checkbox" ng-model="data.isclicked">{{ data.venture }}
</form>
<button ng-click="delete()">Delete</button>
DEMO

Assuming you have your data is on the scope, you'd use the JavaScript delete function to remove an item from the array.
So...
delete $scope.data["1"]
Angular's digest should update anything watching that scope property automatically.

Looping over two arrays for each row in a table

I have the following set of json
[
{
"drink_name": "Ananascocktail",
"ingredients": [
"Ananas",
"Färskpressad limesaft",
"Apelsinjuice",
"Farinsocker",
"Rom"
],
"alternatives": [
"",
"Limesaft",
"",
"Socker",
null
]
},
{
"drink_name": "Blå Pilthammer",
"ingredients": [
"Blåbärsvodka",
"Apelsinjuice",
"Bonaqua Citron"
],
"alternatives": [
"Vodka",
"",
""
]
}
]
How do I loop over the ingredients and alternatives to place each element in separate <td>'s on the same <tr>?
I've tried putting a ng-repeat on the row, but that makes a new row for each element.
I must, however, use a ng-repeat on the <tr> since I have multiple ingredients/alternatives.
I've googled around for over an hour but can't find anything that quite fit my needs.
Any suggestions?

I solved it by doing the following
<tbody>
<tr ng-repeat="ingredient in json.ingredients">
<td>{{ingredient}}</td>
<td ng-repeat="alternative in json.alternatives track by $index" ng-if="$parent.$index === $index">{{alternative}}</td>
</tr>
</tbody>
I only allow alternatives to place a <td> if its $index is the same as its $parent's $index. Why that solved it is beyond me

Datatable returns No data available in table when the JSON I give it looks valid

I am trying to initialize data tables and feed it an array of objects. I am getting an error saying that there is No data available in table. But I can print it out to the console and see that that is incorrect.
//JS
get_notes().done(funciton(){
console.log(my_json)//what its format is below
//my_json = [
{
"username": "thomas",
"fullname": "Thomas familyname"
},
/*...*/]
_.isArray(my_json) //true
$("#note_table").DataTable({
data: my_json,
columns: [
{title: "fullname"},
{title: "username"}
]
});
});
<!--HTML-->
<table id="note_table">
<thead>
<tr>
<th>fullname</th>
<th>username</th>
</thead>
<tobdy>
</tbody>
</table>
How can I prevent this error?

Your biggest problem is this:
columns: [
{title: "fullname"},
{title: "username"}
]
it should be
columns: [
{data: "fullname"},
{data: "username"}
]
You also have to make sure your table is properly defined (typo <tobdy>)
Here's a link to a working fiddle for your example:
http://jsfiddle.net/bmartinelle/bjppck3d/1/