Copy Object With Results Of Getters

I have an object that contains a getter. myObject { id: 'MyId', get title () { return myRepository.title; } } myRepository.title = 'MyTitle'; I want to obtain an object l

Solution 1:

$.extend does exactly what you want. (Update: You've since said you want non-enumerable properties as well, so it doesn't do what you want; see the second part of this answer below, but I'll leave the first bit for others.) The bug isn't saying that the resulting object won't have a title property, it's saying that the resulting object's title property won't be a getter, which is perfect for what you said you wanted.

Example with correct getter syntax:

// The myRepository objectvar myRepository = { title: "MyTitle" };

// The object with a gettervar myObject = {
    id: "MyId",
    gettitle() { return myRepository.title; }
};

// The copy with a plain propertyvar copy = $.extend({}, myObject);

// View the copy (although actually, the result would look// the same either way)
snippet.log(JSON.stringify(copy));

// Prove that the copy's `title` really is just a plain property:
snippet.log("Before: copy.title = " + copy.title);
copy.title = "foo";
snippet.log("After:  copy.title = " + copy.title);

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --><scriptsrc="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Syntax fixes:

• Added missing var, =, and ;

• Removed duplicate property title

• Corrected the getter declaration syntax

---

If you want to include non-enumerable properties, you'll need to use Object.getOwnPropertyNames because they won't show up in a for-in loop, Object.keys, or $.extend (whether or not they're "getter" or normal properties):

// The myRepository objectvar myRepository = { title: "MyTitle" };

// The object with a gettervar myObject = {
    id: "MyId"
};
Object.defineProperty(myObject, "title", {
  enumerable: false, // it's the default, this is just for emphasis,get: function() {
    return myRepository.title;
  }
});

snippet.log("$.extend won't visit non-enumerable properties, so we only get id here:");
snippet.log(JSON.stringify($.extend({}, myObject)));

// Copy itvar copy = Object.getOwnPropertyNames(myObject).reduce(function(result, name) {
  result[name] = myObject[name];
  return result;
}, {});

// View the copy (although actually, the result would look// the same either way)
snippet.log("Our copy operation with Object.getOwnPropertyNames does, though:");
snippet.log(JSON.stringify(copy));

// Prove that the copy's `title` really is just a plain property:
snippet.log("Before: copy.title = " + copy.title);
copy.title = "foo";
snippet.log("After:  copy.title = " + copy.title);

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --><scriptsrc="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Solution 2:

First of all, fix your syntax, though it probably is good in your actual code:

myObject = {
    id: "MyId",
    gettitle () { return myRepository.title; }
}

Now, to the answer. :)

You can just use a for..in loop to get all the properties, then save them as-is:

var newObj = {};
for (var i in myObject) {
    newObj[i] = myObject[i];
}

No jQuery, Angular, any other plugins needed!