I have this json below, if there where more objects with more countries and and medals, what would would be the best approach in angular to match medals won to specific countries?
[
{
"athlete": "KOGO, Micah",
"country": "KEN",
"sex": "Men",
"event": "10000m",
"medal": "Bronze"
},
{
"athlete": "BEKELE, Kenenisa",
"country": "ETH",
"sex": "Men",
"event": "10000m",
"medal": "Gold"
},
{
"athlete": "SIHINE, Sileshi",
"country": "ETH",
"sex": "Men",
"event": "10000m",
"medal": "Silver"
},
{
"athlete": "FLANAGAN, Shalane",
"country": "USA",
"sex": "Women",
"event": "10000m",
"medal": "Bronze"
}
]
This creates an unordered list of countries with counts of the medals.
var app = angular.module("yourApp", []);
app.controller("controller", function($scope) {
$scope.input = [{
"athlete": "KOGO, Micah",
"country": "KEN",
"sex": "Men",
"event": "10000m",
"medal": "Bronze"
},
{
"athlete": "BEKELE, Kenenisa",
"country": "ETH",
"sex": "Men",
"event": "10000m",
"medal": "Gold"
},
{
"athlete": "SIHINE, Sileshi",
"country": "ETH",
"sex": "Men",
"event": "10000m",
"medal": "Silver"
},
{
"athlete": "FLANAGAN, Shalane",
"country": "USA",
"sex": "Women",
"event": "10000m",
"medal": "Bronze"
}
];
$scope.countries = $scope.input.map(function(obj) {
return obj.country;
});
$scope.uniqueCountries = $scope.countries.filter(function(item, pos) {
return $scope.countries.indexOf(item) == pos;
})
$scope.getMedalCount = function(country, colour) {
var count = 0;
angular.forEach($scope.input, function(obj) {
if ((obj.country === country) && (obj.medal === colour)) {
count++;
}
});
return count;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="yourApp">
<div ng-controller="controller">
<ul>
<li ng-repeat="country in uniqueCountries">
{{ country }}
<ul>
<li>Gold: {{ getMedalCount(country, "Gold") }}</li>
<li>Silver: {{ getMedalCount(country, "Silver") }}</li>
<li>Bronze: {{ getMedalCount(country, "Bronze") }}</li>
</ul>
</li>
</ul>
</div>
</body>
Related
This is my people.js file.It contains data of two people.
var Data = [
{
"gender": "male",
"name": {
"title": "mr",
"first": "ruben",
"last": "dean"
},
"location": {
"street": "3070 york road",
"postcode": "LP0 5PG"
},
"email": "ruben.dean#example.com",
"login": {
"username": "crazydog764",
"password": "kane",
"sha256": "58841f853bffca51507549428aee2a6c14863c8219e5a4b563d58a5b97564c92"
},
"picture": {
"large": "https://randomuser.me/api/portraits/men/96.jpg",
"thumbnail": "https://randomuser.me/api/portraits/thumb/men/96.jpg"
},
"nat": "GB"
},
{
"gender": "male",
"name": {
"title": "mr",
"first": "daniel",
"last": "king"
},
"location": {
"street": "7618 taylor st",
"postcode": 35059
},
"email": "daniel.king#example.com",
"login": {
"username": "silvergorilla983",
"password": "1a2b3c4d",
"sha256": "df4eeb09df18d02d7fa49534a2cd6a03587d361f17aa7596d8ed7c025c5cb4d4"
},
"picture": {
"large": "https://randomuser.me/api/portraits/men/21.jpg",
"thumbnail": "https://randomuser.me/api/portraits/thumb/men/21.jpg"
},
"nat": "US"
}
]
module.exports = Data;
This is my PeopleList.jsx. Both files are in the same directory.
var React = require('react');
var Data = require('people');
var PeopleList = React.createClass({
render: function () {
return (
<div>
<ul>
</ul>
</div>
);
}
});
module.exports = PeopleList;
Can anyone tell me how to render both names (Ruben and Daniel) from the people.js file into the screen (within the unordered list)? Please provide code.
Thanks in advance.
This should do it:
<ul>
{Data.map(x => <li>{x.name.first}</li>)}
</ul>
You can do it using ES6 like this.
import {Data} from './path/to/people.json'
Then map over it.
Dara.map(person => console.log(person.name))
I am trying to get the latitude and longitude of the cities according to id...for example if i will click on kanpur it will show its latitude which is returning from API.But what i did is returning latitude of only last city which is returning from API.
my app.js code is:
.controller('AppCtrl', function($scope,
$http,$ionicModal,$cordovaGeolocation, $ionicLoading, $ionicPlatform) {
$scope.currentItem = 1;
$scope.latitude;
$scope.longitude;
$scope.ers = {
'agency_device_id' : ''
};
$scope.submit = function(){
var link = 'http://trendytoday.in/ers/api/DeviceAlarms';
$http.post(link, {ers: $scope.ers},{headers: {'Content-Type': 'application/json'} }).then(function (res){
// $scope.mssg = res.data.ers.resMessage;
// $scope.resp = res.data.ers.response;
$scope.arr = [];
angular.forEach(res.data.ers.data.alarms, function(value) {
$scope.arr.push(value);
//console.log(value.city)
latitude=value.lattitude;
longitude=value.longitude;
})
});
}
$scope.getdetails = function(){
window.alert(latitude);
};
});
and API response is:
{
"ers": {
"resMessage": "1",
"response": "Success",
"data": {
"alarms": [
{
"id": "1",
"alarm_id": "2",
"title": "Fire",
"description": "fire",
"type": "Fire",
"priority": "High",
"address": "Kanpur, Uttar Pradesh, India",
"city": "Kanpur",
"state": "UP",
"country": "India",
"zipcode": "123456",
"lattitude": "26.449923",
"longitude": "80.3318736"
},
{
"id": "3",
"alarm_id": "4",
"title": "test-02",
"description": "test-02",
"type": "Medical",
"priority": "High",
"address": "Borivali West, Mumbai, Maharashtra, India",
"city": "Mumbai",
"state": "MH",
"country": "India",
"zipcode": "123456",
"lattitude": "19.2461644",
"longitude": "72.85090560000003"
}
]
}
}
}
Assuming your $scope.currentItem is the id of the selected city such as kanpur, then when the API returns the data, check for this value to match the id and set the $scope variables.
I hope you get the idea.
function MyCtrl($scope) {
$scope.currentItem = 1;
$scope.latitude;
$scope.longitude;
$scope.submit = function() {
$scope.res = {
data: {
"ers": {
"resMessage": "1",
"response": "Success",
"data": {
"alarms": [{
"id": "1",
"alarm_id": "2",
"title": "Fire",
"description": "fire",
"type": "Fire",
"priority": "High",
"address": "Kanpur, Uttar Pradesh, India",
"city": "Kanpur",
"state": "UP",
"country": "India",
"zipcode": "123456",
"lattitude": "26.449923",
"longitude": "80.3318736"
},
{
"id": "3",
"alarm_id": "4",
"title": "test-02",
"description": "test-02",
"type": "Medical",
"priority": "High",
"address": "Borivali West, Mumbai, Maharashtra, India",
"city": "Mumbai",
"state": "MH",
"country": "India",
"zipcode": "123456",
"lattitude": "19.2461644",
"longitude": "72.85090560000003"
}
]
}
}
}
}
$scope.arr = [];
angular.forEach($scope.res.data.ers.data.alarms, function(value) {
$scope.arr.push(value);
if ($scope.currentItem == value.id) {
$scope.latitude = value.lattitude;
$scope.longitude = value.longitude;
}
});
}
$scope.submit();
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app ng-controller="MyCtrl">
Long: {{longitude}}
Lati: {{latitude}}
</body>
the only thing i changed is i passed obj as a parameter to getdetails function.
$scope.getdetails = function(obj){
alert(obj.lattitude);
}
and in html:
<div ng-repeat="obj in arr " ng-click="getdetails(obj)">
<p><b>{{obj.city}}</b></p>
</div>
I created a collection of users and gave it a URL to fetch the users list from. But when I try to render the whole collection along with the individual model views, the models don't get assigned the value fetched from the collection URL.
// Backbone Collection View
app.UserCollectionView = Backbone.View.extend({
el: '#users-list',
template: _.template($('#connections-template').html()),
initialize: function() {
this.connections = new app.UserCollection();
var self = this;
this.connections.fetch().done(function() {
self.render();
});
},
render: function() {
this.$el.html(this.template());
// this.$el.append( this.template( this.model.toJSON()));
this.connections.each(function(user) {
console.log('User : ' + user.get('name'));
// This prints only the default name all the time. (14 times)
var userView = new app.UserView({
model: user
});
// userView.model.fetch();
userView.render();
});
}
});
When render is called, connections.each iterates exactly 14 times (the no. of users in the response JSON), but the attributes of the models are not assigned; it uses the default values only. What am I doing wrong here?
Here is the full content of the file : http://pastebin.com/xD4LyK9N
Update:
This is the JSON response from the server : http://pastebin.com/S4HH1wUD
This is the HTML template : http://pastebin.com/v7kfBJ4Y
Check the data returned in the parse function, it seems to be incorrect or invalid. You can post the console.log output from the parse function, it would help debug the issue.
I have bypassed the fetch function and assigned the json data directly and it works fine.
var root = '';
var app = {};
var data = {
"data": [
{
"cities": {
"current_city": {
"colleges_count": 0,
"token": 1630,
"uid": "thoothukudi",
"colleges": [],
"name": "Thoothukudi",
"state": {
"name": "Tamil Nadu",
"token": 1033,
"uid": "tamil_nadu"
}
},
"native_city": {
"colleges_count": 0,
"token": 1630,
"uid": "thoothukudi",
"colleges": [],
"name": "Thoothukudi",
"state": {
"name": "Tamil Nadu",
"token": 1033,
"uid": "tamil_nadu"
}
}
},
"college": null,
"sex": null,
"account_type": "user",
"token": 1001,
"about_me": null,
"confirmation_token": "",
"name": "Admin",
"status": "verified",
"email": "admin#domain.tld",
"website": null,
"dob": null,
"passion": {
"parent": {
"type": "category",
"uid": "music"
},
"description": null,
"token": 1002,
"uid": "singing",
"name": "Singing",
"person": "Singer",
"type": "passion"
},
"username": "admin"
},
{
"cities": {
"current_city": {
"colleges_count": 0,
"token": 1630,
"uid": "thoothukudi",
"colleges": [],
"name": "Thoothukudi",
"state": {
"name": "Tamil Nadu",
"token": 1033,
"uid": "tamil_nadu"
}
},
"native_city": {
"colleges_count": 0,
"token": 1630,
"uid": "thoothukudi",
"colleges": [],
"name": "Thoothukudi",
"state": {
"name": "Tamil Nadu",
"token": 1033,
"uid": "tamil_nadu"
}
}
},
"college": null,
"sex": null,
"account_type": "user",
"token": 1004,
"about_me": null,
"confirmation_token": "",
"name": "Justin Kricket",
"status": "verified",
"email": "justin#domain.tld",
"website": null,
"dob": null,
"passion": {
"parent": {
"type": "category",
"uid": "music"
},
"description": null,
"token": 1002,
"uid": "singing",
"name": "Singing",
"person": "Singer",
"type": "passion"
},
"username": "justin"
},
{
"cities": {
"current_city": {
"colleges_count": 0,
"token": 1630,
"uid": "thoothukudi",
"colleges": [],
"name": "Thoothukudi",
"state": {
"name": "Tamil Nadu",
"token": 1033,
"uid": "tamil_nadu"
}
},
"native_city": {
"colleges_count": 0,
"token": 1630,
"uid": "thoothukudi",
"colleges": [],
"name": "Thoothukudi",
"state": {
"name": "Tamil Nadu",
"token": 1033,
"uid": "tamil_nadu"
}
}
},
"college": null,
"sex": null,
"account_type": "user",
"token": 1007,
"about_me": null,
"confirmation_token": "",
"name": "Karti Mako",
"status": "verified",
"email": "karti#domain.tld",
"website": null,
"dob": null,
"passion": {
"parent": {
"type": "category",
"uid": "music"
},
"description": null,
"token": 1002,
"uid": "singing",
"name": "Singing",
"person": "Singer",
"type": "passion"
},
"username": "karti"
},
{
"cities": {
"current_city": {
"colleges_count": 0,
"token": 1630,
"uid": "thoothukudi",
"colleges": [],
"name": "Thoothukudi",
"state": {
"name": "Tamil Nadu",
"token": 1033,
"uid": "tamil_nadu"
}
},
"native_city": {
"colleges_count": 0,
"token": 1630,
"uid": "thoothukudi",
"colleges": [],
"name": "Thoothukudi",
"state": {
"name": "Tamil Nadu",
"token": 1033,
"uid": "tamil_nadu"
}
}
},
"college": null,
"sex": null,
"account_type": "user",
"token": 1010,
"about_me": null,
"confirmation_token": "",
"name": "Laurel R K",
"status": "verified",
"email": "laurel#domain.tld",
"website": null,
"dob": null,
"passion": {
"parent": {
"type": "category",
"uid": "music"
},
"description": null,
"token": 1002,
"uid": "singing",
"name": "Singing",
"person": "Singer",
"type": "passion"
},
"username": "laurel"
},
{
"cities": {
"current_city": {
"colleges_count": 0,
"token": 1630,
"uid": "thoothukudi",
"colleges": [],
"name": "Thoothukudi",
"state": {
"name": "Tamil Nadu",
"token": 1033,
"uid": "tamil_nadu"
}
},
"native_city": {
"colleges_count": 0,
"token": 1630,
"uid": "thoothukudi",
"colleges": [],
"name": "Thoothukudi",
"state": {
"name": "Tamil Nadu",
"token": 1033,
"uid": "tamil_nadu"
}
}
},
"college": null,
"sex": null,
"account_type": "user",
"token": 1013,
"about_me": null,
"confirmation_token": "",
"name": "Rocky Bossy",
"status": "verified",
"email": "rocky#domain.tld",
"website": null,
"dob": null,
"passion": {
"parent": {
"type": "category",
"uid": "music"
},
"description": null,
"token": 1002,
"uid": "singing",
"name": "Singing",
"person": "Singer",
"type": "passion"
},
"username": "rocky"
},
],
"status": "success",
"http_status": 200,
"message": null
}
// Backbone Model
app.UserModel = Backbone.Model.extend({
defaults: {
// urlRoot: root + '/users',
name: 'Default Name',
email: '30',
username: 'default_username'
},
initialize: function() {
// this.fetch();
// console.log('User model \'' + this.id + '\' has been initialized.');
},
});
// Backbone Model View
app.UserView = Backbone.View.extend({
el: '#users-list',
// el: '.user-box-wrapper',
template: _.template($('#connections-user-template').html()),
initialize: function() {
// this.render();
},
render: function() {
this.$el.append( this.template( this.model.toJSON()));
}
});
// Backbone Collection
app.UserCollection = Backbone.Collection.extend({
model: app.UserModel,
url: root ,
initialize: function() {
// this.fetch();
},
parse: function(d) {
console.log(data.data)
return data.data;
}
});
// Backbone Collection View
app.UserCollectionView = Backbone.View.extend({
el: '#users-list',
template: _.template($('#connections-template').html()),
initialize: function() {
this.connections = new app.UserCollection(data.data);
var self = this;
self.render();
//this.connections.fetch().done(function() {
// self.render();
//});
},
render: function() {
this.$el.html(this.template());
// this.$el.append( this.template( this.model.toJSON()));
this.connections.each(function(user) {
console.log('User : ' + user.get('name'));
var userView = new app.UserView({
model: user
});
// userView.model.fetch();
userView.render();
});
}
});
var connectionsView = new app.UserCollectionView();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<body>
<header id="top">
<div id="logo-wrapper">
<img src="../static/img/logo.png" alt="Logo" id="logo">
</div>
<div id="top-links">
<div id="top-profile-box" class="toplink">
<div id="top-profile-data-box">
<div id="top-profile-data-name">Kevin Isaac</div>
<div id="top-profile-data-passion">Writer</div>
</div>
<img id="top-profile-image" src="../static/img/user1.jpg" alt="">
</div>
<div id="notification-icon" class="toplink"></div>
<div id="top-message-icon" class="toplink"></div>
<div id="logout-icon" class="toplink"></div>
</div>
</header>
<div id="middle">
<nav id="side-nav">
<div id="side-nav-top">
<div class="side-nav-link" id="side-nav-home-link">
<div class="side-nav-link-img"></div>
<div class="side-nav-link-title">Home</div>
</div>
<div class="side-nav-link" id="side-nav-profile-link">
<div class="side-nav-link-img"></div>
<div class="side-nav-link-title">Profile</div>
</div>
<div class="side-nav-link" id="side-nav-messages-link">
<div class="side-nav-link-img"></div>
<div class="side-nav-link-title">Message</div>
</div>
<div class="side-nav-link" id="side-nav-account-link">
<div class="side-nav-link-img"></div>
<div class="side-nav-link-title">Account</div>
</div>
</div>
</nav>
<div id="main-content">
<!-- Start of page specific HTML -->
<div id="content-title">
<div class="content-subtitle">Connections</div>
<div class="content-subtitle">Followers</div>
<div class="content-subtitle">Followings</div>
</div>
<div id="content-body">
<div id="users-box">
<div id="users-list">No connection</div>
<!-- Backbone Template Starts -->
<script type="text/template" id="connections-template"></script>
<script type="text/template" id="connections-user-template">
<div class="user-box-wrapper">
<div class="user-box">
<div class="user-pic-wrapper">
<img src="/static/img/user1.jpg" alt="">
</div>
<div class="user-data" id="boox">
<div class="user-name"><%= name %></div>
<div class="user-passion"><%= username %></div>
<div class="user-city"><%= email %></div>
</div>
</div>
</div>
</script>
<!-- Backbone Template Ends -->
<div id="users-side-box">
<div id="users-box-search">
<input id="user-search" type="text" name="">
</div>
<div id="user-metadata">
<div id="metadata-user-top-box">
<div id="metadata-user-image-wrapper">
<img src="/static/img/user1.jpg" alt="">
</div>
<div id="metadata-user-name-box">
<div id="metadata-name">Name's Bond</div>
<div id="metadata-passion">Assassin</div>
</div>
</div>
<div id="metadata-user-bottom-box">
<div class="metadata-user-attribute">
<span class="metadata-property">Studied at: </span>
<span class="metadata-value">Karunya University </span>
</div>
<div class="metadata-user-attribute">
<span class="metadata-property">Native City: </span>
<span class="metadata-value">London</span>
</div>
<div class="metadata-user-attribute">
<span class="metadata-property">Website: </span>
<span class="metadata-value">www.007.com</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of page specific HTML -->
</div>
<aside id="main-aside">
Aside one two therr
</aside>
</div>
</body>
https://jsfiddle.net/akramparvez/a2jvh3mk/
i have object value in JSON, within which it contains array.i am trying to group the subdocument but does not work. my plunk
The below is my controller code.
Controller
app.controller('MainCtrl', function($scope) {
$scope.list = {
"_id": "56c4758af801160e00d176e0",
"orderfood": [
{
"_id": "569d84f04834c10e003dff36",
"qty": "1",
"confirm": "placed",
"price": 125,
"name": "Paneer Tikka"
},
{
"_id": "569d869fff1fe20e00f8ba9b",
"qty": "1",
"confirm": "placed",
"price": 85,
"name": "Falooda"
},
{
"_id": "569d869fff1fe20e00f8ba9b",
"qty": "1",
"confirm": "placed",
"price": 85,
"name": "Falooda"
}
],
"title": "Status",
"created": "2016-02-17T13:28:42.226Z"
}
});
The below is my HTML code
HTML
<p ng-repeat="(key,value) in list.orderfood | groupBy:'name'">
{{key}}
</p>
my plunk
Dont know what you want your ouput to be but you need to do this with a custom function:
<div ng-app ng-controller="Main">
<div ng-repeat="list in itemsToFilter() | filter:filterNames">
<b>{{list.name}}</b>
<li ng-repeat="item in itemsToFilter() | filter: {name: list.name}">NAME: {{item.name}}- PRICE: {{item.price}}, etc...</li>
</div>
</div>
Then in your controller:
function Main($scope) {
$scope.list = {
"_id": "56c4758af801160e00d176e0",
"orderfood": [
{
"_id": "569d84f04834c10e003dff36",
"qty": "1",
"confirm": "placed",
"price": 125,
"name": "Paneer Tikka"
},
{
"_id": "569d869fff1fe20e00f8ba9b",
"qty": "1",
"confirm": "placed",
"price": 85,
"name": "Falooda"
},
{
"_id": "569d869fff1fe20e00f8ba9b",
"qty": "1",
"confirm": "placed",
"price": 85,
"name": "Falooda"
}
],
"title": "Status",
"created": "2016-02-17T13:28:42.226Z"
}
var indexedTeams = [];
$scope.itemsToFilter = function() {
indexedTeams = [];
return $scope.list.orderfood;
}
$scope.filterNames = function(item) {
var nameIsNew = indexedTeams.indexOf(item.name) == -1;
if (nameIsNew) {
indexedTeams.push(item.name);
}
return nameIsNew;
}
}
here is a link...js-fiddle exmple: http://jsfiddle.net/L6cQN/305/
I am working on an angular app . here i need to show data in date order for user timeline
JS:
$scope.comments = [{"_id":"535e912cc6b93c7b30479454",
"created_at":"2014-04-28 23:04:36",
"post_id":"535e912cc6b93c7b30479453",
"type":"story",
"story":"[{"_id":"535e912cc6b93c7b30479454",
"title":"test story",
"content":"this is my story...",
"created_at":2014-04-30 22:04:36"}]",
"article":"[]"
},
{"_id":"535e912cc6b93c7b30479454",
"created_at":"2014-04-25 23:04:36",
"post_id":"535e912cc6b93c7b30479453",
"type":"article"
"article":"[{"_id":"535e912cc6b93c7b30479454",
"title":"test article",
"content":"this is my article...",
"created_at":2014-04-30 22:04:36"}]",
"story":"[]"
},----
//so on
]
View:
<div ng-repeat = "data in comments">
<div class="time">
<span>{{data.created_at | DateFiltertoIso | date:'MMM-dd-yy'}}
<div>
<div ng-switch-on="data.type">
<div ng-switch-when="story">
//switch layout adn get further story data by post_id
</div>
</div>
<div ng-switch-on="data.type">
<div ng-switch-when="article">
//switch layout adn get further article data by post_id
</div>
</div>
</div>
Expected Output is like
Apr-04-14
post1
post2
/all post for that date
Apr-01-14
post5
post6
//so on
I am getting
Apr-04-2014
post1
Apr-04-2014
post2
Apr-04-2014
post3
I am newbie to angular. Any Help would be helpfull
Try this
Working Demo
Html
<div ng-controller="MyCtrl">
<div ng-repeat="data in flattenedResults">
<div class="time"> <span>
<b>{{data.created_at | badDateToISO | date:'MMM-d-yy'}} </b></span>
<div>
<u ng-show="data.story.length>0">Stories</u>
<div ng-repeat="story in data.story">
{{story.title}}{{story.created_at}}
</div>
<u ng-show="data.article.length>0">Articles</u>
<div ng-repeat="article in data.article">
{{article.title}}
</div>
Script
var myApp = angular.module('myApp', []);
myApp.filter('badDateToISO', function () {
return function (badTime) {
var goodTime = badTime.replace(/(.+) (.+)/, "$1T$2Z");
return goodTime;
};
});
myApp.controller('MyCtrl', function ($scope) {
$scope.flattenedResults = [];
$scope.comments = [{
"_id": "535e912cc6b93c7b30479454",
"created_at": "2014-04-28 23:04:36",
"post_id": "535e912cc6b93c7b30479453",
"type": "story",
"story": [{
"_id": "535e912cc6b93c7b30479454",
"title": "test story 1",
"content": "this is my story... 2",
"created_at": "2014-04-30 22:04:36"
}],
"article": "[]"
}, {
"_id": "535e912cc6b93c7b30479454",
"created_at": "2014-04-28 23:04:36",
"post_id": "535e912cc6b93c7b30479453",
"type": "article",
"article": [{
"_id": "535e912cc6b93c7b30479454",
"title": "test article 33",
"content": "this is my article... 33",
"created_at": "2014-04-30 22:04:36"
}],
"story": "[]"
}, {
"_id": "535e912cc6b93c7b30479454",
"created_at": "2014-04-25 23:04:36",
"post_id": "535e912cc6b93c7b30479453",
"type": "article",
"article": [{
"_id": "535e912cc6b93c7b30479454",
"title": "test article 1",
"content": "this is my article... 1",
"created_at": "2014-04-30 22:04:36"
}],
"story": "[]"
}, {
"_id": "535e912cc6b93c7b30479454",
"created_at": "2014-04-28 23:04:36",
"post_id": "535e912cc6b93c7b30479453",
"type": "story",
"story": [{
"_id": "535e912cc6b93c7b30479454",
"title": "test story 2",
"content": "this is my story... 2",
"created_at": "2014-04-30 22:04:36"
}],
"article": "[]"
}, {
"_id": "535e912cc6b93c7b30479454",
"created_at": "2014-04-25 23:04:36",
"post_id": "535e912cc6b93c7b30479453",
"type": "article",
"article": [{
"_id": "535e912cc6b93c7b30479454",
"title": "test article 2",
"content": "this is my article... 2",
"created_at": "2014-04-30 22:04:36"
}],
"story": "[]"
}];
$scope.jsonFlatten = function () {
$scope.dates = [];
$scope.comments.reduce(function (result, item) {
$scope.dates.push(item.created_at);
}, 0);
$scope.dates = _.uniq($scope.dates);
angular.forEach($scope.dates, function (dateValue, dateKey) {
var obj = {};
obj.created_at = dateValue;
var articleValues = [];
var storyValues = [];
angular.forEach($scope.comments, function (value, key) {
if (dateValue === value.created_at) {
obj._id = value._id;
obj.post_id = value.post_id;
if (value.type === 'story') {
angular.forEach(value.story, function (storyValue, storyKey) {
storyValues.push(storyValue)
});
} else if (value.type === 'article') {
angular.forEach(value.article, function (articleValue, articleKey) {
articleValues.push(articleValue)
});
}
}
});
obj.story = storyValues;
obj.article = articleValues;
$scope.flattenedResults.push(obj);
});
};
$scope.jsonFlatten(); //calling the method jsonFlatten() and making the flatten json
});