We Keep Coding

JavaScript localStorage: how to parse method from saved array object using JSON.stringify

I have the following JavaScript code:
function Product(){
this.ProductName="";
this.Quantity=0;
this.Price=0;
this.Category="";
this.Total=function() {
return this.Quantity * this.Price;
}
this.Discount=function() {
return this.Total() * 0.25;
}
}
var Product = new Product();
Product.ProductName="Tipkovnica";
Product.Quantity=100;
Product.Price=150.5;
Product.Category="IT";
if(localStorage.Products){
Products = JSON.parse(localStorage.getItem("Products"));
}
else
{
var Products = [];
}
Products.push(Product);
localStorage.setItem('Products', JSON.stringify(Products));
function RetrieveObjects(Products){
for(var a=0;a<Products.length; a++){
document.write("<br>Product Name: "+Products[a].ProductName);
document.write("<br>Quantity: "+Products[a].Quantity);
document.write("<br>Price: "+Products[a].Price);
document.write("<br>Category: "+Products[a].Category);
document.write("<br>Total: "+Products[a].Total());
document.write("<br>Discount: "+Products[a].Discount());
}
}
I made JSON.stringify to store array object in JSON.
Then, When I tried to loop object from array back from storage after JSON parse, I got error because methods Total() and Discount() were not recognized as methods.
Any idea why?
Thanks,
Milan

Your function is using this but that is the global this which is the window object.
However, there is another problem, you cannot (or rather should not) store functions in JSON as there is no function data type. You should calculate the values and store the result in your JSON.
var Product {
productName: null,
quantity: 0,
price: 0,
category: null,
finalTotal: 0,
discountedTotal: 0,
total: function() {
return this.quantity * this.price;
},
discount: function() {
return this.total() * 0.25;
}
}
var newProduct = Object.create(Product);
newProduct.productName = "Tipkovnica";
newProduct.quantity = 100;
newProduct.price = 150.5;
newProduct.category = "IT";
newProduct.finalTotal = newProduct.total();
newProduct.discountedTotal = newProduct.discount();
if (localStorage.Products) {
Products = JSON.parse(localStorage.getItem("Products"));
Products.push(newProduct);
} else {
Products = [newProduct];
}
localStorage.setItem('Products', JSON.stringify(Products));
function RetrieveObjects(Products) {
for (var a = 0; a < Products.length; a++) {
document.write("<br>Product Name: " + Products[a].productName);
document.write("<br>Quantity: " + Products[a].quantity);
document.write("<br>Price: " + Products[a].price);
document.write("<br>Category: " + Products[a].category);
document.write("<br>Total: " + Products[a].finalTotal);
document.write("<br>Discount: " + Products[a].discountedTotal);
}
}

Because if you stringify the object, then all the methods are removed. Take a look at this: https://stackblitz.com/edit/typescript-2tfnkr
Not related hint: use the camelCase instead of PascalCase convention for all of the methods, properties and variables. PascalCase should be used in class names, interfaces etc.

Set Tuple of List to ViewData Mvc C#

I am adding some data in List of Tuple type like this in Razor view
List<Tuple<int, int, string>> Downloadlist = new List<Tuple<int, int, string>>();
And adding items to this list
Downloadlist.Add(new Tuple<int, int, string>(11, 7, "somedata"));
Now I would like to access the array of data in javascript
<script>
var listofdownloadpages = '#ViewData["DownloadPages"]';
if (listofdownloadpages != null) {
alert(listofdownloadpages.length);
for (var i = 0; i < listofdownloadpages.length; i++) {
alert(listofdownloadpages[i].wishid + ' ' + listofdownloadpages[i].remain);
}
}
else {
alert("not found anything");
}
But this not giving me the items in correct way please help.

This will work
Controller
public ActionResult Test()
{
List<Tuple<int, int, string>> Downloadlist = new List<Tuple<int, int, string>>();
Downloadlist.Add(new Tuple<int, int, string>(11, 7, "somedata"));
ViewData["DownloadPages"] = Downloadlist;
return View();
}
View & JS
<script>
var listofdownloadpages = #Html.Raw(Json.Encode(#ViewBag.DownloadPages));
if (listofdownloadpages != null) {
alert(listofdownloadpages.length);
for (var i = 0; i < listofdownloadpages.length; i++) {
alert(listofdownloadpages[i].Item1 + ' ' + listofdownloadpages[i].Item2);
}
}
else {
alert("not found anything");
}
</script>

create array in javascript with Html.action

