how to separate ng-repeat by date - javascript

I'm getting crazy to create a list separated by year and month name...
I would like to have something like:
Events in 2015
January
- event 1
- event 2
- event 3
February
- event 1
- event 2
...ecc...
Events in 2016
...ecc...
I don't think I have to create a repeater for each Year and Month, right? I think there is a filter or a rule to achieve this.
<div ng-app ng-controller="Main">
<div ng-repeat="event in events | what here?">
// how to create separators here?
{{event.title}}
</div>
</div>
$scope.events = [
{id: 1, title: "Title 1", date: 283764873126},
{id: 2, title: "Title 2", date: 283764873126},
{id: 3, title: "Title 3", date: 283764873126},
{id: 4, title: "Title 4", date: 283764873126}
];

Related

Is there a way to format a JavaScript object logged to console in vscodes integrated git bash terminal?

I'm currently working with a an object and loading it into the terminal console with console.log(books)
The code for the object is this.
const books = [
{
id:1,
name: "Harry Potter and the Chamber of Secrets",
authorId: 1
},
{
id: 2,
name: "Harry Potter and the Prisoner of Azkaban",
authorId: 1
},
{
id: 3,
name: "Harry Potter and the Goblet of Fire",
authorId: 1
},
{
id: 4,
name: "The Fellowship of the Ring",
authorId: 2
},
{
id: 5,
name: "The Two Towers",
authorId: 2
},
{
id: 6,
name: "The Return of the King",
authorId: 2
},
{
id: 7,
name: "The Way of Shadows",
authorId: 3
},
{
id: 8,
name: "Beyond the Shadows",
authorId: 3
},
];
It's quite a small problem, but I've noticed that not all of the information is displayed consistently when I log to console. Is this a problem with the git bash terminal or the integration between vscode and git bash and is there anything that can be done to make the presentation more consistent? It's a bit jarring.
I've tried looking for resources on this issue and haven't found anything similar. Would be great to get ideas as even if it's a small thing, when looking through larger data sets, it would be nice to know it will be formatted consistently.
I found a great answer to this on Handy Tips on Using Console Log
You can use Stringify to structure big objects and create consistent formatting.
If I type the following it formats nicely.
console.log(JSON.stringify(books, null, 2))

Sort an array of objects(with multiple properties) in a specified order of Keys with JavaScript [duplicate]

This question already has answers here:
Sort JavaScript object by key
(37 answers)
Closed 2 years ago.
I have a json response with the following data in alphabetical order,
let sheetCells =
{
0: [
{
"Actual Hours": 16
"Assigned": "Jerry"
"Completion %": 48.2
"Days Scheduled": 2
"Device 1": 10
"Device 2": 43
"Device 3": 72
"Device 4": 91
"Device 5": 25
"End Date": "2018-01-03T23:00:00.000Z"
"Estimated Hours": 16
"ID": "1dbk3"
"Notes": "Note 1"
"Parent ID": "2k59f"
"Priority": ""
"Start Date": "2018-01-01T23:00:00.000Z"
"Stories": "A User"
"Tests": "Y"
},
{
//...same keys as above, different values
}
]
}
but this is the DESIRED format in which I want the resulting objects in the array be sorted,
[
{
"Stories": "A User"
"ID": "1dbk3"
"Parent ID": "2k59f"
"Completion %": 48.2
"Priority": ""
"Device 1": 10
"Device 2": 43
"Device 3": 72
"Device 4": 91
"Device 5": 25
"Assigned": "Jerry"
"Notes": "Note 1"
"Tests": "Y"
"Estimated Hours": 16
"Days Scheduled": 2
"Start Date": "2018-01-01T23:00:00.000Z"
"End Date": "2018-01-03T23:00:00.000Z"
"Actual Hours": 16
},
{
//...same keys as above, different values
}
]
Here is the solution that i've tried
let sortOrder = ['Stories', 'ID', 'Parent ID', 'Completion %', 'Priority', 'Device 1', 'Device 2', 'Device 3', 'Device 4', 'Device 5', 'Assigned', 'Notes', 'Tests', 'Estimated Hours', 'Days Scheduled', 'Start Date', 'End Date', 'Actual Hours']
let result = sheetCells[0].sort((a,b) => sortOrder.indexOf(a.Stories) > sortOrder.indexOf(b.Stories)))
but this result gets just the story key and ignores the rest, please help with a working and optimal solution.Thanks
Rather than resorting the original data, you can map it to a new sorted array by indexing it with every element in your sortOrder in order. Something like this:
let result = sortOrder.map(key => sheetCells[0][key]);
While that's a working version of your solution, based on the data structure in your example, this may be closer to what you're looking for:
let result = sheetCells[0].map(cell => sortOrder.map(key => cell[key]));

