How to replace ' / ' with '-' inside ObservableArray ? Knockout js

Question

Well i am trying to pass an observable array via ajax call to my controller but i get every value there except date . i get something like '01-01-01' etc .

I found the issue but unable to fix that as i dont know how to replace / with - .

My ObservableArray have around 10 list items each list item holds a many properties out of those startDate holds the date like ("23/10/2014") . i just need something like ("23-10-2014") .

Tought of posting my function's and more i hope thats not required in this case i believe .

Let me explain with bit of code and sample data :

function myarray()
{
var self=this;
self.startDate=ko.observable("");
self.name=ko.observable("");
self.place=ko.observable("");
}

MyObservableArray :

self.Main= ko.observableArray();

In between i do some stuff to load Data into self.Main and i am sending self.Main to controller having data like below :

self.Main[0] holds : 

startDate() -->gives you  "23/10/2014" //individual observables inside onservable array
name() --> "jhon"
place()--> "croatia"

Likely

self.Main[9] holds :
startDate() --> "29/05/2012" 
    name() --> "pop"
    place()--> "usa"

I am trying like i want to alter the self.Main() and replace the startDate and use the same self.Main to send to my controller . Once after replacing in self.Main when i check date the / should be replaced with - .

Possible solution : i can use a different observable array and push all the VM's of Main into it but i am trying to do on self.Main without using other .

If someone can show some light it is much appreciated .

Answer 1

What I got that you are facing problem in escaping / in replace.

Try this

"(23/10/2014)".replace(/\//g,"-") //returns "(23-10-2014)"

I tried something for you using simple JS

var arr = [{date:"(23/10/2014)"},{date:"(23/10/2014)"},{date:"(23/10/2014)"},{date:"(23/10/2014)"}];

arr.forEach(function(obj){obj.date = obj.date.replace(/\//g,"-")});

console.log(arr) //will print date field as "(23-10-2014)" for all objects.

Answer 2

One solution would be to add a computed value that returns the array with the right values.

self.Main = ko.observableArray([...values here...]);

self.MainComputed = ko.computed(function() { 
  var computedArray = [];

  self.Main().forEach(function(item) {
    var newItem = myarray(); //Create a new item.
    newItem.name(item.name());
    newItem.place(item.place());
    newItem.startDate(item.startDate().replace(/\//g,"-"));
    computedArray.push(newItem);
  });

  return computedArray;
});

Then use the computed value in the places where you need the values with - .

---

I can think of two other ways to solve your issue, when taken into account that you want to use self.Main :

1. Replace the / with - before setting startDate on your item.
2. Change startDate to a computed value while storing the original value in another variable.

The first solution should be pretty straight forward (provided that it is a valid solution).

The second solution would look something like this:

function myarray()
{
  var self=this;
  self.originalStartDate = ko.observable("");
  self.name = ko.observable("");
  self.place = ko.observable("");

  self.startDate = ko.computed(function() {
    if(self.originalStartDate()) {
      //We can only replace if the value is set.
      return self.originalStartDate().replace(/\//g,"-");
    }
    else {
      //If replace was not possible, we return the value as is.
      return self.originalStartDate();
    }
  });
}

Now when you set the values you do something like:

var item = myarray();
item.originalStartDate = "01/01/2014";

Then when you get the value of startDate you would get "01-01-2014" .

Answer 3

I haven't used Knockout.js but you can do this with a Javascript replace:

var str = [your array value] ;
var res = str.replace("/", "-");

For more information: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace