Develop Reference

Amcharts with verbose JSON

[{"SUM_PTS":{"datatype":"INTEGER","length":"8","value":"29903727","obfuscated":"false"},"SUM_TOTAL":{"datatype":"INTEGER","length":"10","value":"1644704985","obfuscated":"false"},"MID":{"datatype":"ALPHANUMERIC","length":"27","value":"Vendor 1","obfuscated":"false"}},{"SUM_PTS":{"datatype":"INTEGER","length":"7","value":"3283570","obfuscated":"false"},"SUM_TOTAL":{"datatype":"INTEGER","length":"9","value":"180596350","obfuscated":"false"},"MID":{"datatype":"ALPHANUMERIC","length":"23","value":"Vendor 2","obfuscated":"false"}}]
Considering the above verbose JSON, how do I assign the valueField and titleField?
SUM_PTS and MID do not seem to work. I think it is because my JSON is more verbose than that used in the examples. I cannot change the JSON however, I need to resolve in the Amcharts Javascript.

Since SUM_PTS contains your value, and MID contains your title, mapping it to a simplified dataProvider format is pretty straightforward:
//assuming rawJson contains the above data:
var dataProvider = rawJson.map(function(jsonObj) {
return {
"title": jsonObj.MID.value,
"value": jsonObj.SUM_PTS.value
}
});
Here is your remapped data expressed as a pie chart for demonstration purposes:
var rawJson = [{
"SUM_PTS": {
"datatype": "INTEGER",
"length": "8",
"value": "29903727",
"obfuscated": "false"
},
"SUM_TOTAL": {
"datatype": "INTEGER",
"length": "10",
"value": "1644704985",
"obfuscated": "false"
},
"MID": {
"datatype": "ALPHANUMERIC",
"length": "27",
"value": "Vendor 1",
"obfuscated": "false"
}
}, {
"SUM_PTS": {
"datatype": "INTEGER",
"length": "7",
"value": "3283570",
"obfuscated": "false"
},
"SUM_TOTAL": {
"datatype": "INTEGER",
"length": "9",
"value": "180596350",
"obfuscated": "false"
},
"MID": {
"datatype": "ALPHANUMERIC",
"length": "23",
"value": "Vendor 2",
"obfuscated": "false"
}
}]
var dataProvider = rawJson.map(function(jsonObj) {
return {
"title": jsonObj.MID.value,
"value": jsonObj.SUM_PTS.value
}
});
AmCharts.makeChart("chartdiv", {
"type": "pie",
"titleField": "title",
"valueField": "value",
"dataProvider": dataProvider
})
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/pie.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px"></div>

FooTable plugin datetime issue

I have created a dynamic table using FooTable jQuery Plugin. http://jsbin.com/wasawa/edit
Here I used MySQL timestamp using PHP date('Y-m-d H:i:s') format. e.g- 2016-01-19 01:22:13, but using the FooTable I'm not getting the actual date format.
Any help would be appreciated.

Updated the columns object like below:
{
"name": "createdat",
"title": "Created On",
"formatter": function(value){
return moment(value).format('MMM Do YY');
}
}
I have to update the formatter function.
And now it is working fine as expected.
Thanks for your support.

In case this helps someone else with the same problem. I was able to get the example from the site, using the following. You must include moment.js for this to work. https://momentjs.com/
This code won't run in SO's code runner because footable requires localstorage.
It displays the unix time from an external source as whatever you want. I have it using MMM Do YY in this example.
jQuery(function($) {
$('#showcase-example-22').footable({
"useParentWidth": true,
columns: [
{
"name": "id",
"title": "ID",
"breakpoints": "xs sm",
"type": "number",
"style": {
"width": 80,
"maxWidth": 80
}
},
{
"name": "firstName",
"title": "First Name"
},
{
"name": "lastName",
"title": "Last Name"
},
{
"name": "something",
"title": "Never seen but always around",
"visible": false,
"filterable": false
},
{
"name": "jobTitle",
"title": "Job Title",
"breakpoints": "xs sm",
"style": {
"maxWidth": 200,
"overflow": "hidden",
"textOverflow": "ellipsis",
"wordBreak": "keep-all",
"whiteSpace": "nowrap"
}
},
{
"name": "started",
"title": "Started On",
"type": "numeric",
"breakpoints": "xs sm md"
},
{
"name": "dob",
"title": "Date of Birth",
"formatter": function(value) {
var datetime = JSON.parse(value)
return moment(datetime).format("MMM Do YY")
}
},
{
"name": "status",
"title": "Status"
}
],
rows: [{
"id": 1,
"firstName": "Annemarie",
"lastName": "Bruening",
"something": 1381105566987,
"jobTitle": "Cloak Room Attendant",
"started": 1367700388909,
"dob": 122365714987,
"status": "Suspended"
},
{
"id": 2,
"firstName": "Nelly",
"lastName": "Lusher",
"something": 1267237540208,
"jobTitle": "Broadcast Maintenance Engineer",
"started": 1382739570973,
"dob": 183768652128,
"status": "Disabled"
},
{
"id": 3,
"firstName": "Lorraine",
"lastName": "Kyger",
"something": 1263216405811,
"jobTitle": "Geophysicist",
"started": 1265199486212,
"dob": 414197000409,
"status": "Active"
},
{
"id": 4,
"firstName": "Maire",
"lastName": "Vanatta",
"something": 1317652005631,
"jobTitle": "Gaming Cage Cashier",
"started": 1359190254082,
"dob": 381574699574,
"status": "Disabled"
},
{
"id": 5,
"firstName": "Whiney",
"lastName": "Keasler",
"something": 1297738568550,
"jobTitle": "High School Librarian",
"started": 1377538533615,
"dob": -11216050657,
"status": "Active"
},
{
"id": 6,
"firstName": "Nikia",
"lastName": "Badgett",
"something": 1283192889859,
"jobTitle": "Clown",
"started": 1348067291754,
"dob": -236655382175,
"status": "Active"
}
]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.bootstrap.css" rel="stylesheet" />
<table id="showcase-example-1" class="table" data-paging="true" data-filtering="true" data-sorting="true" data-editing="true" data-state="true"></table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.js"></script>
enter code here

populate multiple dropdown select boxes from JSON data in angular

Firstly, after numerous searches this question does not answer my issue.
I am using AngularJS Dropdown Multiselect and wish to populate a number of dropdowns that are extracted from my JSON data. An example of this data is below:
{
"results": [
{
"title": "Difficulty",
"icon": "difficulty-icon",
"filters": [{
"name": "Easy",
"checked": false
}, {
"name": "Medium",
"checked": false
}, {
"name": "Hard",
"checked": false
}, {
"name": "Expert",
"checked": false
}]
},
{
"title": "Direction of Movement",
"icon": "direction-icon",
"filters": [{
"name": "Flexion",
"checked": false
}, {
"name": "Ulnar Deviation",
"checked": false
}, {
"name": "Radial Deviation",
"checked": false
}]
},
{
"title": "Exercise Aim",
"icon": "aim-icon",
"filters": [{
"name": "Power",
"checked": false
}, {
"name": "Strength",
"checked": false
}]
}, {
"title": "Muscle Group ",
"icon": "muscle-icon",
"filters": [{
"name": "Foot & Shin",
"checked": false
}]
},
{
"title": "Joint",
"icon": "joint-icon",
"filters": [{
"name": "Foot and Ankle",
"checked": false
}, {
"name": "Knee",
"checked": false
}]
}
]
}
When any of these items are selected I need to push the value to an array (the array is not specific to the dropdown it has come from therefore can share the same model).
I would like to run an ng-repeat that will create 5 dropdowns that are populated from the data above with the custom button text displaying the Title from my JSON data.
Is this possible? If not how can I run a function in my controller in order to seporate this data in order to expose each section of JSON data to the $scope
UPDATE
So far I have managed to get this: however unsure how I can get the Title property
<div ng-repeat="select in Filters">
<div ng-dropdown-multiselect="" options="Filters[$index].filters" selected-model="example1model" extra-settings="filterSettings"></div>
</div>

Here is a snippet with an example of MultiSelect dropdown in a ngRepeat loop:
var app = angular.module('myApp', ['angularjs-dropdown-multiselect']);
app.controller("appController", function($scope) {
$scope.filterSettings = {
displayProp: 'name',
idProp: 'name'
};
$scope.all_data = {
"results": [
{
"title": "Difficulty",
"icon": "difficulty-icon",
"filters": [{
"name": "Easy",
"checked": false
}, {
"name": "Medium",
"checked": false
}, {
"name": "Hard",
"checked": false
}, {
"name": "Expert",
"checked": false
}]
},
{
"title": "Direction of Movement",
"icon": "direction-icon",
"filters": [{
"name": "Flexion",
"checked": false
}, {
"name": "Ulnar Deviation",
"checked": false
}, {
"name": "Radial Deviation",
"checked": false
}]
},
{
"title": "Exercise Aim",
"icon": "aim-icon",
"filters": [{
"name": "Power",
"checked": false
}, {
"name": "Strength",
"checked": false
}]
}, {
"title": "Muscle Group ",
"icon": "muscle-icon",
"filters": [{
"name": "Foot & Shin",
"checked": false
}]
},
{
"title": "Joint",
"icon": "joint-icon",
"filters": [{
"name": "Foot and Ankle",
"checked": false
}, {
"name": "Knee",
"checked": false
}]
}
]
};
angular.forEach($scope.all_data.results, function(item, key) {
item.model = [];
});
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="//rawgit.com/dotansimha/angularjs-dropdown-multiselect/master/src/angularjs-dropdown-multiselect.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="appController">
<div>
<div ng-repeat="mydata in all_data.results">
<div ng-dropdown-multiselect="" options="mydata.filters" selected-model="mydata.model" extra-settings="filterSettings"></div>
<pre>mydata.model = {{mydata.model | json}}
</pre>
</div>
</div>
</body>
</html>
The models which receive user input (selection) for each multiselect is added to data in the Angular.forEach loop.

Using AngularJS with JSON objects in arrays nested within an array, how can I get the data into the html?

I am trying to get the JSON data into list.html as follows, but my attempts are failing. I have tried following patterns described in other similar posts, but haven't had any luck and haven't found a scenario with JSON data formatted exactly like mine. How do I get the fields like givenName, familyName, primaryTitle, phones[0].value, and photo.small to show up?
index.html:
<!doctype html>
<html lang="en" ng-app="directoryApp">
<head>
<meta charset="UTF-8">
<title>Directory</title>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="lib/angular/angular-animate.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div ng-view></div>
</body>
</html>
list.html:
<ul ng-show="query">
<li ng-animate="'animate'" ng-repeat="person in people.people | filter: query | orderBy: peopleOrder:direction">
<img ng-src="images/{{person.photo.small}}" alt="Photo of {{person.name.givenName}}">
<div class="info">
<h2>{{person.name.givenName}}</h2>
<h3>{{person.primaryTitle}}, {{person.phones[0].value}}</h3>
</div>
</li>
</ul>
controllers.js:
var directoryControllers = angular.module('directoryControllers', ['ngAnimate']);
directoryControllers.controller('ListController', ['$scope', '$http', function($scope, $http) {
$http.get('js/directoryData.json').success(function(data) {
$scope.people = data;
$scope.peopleOrder = 'familyName';
});
}]);
app.js:
var directoryApp = angular.module('directoryApp', [
'ngRoute',
'directoryControllers'
]);
directoryApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/list', {
templateUrl: 'partials/list.html',
controller: 'ListController'
}).
otherwise({
redirectTo: '/list'
});
}]);
directoryData.json:
[
{
"uid": 15,
"name": "School of Programming",
"sortKey": 0,
"type": "Academic",
"address": {
"address1": "255 Foo St",
"address2": "Suite 310",
"city": "FooBar",
"state": "FB",
"postalCode": "90210"
},
"phones": [
{
"type": "Work",
"value": "555-1616"
},
{
"type": "Fax",
"value": "555-3620"
}
],
"people": [
{
"uid": "person1",
"classification": "Faculty",
"name": {
"givenName": "Roo",
"nickname": "",
"additionalName": "",
"familyName": "Baf"
},
"primaryTitle": "Part Time Worker",
"phones": [
{
"type": "Work",
"value": "555-1616"
},
{
"type": "Mobile",
"value": "555-1509"
}
],
"photo": {
"small": "/__media__/photos/foo_portrait_small.jpg",
"medium": "/__media__/photos/foo_portrait_medium.jpg",
"large": "/__media__/photos/foo_portrait_large.jpg"
}
},
{
"uid": "person2",
"classification": "Faculty",
"name": {
"givenName": "Foo",
"nickname": "",
"additionalName": "P.",
"familyName": "Bar"
},
"primaryTitle": "Blah",
"phones": [
{
"type": "Work",
"value": "555-3608"
},
{
"type": "Home",
"value": "555-4716"
}
],
"photo": {
"small": "/__media__/photos/portrait_small.jpg",
"medium": "/__media__/photos/portrait_medium.jpg",
"large": "/__media__/photos/portrait_large.jpg"
}
}
]
},
{
"uid": 16,
"name": "School of Coding",
"sortKey": 1,
"type": "Academic",
"address": {
"address1": "256 Foo St",
"address2": "Suite 311",
"city": "FooBar",
"state": "FB",
"postalCode": "90210"
},
"phones": [
{
"type": "Work",
"value": "555-1616"
},
{
"type": "Fax",
"value": "555-3620"
}
],
"people": [
{
"uid": "person3",
"classification": "Faculty",
"name": {
"givenName": "Boo",
"nickname": "",
"additionalName": "",
"familyName": "Far"
},
"primaryTitle": "Part Time Worker",
"phones": [
{
"type": "Work",
"value": "555-1617"
},
{
"type": "Mobile",
"value": "555-1508"
}
],
"photo": {
"small": "/__media__/photos/fooz_portrait_small.jpg",
"medium": "/__media__/photos/fooz_portrait_medium.jpg",
"large": "/__media__/photos/fooz_portrait_large.jpg"
}
},
{
"uid": "person4",
"classification": "Faculty",
"name": {
"givenName": "Too",
"nickname": "",
"additionalName": "P.",
"familyName": "Mar"
},
"primaryTitle": "Blah",
"phones": [
{
"type": "Work",
"value": "555-3607"
},
{
"type": "Home",
"value": "555-4717"
}
],
"photo": {
"small": "/__media__/photos/Xportrait_small.jpg",
"medium": "/__media__/photos/Xportrait_medium.jpg",
"large": "/__media__/photos/Xportrait_large.jpg"
}
}
]
}
]

You have an array of objects that each have a people property in them and that property value is an array.
Thus you need to use nested ng-repeat to first loop over the main array and within each iteration of that repeat, loop over the inner array
<ul ng-repeat="item in people">
<li ng-animate="'animate'" ng-repeat="person in item.people | filter: ...">

Converting Multidimensional JSON key-value pairs into an Angular Menu (no Angular knowledge required)

I asked this question here:
Working With Dynamic Multidimensional key-value pairs in JSON
But it's become a bit more involved and I can't get where I'm going from that answer. If I have a data object that looks like this:
{
"email": "user#someco.com",
"firstname": "Bob",
"lastname": "Smith",
"company": "ACME",
"custom": {
"services": [
{
"name": "svc1",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc2",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc3",
"desc": "abcdefg",
"selected": "false",
"status": "None"
},
{
"name": "svc4",
"desc": "abcdefg",
"selected": "false",
"status": "None"
}
],
"fields": [
{
"name": "Products",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Product1",
"desc": "abcdef"
},
{
"name": "Product2",
"desc": "abcdef"
}
],
"services": [
"svc1",
"svc2",
"svc3"
]
},
{
"name": "Wines",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Wine 1",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
},
{
"name": "Fruits",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Fruit 1",
"desc": "abcdef"
},
{
"name": "Fruit 2",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
}
]
}
};
How can I convert that into an Angular menu? The menu would need to list all of the services, and then if the service has an associated item in "fields" that item should be listed underneath it. So for instance "svc1" and its description should be listed on a line (got that working) but then "Product1" and "Product2" with their descriptions should appear on the next two lines because you can see that "svc1" is listed in the "services" field for "Products." Similarly, "svc4" should appear on a line, and then "Wines" and its description on the next line because "svc4" appears in the "services" field of "Wines."
I think the best way is to unpack and re-pack this JSON object in sequential order in the Angular controller and then push this data out to the Angular view but there might be a solution using only the logic available from the view. I've tried a bunch of nested fors and ifs along these lines (very much not working):
var i, j;
var listArray = [];
for (i = 0; i < $scope.svcs.length; i++) {
var littleArray = [$scope.svcs[i].status, $scope.svcs[i].name, $scope.svcs.desc];
listArray.push[littleArray1];
for (j=0; j < $scope.jFA.length; j++) {
if ($scope.jFA[j] == $scope.svcs[i].name) {
if ($scope.jFA[j] == $scope.svcs[i].fields)
littleArray = [$scope.jFA[j].fields] //...etc
}
}
...but that logic just keeps getting more and more dense and isn't working no matter now I try to use it. I liked the simplicity in the answer to the other question but have not had success in replicating it.
So if someone can help me figure out how to get the data into the right sequence using JS I can handle the Angular part. Or if you're an Angular whiz and have an answer along those lines, even better.

So it was a little hard understanding your question, but I gave it my best shot. Does this fiddle show what you are trying to achieve? http://jsfiddle.net/arknr6qz/1/
JS:
var app = angular.module('TestApp',[]);
app.controller('TestController', function($scope)
{
$scope.checkService = function(service, fieldServices)
{
if (fieldServices.indexOf(service) != -1) return true;
return false;
};
$scope.data = {
"email": "user#someco.com",
"firstname": "Bob",
"lastname": "Smith",
"company": "ACME",
"custom": {
"services": [
{
"name": "svc1",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc2",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc3",
"desc": "abcdefg",
"selected": "false",
"status": "None"
},
{
"name": "svc4",
"desc": "abcdefg",
"selected": "false",
"status": "None"
}
],
"fields": [
{
"name": "Products",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Product1",
"desc": "abcdef"
},
{
"name": "Product2",
"desc": "abcdef"
}
],
"services": [
"svc1",
"svc2",
"svc3"
]
},
{
"name": "Wines",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Wine 1",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
},
{
"name": "Fruits",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Fruit 1",
"desc": "abcdef"
},
{
"name": "Fruit 2",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
}
]
}
};
});
HTML:
<div ng-app="TestApp">
<div ng-controller="TestController">
<div ng-repeat="service in data.custom.services">
{{ service.name }}
<div class="indent" ng-repeat="fields in data.custom.fields">
<span ng-if="checkService(service.name, fields.services)">
{{fields.services.values}}
<span ng-repeat="value in fields.values">
{{value.name}} - {{value.desc}}<br>
</span>
</span>
</div>
</div>
</div>
</div>
and finally css:
.indent {
margin-left:10px;
}