Question

The JSONP proxy is largely working for me, but I need to set properties of a model based on some nested properties in the JSON response. I can’t figure how to do this without extending the Reader class, but thought there might be an easier way that I’m just missing.

My Recipe model:

Ext.define('NC.model.Recipe', {
  extend: 'Ext.data.Model',
  config: {
    fields: [
      { name: 'name', type: 'string' },
      { name: 'image', type: 'string' },
      { name: 'preparationText', type: 'string' },
      { name: 'ingredientsText', type: 'string' },
      { name: 'servings', type: 'string' }
    ]
  }
});

My Store:

Ext.define('NC.store.Recipes', {
  extend: 'Ext.data.Store',

  config: {
    model: 'NC.model.Recipe',
    storeId: 'Recipes',
    proxy: {
      type: 'jsonp',
      url: 'http://anExternalSite.com/api',
      callbackKey: 'callback',
      filterParam: 'text',
      extraParams: {
        type: 'Recipe'
      },
      reader: {
        type: 'json',
        idProperty: 'uuid',
      }
    }
  }
});

The JSON format:

[
  {
    uuid: "/UUID(XXXX)/",
    name: "Spicy Peanut Noodle Salad",
    image: "http://someplace.com/noodle-salad.jpg",
    properties: {
      preparationText: "Make it all nice and stuff",
      ingredientsText: "Heaps of fresh food",
      servings: "serves 4",
    }
  },
  { ... },
  { ... }
]

I would like those 3 ‘properties’ – preparationText, ingredientsText, and servings, to be placed in the model, but currently only id, name, and image are. What is the method to make this work? If it does involve extending the Reader class, some direction would be great.

Thanks.

Answer 1

You can change your code like this to access nested values

{ name: 'preparationText', type: 'string', mapping: 'properties.preparationText' },

This mapping path should start excluding the root element.