Javascript – How to add new property with same key name inside declared object

javascriptjavascript-objectsjqueryknockout.js

How can I append/add new property with same key name inside declared object ?

Here the code:

// Declared object
var myObject = {
    name : 'John',
    age  : 15,
};

// Array list of new property need to be add to myObject
var others = [
  { key : 'hobby', value: 'reading' },
  { key : 'hobby', value: 'writing' }
];

What i've been try so far:

ko.utils.arrayForEach(others, function(other) {
    myObject[other.key] = other.value;
});

and

ko.utils.arrayForEach(others, function(other) {
    var extendObject = new Object();
    extendObject[other.key] = other.value;

    $.extend(myObject, extendObject);
});

The result still both doesn't work either. It just replace existing property value

What I need is something like this:

myObject: { name: 'John', age: 15, hobby: 'reading', hobby: 'writing' }

Please note: I don't want to make it array : hobby: ['reading', 'writing']

UPDATE:

I was implement this for search functionality, code and details above is simplified version of the part I was stuck.

and here is the full code of what i've try to accomplish:

my views:

<form data-bind="submit: $root.getSearchData">
  <input name="date_start" class="datepicker">

  <div class="checkbox">
    <label>
       <input type="checkbox" name="user_id[]" value="1"> John
    </label>
    <label>
       <input type="checkbox" name="user_id[]" value="2"> Michael
    </label>
  </div>
</form>

my viewmodels:

// Will contains new search property need to append to queryData
self.searchPropertyList = ko.observableArray();

// This function will fetch tasks from server
self.getTasksFromServer = function()
{
   // Query data
   var queryData = {
       sort : 'start',
       order: 'asc'
   };

   /**
    * When getSearchData function fill formData into searchPropertyList observable,
    * this function will get a notify and it will automatically loop through it 
    * and append new property to queryData.
    */
   ko.utils.arrayForEach(self.searchPropertyList(), function(opt)
   {
       queryData[opt.name] = opt.value;
   }

   $.ajax({
       url: 'api/tasks',
       type: 'json',
       data: queryData,
       success: function(data)
       {
       }
   });
}

// Returned form property as array into searchPropertyList observableArray 
// and notify getTaskFromServer function
// This is how formData may look like
// formData = [{ name: 'date_start', value: '2014-08-26' }, { name: 'user_id[]', value: 1 }, { name: 'user_id[]', value: 2 }]; 
self.getSearchData = function(form)
{
     var formData = $(form).serializeArray();

     self.searchPropertyList(formData);
}

So, ajax will request something like this:

api/tasks?sort=start&order=asc&date_start=2014-08-26&user_id[]=1&user_id[]=2

Someone, please help, Thanks 🙂

Best Solution

As the comments say, you can not have multiple property with the same name.

What you can do this to add the hobby value to the same hobby property and split it when you need all your hobbies:

var person = { hobby: "programmer" };

// adding another hobby
person.hobby =+ "-secretary";

var hobbies = person.hobby.split("-"); // [programmer,secretary]