How to turn nested js simple objects into Ember.js objects?

Question

If I have a nested set of simple old javascript objects (for example, that were returned from JSON), how can I use them in Ember.js objects (or at least to work with binding functionality)?

For example, if I have an object like:

var x = {
  bar: {
    baz: "quux"
  }
}

Then I turn this into an Ember object:

var y = Ember.Object.create(x);

Then setting the value to "baz" will not update any views that I have, because it is a regular js object, not an Ember object.

I know that I can just jump to object keys recursively and do Ember.Object.create all the way down, but is there an alternative approach?

Answer 1

, baz Ember.Object, , seter-aware setter. setPath().

:

var x = {
  bar: {
    baz: "quux"
  }
};
var y = Ember.Object.create(x);
y.setPath('bar.baz', 'foo');

jsFiddle, : http://jsfiddle.net/ebryn/kv3cU/

Answer 2

- , ( ).

:

import EmberObject from '@ember/object';
import { A } from '@ember/array';

function fromArrayToEmberArray(array) {
    const emberArray = A();
    array.forEach(function(item) {
        if (Array.isArray(item)) {
            emberArray.push(fromArrayToEmberArray(item));
        } else if (item && typeof item === 'object') {
            emberArray.push(fromObjectToEmberObject(item));
        } else {
            emberArray.push(item);
        }
    });
    return emberArray;
}

function fromObjectToEmberObject(pojo) {
    const emberObject = EmberObject.create();

    for (const key in pojo) {
        const keyObject = pojo[key];
         if (Array.isArray(keyObject)) {
            emberObject.set(key, fromArrayToEmberArray(keyObject))
        } else if (keyObject && typeof keyObject === 'object') {
            emberObject.set(key, fromObjectToEmberObject(keyObject))
        } else {
            emberObject.set(key, keyObject);
        }
    }

    return emberObject;
}

export default {fromObjectToEmberObject};

Answer 3

Here is my version:

import { typeOf } from '@ember/utils'
import EmberObject from '@ember/object'

export default function deepEmberObject(anything) {
  if (typeOf(anything) === 'array') {
    return anything.map(a => deepEmberObject(a))
  } else if (typeOf(anything) === 'object') {
    let converted = Object.keys(anything).reduce((acc, k) => {
      acc[k] = deepEmberObject(anything[k])
      return acc
    }, {})
    return EmberObject.create(converted)
  } else {
    return anything
  }
}

test:

import deepEmberObject from 'zipbooks/utils/deep-ember-object'
import { module, test } from 'qunit'

module('Unit | Utility | deep-ember-object', function() {
  test('it works', function(assert) {
    let result = deepEmberObject({ pandas: [{ id: 3, children: [{ name: 'Bobby', features: { weight: 3 } }] }] })
    assert.equal(
      result
        .get('pandas')[0]
        .get('children')[0]
        .get('features')
        .get('weight'),
      3
    )
  })
})