How to order array objects by date?

I have an array of objects like this
layerArr = [
{
name: "layer 1"
layerDate: "/Date(6958748400000)/"
layerDateFormatted: "31 December 2018"
etc...
}
{
name: "layer 2"
layerDate: "/Date(9375937500000)/"
layerDateFormatted: "23 December 2017"
etc...
}
{
name: "layer 3"
layerDate: "/Date(1554764400000)/"
layerDateFormatted: "15 January 2018"
etc...
}]
How can I sort layerArr by date with the latest date first?
In this example, when layer 2 is sorted correctly, I also want the latest date to become layer 1 and the oldest date should become the last layer. (the example above is made up values)
Thanks
EDIT: the links suggested to other threads do not explain how to change "name" so that the latest date becomes name ="layer 1" all the way to the oldest date becoming the last layer.
Use Array.sort():
layerArr = [
{ name: "layer 1", layerDate: "/Date(6958748400000)/", layerDateFormatted: "31 December 2018" },
{ name: "layer 2", layerDate: "/Date(9375937500000)/", layerDateFormatted: "23 December 2017" },
{ name: "layer 3", layerDate: "/Date(1554764400000)/", layerDateFormatted: "15 January 2018" }
];
sortedLayerArr = layerArr.sort(function(a, b) {
return new Date(a.layerDateFormatted)- new Date(b.layerDateFormatted);
}).map((layer, index) => ({
...layer,
name: `layer ${index + 1}`,
}));
console.log(layerArr);
console.log(sortedLayerArr);

How to get dependent options values into a hidden input filed in knockoutJs

