What is the best way to denote arrays in ember-data models?

Question

What is the best way to denote arrays in ember-data models?

When dealing with an array in a model, is it essential to use DS.hasMany pointing to a DS.Model, even if the array elements are not actual models with IDs or endpoints? Is there a more efficient alternative?

Despite using DS.hasMany with { embedded: true }, I am encountering a 404 error on my extended DS.RESTAdapter without ever calling find. The following error message, which seems to be linked to this particular model, appears for the first time:

Uncaught Error: assertion failed: Emptying a view in the inBuffer state is not allowed and should not happen under normal circumstances. Most likely there is a bug in your application. This may be due to excessive property change notifications. ember-latest.js:43

What does this error mean and what might be causing it?

Here's the stack trace:

[Stack Trace Here]

Any assistance would be appreciated.

Update: Referencing this example from the Ember Data documentation: This fiddle, it works with modeled objects as shown in the docs. However, how can similar objects be represented if they are not real models (i.e., do not have IDs)?

javascript ember.js ember-data

Answer 1

Answer №1

Working through the challenge, I managed to make it work by incorporating various answers from this post.

To start off, you need to establish a transform for the new data type "array":

DS.ArrayTransform = DS.Transform.extend({
  deserialize: function(serialized) {
    return (Ember.typeOf(serialized) == "array")
        ? serialized 
        : [];
  },

  serialize: function(deserialized) {
    var type = Ember.typeOf(deserialized);
    if (type == 'array') {
        return deserialized
    } else if (type == 'string') {
        return deserialized.split(',').map(function(item) {
            return jQuery.trim(item);
        });
    } else {
        return [];
    }
  }
});

App.register("transform:array", DS.ArrayTransform);

Next, simply use it in your model as another attribute:

App.myModel = Ember.Model.extend({
    name : DS.attr('string'),
    cont : DS.attr('array')
}

With that, we're all set. Just remember, when adding elements to the array, utilize pushObject.

In a controller:

this.get('model.cont').pushObject('new Item');

Answer 2

Working through the challenge, I managed to make it work by incorporating various answers from this post.

To start off, you need to establish a transform for the new data type "array":

DS.ArrayTransform = DS.Transform.extend({
  deserialize: function(serialized) {
    return (Ember.typeOf(serialized) == "array")
        ? serialized 
        : [];
  },

  serialize: function(deserialized) {
    var type = Ember.typeOf(deserialized);
    if (type == 'array') {
        return deserialized
    } else if (type == 'string') {
        return deserialized.split(',').map(function(item) {
            return jQuery.trim(item);
        });
    } else {
        return [];
    }
  }
});

App.register("transform:array", DS.ArrayTransform);

Next, simply use it in your model as another attribute:

App.myModel = Ember.Model.extend({
    name : DS.attr('string'),
    cont : DS.attr('array')
}

With that, we're all set. Just remember, when adding elements to the array, utilize pushObject.

In a controller:

this.get('model.cont').pushObject('new Item');

Answer 3

Answer №2

My approach involves using a custom raw transform, specifically designed for ember-data revision 11:

DS.RESTAdapter.registerTransform('raw', {
    deserialize: function(serialized) {
        return serialized;
    },  
    serialize: function(deserialized) {
        return deserialized;
    }   
});

After defining the transform, I incorporate it within a model like this:

App.MyModel = Ember.Model.extend({
    anArray: DS.attr('raw')
});

This allows me to utilize the anArray attribute as a standard array throughout my application.

Answer 4

My approach involves using a custom raw transform, specifically designed for ember-data revision 11:

DS.RESTAdapter.registerTransform('raw', {
    deserialize: function(serialized) {
        return serialized;
    },  
    serialize: function(deserialized) {
        return deserialized;
    }   
});

After defining the transform, I incorporate it within a model like this:

App.MyModel = Ember.Model.extend({
    anArray: DS.attr('raw')
});

This allows me to utilize the anArray attribute as a standard array throughout my application.

Answer 5

Answer №3

Illustrated below is a demonstration of constructing a personalized array type in Ember-Data (version 10):

DS.CustomArray.array =

  # If the outgoing json is already a valid javascript array
  # then pass it through as is. In all other cases, substitute it
  # with an empty array. This results in null or undefined values
  # automatically transforming into empty arrays during serialization.

  serialize: (jsonData)->
    if Em.typeOf(jsonData) is 'array' then jsonData else []


  # If the incoming data is a javascript array, pass it along.
  # If it is a string, convert it into an array by splitting
  # it based on commas and removing whitespace from each element.
  # Otherwise, return an empty array, turning all other data types
  # (including nulls and undefined values) into empty arrays.

  deserialize: (externalData)->
    switch Em.typeOf(externalData)
      when 'array'  then return externalData
      when 'string' then return externalData.split(',').map((item)-> jQuery.trim(item))
      else               return []

You can now apply the custom type to a model attribute:

App.WeeklySchedule = DS.Model.extend
  selected_days = DS.attr('array')

Upon fetching a record with:

App.WeeklySchedule.find(1)

both forms of incoming JSON records will be deserialized correctly into an Array:

{ selected_days: ['Monday', 'Tuesday', 'Saturday'] }

or

{ selected_days: 'Monday, Tuesday, Saturday' }

Answer 6

Illustrated below is a demonstration of constructing a personalized array type in Ember-Data (version 10):

DS.CustomArray.array =

  # If the outgoing json is already a valid javascript array
  # then pass it through as is. In all other cases, substitute it
  # with an empty array. This results in null or undefined values
  # automatically transforming into empty arrays during serialization.

  serialize: (jsonData)->
    if Em.typeOf(jsonData) is 'array' then jsonData else []


  # If the incoming data is a javascript array, pass it along.
  # If it is a string, convert it into an array by splitting
  # it based on commas and removing whitespace from each element.
  # Otherwise, return an empty array, turning all other data types
  # (including nulls and undefined values) into empty arrays.

  deserialize: (externalData)->
    switch Em.typeOf(externalData)
      when 'array'  then return externalData
      when 'string' then return externalData.split(',').map((item)-> jQuery.trim(item))
      else               return []

You can now apply the custom type to a model attribute:

App.WeeklySchedule = DS.Model.extend
  selected_days = DS.attr('array')

Upon fetching a record with:

App.WeeklySchedule.find(1)

both forms of incoming JSON records will be deserialized correctly into an Array:

{ selected_days: ['Monday', 'Tuesday', 'Saturday'] }

or

{ selected_days: 'Monday, Tuesday, Saturday' }

Answer 7

Answer №4

With the release of Ember Data 1.0.0 Beta, developers now have the opportunity to create a personalized transform "subclass". This can be thought of as an expanded DS.Transform entity.

DS.ArrayTransform = DS.Transform.extend({
    deserialize: function(deserialized) {
        // ...
        return deserialized;
    },

    serialize: function(serialized) {
        // ...
        return serialized;
    }
});

App.register('transform:array', DS.ArrayTransform);

Answer 8

With the release of Ember Data 1.0.0 Beta, developers now have the opportunity to create a personalized transform "subclass". This can be thought of as an expanded DS.Transform entity.

DS.ArrayTransform = DS.Transform.extend({
    deserialize: function(deserialized) {
        // ...
        return deserialized;
    },

    serialize: function(serialized) {
        // ...
        return serialized;
    }
});

App.register('transform:array', DS.ArrayTransform);

Answer 9

Answer №5

In the event that you require a specialized data structure to communicate with your server, consider enhancing DS.attr.transforms and defining a new array codec.

Take a look at the source code of existing attribute codecs for guidance on how to implement your own. It serves as an excellent starting point for customization.

Answer 10

In the event that you require a specialized data structure to communicate with your server, consider enhancing DS.attr.transforms and defining a new array codec.

Take a look at the source code of existing attribute codecs for guidance on how to implement your own. It serves as an excellent starting point for customization.

Answer 11

Answer №6

Interestingly, all the other four responses to this inquiry share strikingly similar deserialize and serialize functions. This allows for a simplified approach:

import Ember from 'ember'
import DS from 'ember-data'

# It seems that these solutions were inspired by: http://stackoverflow.com/questions/12168570/how-to-represent-arrays-within-ember-data-models
# The key is to ensure that either deserialize or serialize always returns an array

toArray = (data) ->
  switch Ember.typeOf(data)
    when 'array'  then data
    when 'string' then JSON.parse(data)
    else []

export default DS.Transform.extend
  deserialize: toArray
  serialize: toArray

This code snippet utilizes ember-cli-coffees6 for Coffeescript with import/export functionality.

Answer 12

Interestingly, all the other four responses to this inquiry share strikingly similar deserialize and serialize functions. This allows for a simplified approach:

import Ember from 'ember'
import DS from 'ember-data'

# It seems that these solutions were inspired by: http://stackoverflow.com/questions/12168570/how-to-represent-arrays-within-ember-data-models
# The key is to ensure that either deserialize or serialize always returns an array

toArray = (data) ->
  switch Ember.typeOf(data)
    when 'array'  then data
    when 'string' then JSON.parse(data)
    else []

export default DS.Transform.extend
  deserialize: toArray
  serialize: toArray

This code snippet utilizes ember-cli-coffees6 for Coffeescript with import/export functionality.

Answer 13

Answer №7

Arriving a bit tardy to the party, but I stumbled upon this jFiddle showcasing a straightforward way to declare a new array codec.

Check it out here!

Answer 14

Arriving a bit tardy to the party, but I stumbled upon this jFiddle showcasing a straightforward way to declare a new array codec.

Check it out here!

What is the best way to denote arrays in ember-data models?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Is there a way to reset a state without needing to declare an initialState beforehand?

Error encountered: attempting to build for the iOS Simulator, although linking a dylib compilation specifically for iOS, such as the file 'TitaniumKit.framework/TitaniumKit' for the arm64 architecture

Attempting to simulate the behavior of nfcManager by utilizing the nfcManager.start() function in react native testing library

Importance of value attribute in <input ng-model ..>

What steps can be taken to ensure that any new elements generated by JavaScript do not disappear upon refreshing the page

Angular Js powered admin control panel

Utilize JavaScript to Replace KeyPress Event on Input Field

Error message: 'Encountered issue with react-router-V4 and the new context API in React

Is there a way to transpile a dependency within the node_modules directory when using Nuxt 2?

Next.js page transitions causing Google Tag Manager to malfunction with 'react-gtm-module'

Arranging serialized information from a tabular format and retrieving specific data

Utilizing Ajax to Invoke Wordpress Functions from a Client's Browser

displaying data once "other" is chosen from a dynamic chart

Challenges faced when dealing with MongoDB and the latest version of webpack

The Ubiquity CmdUtils.setSelection function does not support replacing HTML code

Having trouble locating an element on a webpage? When inspecting the element, are you noticing that the HTML code differs from the source page?

Transmitting a JSON string to my backend system to insert into my database, but unfortunately, no data is being added

Using $npm_package_ notation to retrieve information about the version of a private package

Is Next.js Dynamic Routing Failing You?

transforming a div to behave similarly to an iframe