mercredi 6 décembre 2017

EmberJS: How am I supposed to define my highly embedded JSON relationship?

I have been struggling with EmberData and using the EmbeddedRecordsMixin to define a particular model relationship I'm using. I have complete control over both the server and Ember application, so I know I can change the format to make this work, but I don't know the right way to get what I want.

I have a model called mealplan which contains an embedded array of recipe ids, which I want to be loaded automatically by Ember's hasMany functionality.

Here is the structure of my data returned by my server:

meal_plan: {
      week: {
        1: { day: {
            0: { breakfast: [Number], lunch: [Number], dinner: [Number], snack: [Number] },
            1: { breakfast: [Number], lunch: [Number], dinner: [Number], snack: [Number] },
            2: { breakfast: [Number], lunch: [Number], dinner: [Number], snack: [Number] },
            3: { breakfast: [Number], lunch: [Number], dinner: [Number], snack: [Number] },
            4: { breakfast: [Number], lunch: [Number], dinner: [Number], snack: [Number] },
            5: { breakfast: [Number], lunch: [Number], dinner: [Number], snack: [Number] },
            6: { breakfast: [Number], lunch: [Number], dinner: [Number], snack: [Number] }
          } },
        2: { day: {
            0: { breakfast: [Number], lunch: [Number], dinner: [Number], snack: [Number] },
            1: { breakfast: [Number], lunch: [Number], dinner: [Number], snack: [Number] },
            2: { breakfast: [Number], lunch: [Number], dinner: [Number], snack: [Number] },
            3: { breakfast: [Number], lunch: [Number], dinner: [Number], snack: [Number] },
            4: { breakfast: [Number], lunch: [Number], dinner: [Number], snack: [Number] },
            5: { breakfast: [Number], lunch: [Number], dinner: [Number], snack: [Number] },
            6: { breakfast: [Number], lunch: [Number], dinner: [Number], snack: [Number] }
          } },
      }
}

and here is how I want this relationship to look like in Ember:

week: {
        1: { day: {
            0: { breakfast: DS.hasMany('recipe'), lunch: DS.hasMany('recipe'), dinner: DS.hasMany('recipe'), snack: DS.hasMany('recipe') },
            1: { breakfast: DS.hasMany('recipe'), lunch: DS.hasMany('recipe'), dinner: DS.hasMany('recipe'), snack: DS.hasMany('recipe') },
            2: { breakfast: DS.hasMany('recipe'), lunch: DS.hasMany('recipe'), dinner: DS.hasMany('recipe'), snack: DS.hasMany('recipe') },
            3: { breakfast: DS.hasMany('recipe'), lunch: DS.hasMany('recipe'), dinner: DS.hasMany('recipe'), snack: DS.hasMany('recipe') },
            4: { breakfast: DS.hasMany('recipe'), lunch: DS.hasMany('recipe'), dinner: DS.hasMany('recipe'), snack: DS.hasMany('recipe') },
            5: { breakfast: DS.hasMany('recipe'), lunch: DS.hasMany('recipe'), dinner: DS.hasMany('recipe'), snack: DS.hasMany('recipe') },
            6: { breakfast: DS.hasMany('recipe'), lunch: DS.hasMany('recipe'), dinner: DS.hasMany('recipe'), snack: DS.hasMany('recipe') },
        } },
        2: { day: {
            0: { breakfast: DS.hasMany('recipe'), lunch: DS.hasMany('recipe'), dinner: DS.hasMany('recipe'), snack: DS.hasMany('recipe') },
            1: { breakfast: DS.hasMany('recipe'), lunch: DS.hasMany('recipe'), dinner: DS.hasMany('recipe'), snack: DS.hasMany('recipe') },
            2: { breakfast: DS.hasMany('recipe'), lunch: DS.hasMany('recipe'), dinner: DS.hasMany('recipe'), snack: DS.hasMany('recipe') },
            3: { breakfast: DS.hasMany('recipe'), lunch: DS.hasMany('recipe'), dinner: DS.hasMany('recipe'), snack: DS.hasMany('recipe') },
            4: { breakfast: DS.hasMany('recipe'), lunch: DS.hasMany('recipe'), dinner: DS.hasMany('recipe'), snack: DS.hasMany('recipe') },
            5: { breakfast: DS.hasMany('recipe'), lunch: DS.hasMany('recipe'), dinner: DS.hasMany('recipe'), snack: DS.hasMany('recipe') },
            6: { breakfast: DS.hasMany('recipe'), lunch: DS.hasMany('recipe'), dinner: DS.hasMany('recipe'), snack: DS.hasMany('recipe') },
        } },
}

This hasMany> relationship obviously doesn't work because it's not defined at the top level. My recipe model is simple enough:

export default DS.Model.extend({
  instructions: DS.attr('string'),
  name: DS.attr('string'),
  cooking_time: DS.attr('string'),
  recipe_yield: DS.attr('string'),
  featured_image: DS.attr('string'),
  ingredients: DS.attr(),
  program_phase: DS.attr(),
  meal_types: DS.attr()
});

The goal with this structure is to display a list of recipes for a given week of the user's meal plan, such that something like:

mealplan.week["1"].day["0"].breakfast
mealplan.week["1"].day["0"].lunch
mealplan.week["1"].day["0"].dinner
mealplan.week["1"].day["0"].snack

will display my recipe models.

Mainly I am confused about how to properly embed the recipe ids using the structure I need. After reading through the JSON-API spec and looking at its relationships object specification, I don't think my data can be formatted according to the proper spec. Like I said at the beginning, I have complete control over the server so I can change the structure of my data in order to better comply with JSON-API specifications if that's what I need to do.




Aucun commentaire:

Enregistrer un commentaire