I am trying to get selected input values into a hidden field, can any one help me on this, up to now as i am trying with below code.
Html
<select data-bind="options: packages,
optionsCaption: 'Select...',
optionsText: 'name',
value: selectedPackage">
</select>
</br>
<!-- ko with : selectedPackage -->
</br>
<select data-bind="options: locationOptions,
optionsCaption: 'Select...',
optionsText: 'location',
value: $parent.selectedLocation">
</select>
<!-- /ko -->
Display values at
<span data-bind="with: selectedPackage">
<b data-bind="text: name"></b>
<!-- ko with : $parent.selectedLocation -->
> <b data-bind="text: location"></b>
<!-- /ko -->
</span>
</td>
<td>
<span data-bind="with: selectedPackage">
<b data-bind="text: price"></b> $ +
<!-- ko with : $parent.selectedLocation -->
$<b data-bind="text: price"></b>
<!-- /ko -->
</span>
Js/Knockout code
this.packages = [
{
sku : "306",
name: "Standard delivery hours (8-4)",
description: "its nice",
price: 99,
locationOptions : []
},
{
sku : "100",
name: "Within a 4 hour window (adds $15)",
description: "its nice",
price: 100,
locationOptions : [
{ location: "6:00 AM - 10:00 AM (off hours)", price: 15},
{ location: "6:30 AM - 10:30 AM (off hours)", price: 15},
{ location: "7:00 AM - 11:00 AM (off hours)", price: 15}
]
},
{
sku : "101",
name: "Within a 2 hour window (adds $25)",
description: "its cool",
price: 100,
locationOptions : [
{ location: "8:00 AM - 10:00 AM", price: 25},
{ location: "10:00 AM - 12:00 PM", price: 25},
{ location: "12:00 AM - 02:00 PM", price: 25}
]
},
{
sku : "102",
name: "Within a 1 hour window (adds $40)",
description: "its cool",
price: 100,
locationOptions : [
{ location: " 8:00 AM - 9:00 PM", price: 40},
{ location: "9:30 AM - 10:00 PM", price: 40},
{ location: "10:00 AM - 11:00 PM", price: 40}
]
}
];
this.selectedPackage = ko.observable();
Everything is working fine, but i am trying to get the selected dependent values in to a hidden filed, but values are not rendering.
<input id="return_order_dependent" type="hidden" name="return_order_dependent" data-bind='value: selectedPackage().name' />
The problem is that selectedPackage can be null or undefined. Whenever this happens, your value data-bind throws an error:
selectedPackage().name becomes undefined.name throws Cannot read property 'name' of undefined
The undefined/null value is a result of the optionsCaption binding. Without the caption, knockout wil set your selected value to the first element in the list upon applying the select binding.
You'll need to do 2 things:
Determine how you want to indicate an unset value
Make sure the data-bind doesn't break.
Personally, I'd use a computed and manage the unset state in your viewmodel:
this.hiddenInputValue = ko.pureComputed(() => {
return (this.selectedPackage() || { name: "NOT_SET" }).name;
});
With data-bind:
<input type="hidden" data-bind='value: hiddenInputValue' />
You can also put this logic in the data-bind itself (this example defaults to null)
<input type="hidden" data-bind='value: selectedPackage() ? selectedPackage().name : null' />
Other solution directions are:
Remove the optionsCaption, always select the first value by default
Place an if or with around the hidden input (this might not work with your server related stuff)

Angular repeating radio button group in a list

I have 'recommendations', an array of recommendation like:
{Id: 1, Label: "option 1"},
{Id: 2, Label: "option 2"}
And 'items', an array of item like:
{Id: 1, Name: "Name 1", Recommend: recommendations[0]},
{Id: 2, Name: "Name 2", Recommend: recommendations[1]}
Now I like to show a list of items, for each item, show item name and radio button group to let user select one of possible 'Recommend' options.
My html looks like:
<div ng-repeat="i in viewModel.items">
<div>
{{i.Name}}
</div>
<div class="form-group">
<label class="control-label col-md-3">Recommend this?</label>
<div class="col-md-9">
<div class="radio" ng-repeat="r in viewModel.recommendations">
<label>
<input type="radio" ng-model="i.Recommend" ng-value="r"/>
{{r.Label}}
</label>
</div>
</div>
{{i.Name}}, {{i.Recommend.Label}}
</div>
</div>
{{viewModel.items | json}}
When I click one of options for each item, I see corresponding Recommend.Label is changing properly so it seems to be bound to model ok.
My problem is that, on initial page load, radio button group of each item is not showing the current option even though 'items' seems to have one of possible Recommend object. (All radio buttons are not checked).
What am I missing?
You should set the item's "Recommend" value to bound to $scope.recommendations at the beginning.
angular.module('test', []).controller('testCtrl', function($scope) {
$scope.viewModel = {};
$scope.viewModel.recommendations = [{Id: 1, Label: "option 1"}, {Id: 2, Label: "option 2"}];
$scope.viewModel.items = [{Id: 1, Name: "Name 1", Recommend: $scope.viewModel.recommendations[0]}, {Id: 2, Name: "Name 2", Recommend: $scope.viewModel.recommendations[1]}]; });
jsFiddle: http://jsfiddle.net/rkgetptj/

Categories

Resources