I'm trying to create an array of strings in javascript by calling a function in my MVC controller and passing back an array of strings. This pretty simply just isn't working and I'm not sure what i need to do to amend this. below you can see both my javascript and controller code. Any help is greatly appreciated
javascript:
var optionString = #Html.Action("PopulateDashboardDropdown", "Embed", new { Dashboards = Model[0][0].Dashboards });
Controller:
public string[] PopulateDashboardDropdown(ODataResponseListDashboard[] dashboards)
{
string email = "";
//loop that finds the groupID assigned to the currently logged in user
foreach (Claim claim in ClaimsPrincipal.Current.Claims)
{
if (claim.Type == "emails")
{
email = claim.Value;
email = email.ToLower();
}
}
string[] orgs = GetOrgs(email);
string[] retVal = new string[orgs.Length];
bool[] admin = new bool[orgs.Length];
for (int i = 0; i < orgs.Length; i++)
{
admin[i] = isAdmin(orgs[i], email);
retVal[i] = "";
}
//loop that creates a string to emulate the innerHtml of a dropdown selector based on the names of all dashboards in the workspace
for (int i = 0; i < orgs.Length; i++)
{
for (int j = 0; j < dashboards[i].Value.Count; j++)
{
if (dashboards[i].Value.ElementAtOrDefault(j).DisplayName.Contains("Admin"))
{
if (admin[i])
{
retVal[i] += "<option>" + dashboards[i].Value.ElementAtOrDefault(j).DisplayName + "</option>";
}
}
else
{
retVal[i] += "<option>" + dashboards[i].Value.ElementAtOrDefault(j).DisplayName + "</option>";
}
}
}
return retVal;
}

Well, from isn't clear what is the error or what happens exactly but I see a couple of problems. I suggest the following in order to fix the code:
1) Change the result of your controller method to JsonResult:
public JsonResult PopulateDashboardDropdown(ODataResponseListDashboard[] dashboards)
{
...
return this.Json(retVal);
}
2) Get your data via an ajax call (note: you need to insert the proper url in http format. The Http.Action/Razor will not work in javascript):
$.getJSON(myUrl, function (data) {
var optionString = data;
...
});

Dynamic Javascript Variable?

I am not very sure how to name the question. What i am trying to achieve is this..
I have a set of Global Variable, they will need to be replicated over and over, but assigned with different set's name example. For example
var start
var end
var time
And i have many set/model that i have to create and change, so i am wondering if it is possible to create 1 set and i just have a var modelnumber which then i can just copy and paste them and change the modelnumber so i wont have to change thousands of variable names?
Example
var modelnumber = "1";
var modelstart = modelnumber + "modelstart";
var modelend = modelnumber + "modelend";
var modeltime = modelnumber + "modeltime";
Edit: To provide more info
So i have model1.js , model2.js model3.js and so on....and all the variable names function names are the same, and to save me time, i want to write 1 set of code that i can just change the var modelname at the top of each field so i wont have to change the thousands of variable names and function names..

You can always write a function:
function createVariables(modelNumber) {
window[modelNumber + 'modelstart'] = 1;
window[modelNumber + 'modelend'] = 2;
window[modelNumber = 'modeltime'] = 3;
}
createVariables(1);
Or change it to however you want. :)
UPDATE: (use global in place of window for NodeJS).

I think you're looking for a normal object literal. You can specify the property keys of the object with strings, which will give you the dynamic effect you're looking for.
Here's an example, using a for loop to populate the object.
var models = {};
var number_of_keys = 1000;
for(var i = 1; i < number_of_keys; i++) {
var keyName = 'model' + i;
var model = {
'start': i + 'modelstart',
'end': i + 'modelend',
'time': i + 'modeltime'
}
models[keyName] = model;
}
console.log(models);
Update:
As an example of how you could access your populated models, consider the following:
// You can effectively replace the `1` in this example with any number:
var model1 = models['model1'];
// model1 would be:
// {
// 'start': '1modelstart',
// 'end' : '1modelend',
// 'time': '1modeltime'
// }
var start1 = model1.start;
var end1 = model1.end;
var time1 = model1.time;
// Pseudo-code
var modelN = models['modelN'];
var startN = modelN.start;
var endN = modelN.end;
var timeN = modelN.time;
HTH

You could (should?) use an object or an array of objects.
For example:
// The "Model"
var Model = function(start,end,time) {
this.start = start;
this.end = end;
this.time = time;
}
// One option.
// Assign "Model" to the models
var models = {
'm1': new Model(x,y,z),
'm2': new Model(a,b,c)
}
// Access values
if (models.m1) {
alert("m1 end:["+ models.m1.end +"]");
}
// Add a "new" model
models['ace'] = new Model(r,s,t);
// or even
models.club = new Model(e,f,g);
You could also extend it like so:
Model.prototype.debug = function(id) {
if (id) {
console.log("model id:["+ id +"]");
}
console.log("start:["+ this.start +"]");
console.log("end:["+ this.end +"]");
console.log("time:["+ this.time +"]");
}
Which you would call like so:
models.m1.debug();
Or even:
for(x in models) {
models[x].debug(x);
}
Here is a code snippet example.
var Model = function(start,end,time) {
this.start = start;
this.end = end;
this.time = time;
}
Model.prototype.debug = function(id) {
if (id) {
console.log("model id:["+ id +"]");
}
console.log("start:["+ this.start +"]");
console.log("end:["+ this.end +"]");
console.log("time:["+ this.time +"]");
}
var models = {
'm1' : new Model('x','y','z'),
'm2' : new Model('a','b','c')
};
models.ace = new Model('r','s','t');
for(x in models) {
models[x].debug(x);
}

MVC4 Client Site Split Dropdowns Date Validation

I've been trying to get some custom client site date validation working and so far I cannot seem to get it to work properly.
I have a custom date editor defined like this:
#model DateTime?
#{
if (Model.HasValue)
{
int day = Model.Value.Day;
int month = Model.Value.Month;
int year = Model.Value.Year;
}
List<SelectListItem> days = new List<SelectListItem>();
for (int i = 1; i <= 31; i++)
{
days.Add(new SelectListItem { Text = i.ToString(), Value = i.ToString(), Selected = Model.HasValue && Model.Value.Day == i});
}
List<SelectListItem> months = new List<SelectListItem>();
for (int i = 1; i <= 12; i++)
{
months.Add(new SelectListItem { Text = i.ToString(), Value = i.ToString(), Selected = Model.HasValue && Model.Value.Month == i});
}
List<SelectListItem> years = new List<SelectListItem>();
var minYear = DateTime.Now.Year - 100;
var maxYear = DateTime.Now.Year - 18;
for (int i = maxYear; i >= minYear; i--)
{
years.Add(new SelectListItem { Text = i.ToString(), Value = i.ToString(), Selected = Model.HasValue && Model.Value.Year == i });
}
}
#Html.DropDownList("days", days, "Day", new { #class="form__select" } )
#Html.DropDownList("months", months, "Month", new { #class="form__select" } )
#Html.DropDownList("years", years, "Year", new { #class="form__select" } )
And I have a custom validation attribute defined like this:
[AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = false)]
public class DoBValidatorAttribute : ValidationAttribute, IClientValidatable
{
public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
{
List<ModelClientValidationRule> clientRules = new List<ModelClientValidationRule>();
ModelClientValidationRule validDateRule = new ModelClientValidationRule
{
ErrorMessage = "Please enter a valid date.",
ValidationType = "validdate"
};
validDateRule.ValidationParameters.Add("dayelement", metadata.PropertyName + ".days");
validDateRule.ValidationParameters.Add("monthelement", metadata.PropertyName + ".months");
validDateRule.ValidationParameters.Add("yearelement", metadata.PropertyName + ".years");
clientRules.Add(validDateRule);
return clientRules;
}
protected override ValidationResult IsValid(object value, ValidationContext validationContext)
{
DateTime dateResult;
int day = Convert.ToInt32(validationContext.Items["days"]);
int month = Convert.ToInt32(validationContext.Items["months"]);
int year = Convert.ToInt32(validationContext.Items["years"]);
// Put date parts together and check is valid...
if (DateTime.TryParse(year + "/" + month + "/" + day, out dateResult))
{
return ValidationResult.Success;
}
// Not valid
return new ValidationResult(string.Format(ErrorMessageString, validationContext.DisplayName));
}
}
In order to (try) and wire all this together I also have this in my JavaScript:
jQuery.validator.unobtrusive.adapters.add(
'validdate', // notice this is coming from how you named your validation rule
['dayelement'],
['monthelement'],
['yearelement'],
function (options) {
options.rules['datepartcheck'] = options.params;
options.messages['datepartcheck'] = options.message;
}
);
jQuery.validator.addMethod('datepartcheck', function (value, element, params) {
var year = params[2];
var month = params[1];
var day = params[0];
var birthDate = year + '/' + month-1 + '/' + day;
var isValid = true;
try {
// datepicker is a part of jqueryUI.
// include it and you can take advantage of .parseDate:
$.datepicker.parseDate('yy/mm/dd', birthDate);
}
catch (error) {
isValid = false;
}
return isValid;
}, '');
I've put a breakpoint on all these methods but the GetClientValidationRules method is never called which I think means that the rules are never going to be applied to the HTML for one thing.
What am I doing wrong here? I just cannot figure it out. If I could I would ditch all of it and use a plain datepicker but the client is insistent on this format.
UPDATE
Just to be clear in the generated HTML the controls generated are three <select> inputs.
I'm wondering if it might be better to split this into three separate int properties on my model and use a range validator instead.