Ember.js: support for dots in json keys

[MacFlecknoe]

Ember.js doesnt seem to support json objects with dots in the objects attribute names (e.g.):

{ "ns1.id" : 14, "ns2.name" : "mike" };

Is this an omission or am i overlooking something? We have services that we are required to consume that support namespaces in this way.

[stefanpenner]

ember does not support this, it assumes a dot is an additional traversal to a deeper object.

[MacFlecknoe]

Thanks Stefan. What would you recommend as the best approach to dealing with the above? Are there plans to add this kind of support akin to handllebars "segment-literal" notation?

[stefanpenner]

I am not familiar with what that is.

I am doubtful that we will be able to support this throughout the framework in the short term. I suspect adding a transform on the boundaries of the app to take the . and convert them to some other character will yield the quickest fix

It apparently doesn't come up to often that we run into this. But maybe it's worth considering some holistic solution

[MacFlecknoe]

Thanks again Stefan. The handlebars documentation for their approach is located here:

http://handlebarsjs.com/expressions.html

In a nutshell it allows you to access the json above using the following syntax:

{{[nd.id]}}

The namespace problem has to be somewhat common as all of the major java web service frameworks and XML to JSON serializers default to marshalling/unmarshalling XML namespaces using the dot notation outlined above. I would really love to see a solution.

[stefanpenner]

I suspect naively we could add support in templates and in get. I'm concerned about other edge cases.

I'll bring it up at this weeks core team meeting

[MacFlecknoe]

Wonderful. Please keep me informed!

[matsmith]

+1
I have also recently come across this issue. I think the community could benefit greatly from this being part of the framework.

[herom]

What about using something like a serializer which is able to transform a dotted into a dashed key and vice versa?

[stefanpenner]

What about using something like a serializer which is able to transform a dotted into a dashed key and vice versa?

ya this was a thought i had as well, it would simplify the problem but keeping it at the edges

[lodalo]

From http://jsonapi.org/format
"Each key is a dot-separated path that points at a repeated relationship"
example:
"posts.author": {

So I think "Ember" is able to read similar properties, but it uses the rest serializer to read and convert the data for the model.

"JSON API is extracted from the JSON transport implicitly defined by Ember Data's REST adapter.
In general, Ember Data's goal is to eliminate the need for ad-hoc code per application to communicate with servers that communicate in a well-defined way."

[rwjblue]

I think we should avoid changing Ember.get to support this, and suggest that folks having to deal with API's with this structure use a transformation layer to convert the source format into something that works.

[k3n]

The irony to me is that it's Ember that is creating a dotted property name (route param/name) for which the Ember.get() functionality fails (this is probably the same underlying problem as #10838).

And of course, there are additional use-cases outside of the Ember API, but it's less surprising when those don't work as expected.

Unfortunately, not even escaping the data with \. works, nor any other method that I can find.

[locks]

@k3n in your Twiddle it's your code that defines the 'dynamicForm.show' property with a dot in the name, am I misunderstanding?

[k3n]

@locks 'dynamicForm.show' is from a nested route in which I was needing to access the params.

Regardless, my point is that sometimes your object keys may use a dot, and whether it originates from Ember or not is ultimately inconsequential -- I just pointed it out because it was ironic in the context of this conversation that "those API's" was actually Ember itself. The fact that Ember doesn't support property keys with dots is troubling in light of no other means of interacting with these objects via a standard API.

[qarthandgi]

I had this issue while using dots in an EmberObject property key name.

While it seems that there won't be a resolution to this, it is quite disturbing that this is even an issue. To be suggesting a _transformation_ to solve this issue isn't in the realm of reasonable. This is a design flaw in Ember.js, and simply pushing aside those who need to support this is not acceptable. The best solution to this is suggesting other frameworks for future use to clients and coworkers.

[chancancode]

@qarthandgi was that tone really necessary?

Anyway. To answer your question, you don’t really need .get anymore so you can just do foo[“bar.baz”] if you need to.

We _could_ make .get support dots in property name, perhaps with a syntax like foo.get(“bar\.baz”). But doing that is not free, get is (was?) a really hot path, and support this would require much more sophisticated parsing which adds up very quickly across all the calls in an app.

I think even you would agree that property names with dots are rather uncommon, so having to pay that penalty across the whole app just so this could work in the few spots they need to is not going to be acceptable either.

[ruckc]

So, this is kinda annoying.

I've got two use-cases where in handlebars I need to access a nested object with a dotted key; in one case, i'm iterating through all keys, and trying to display the values. In the 2nd case I have a specific hardcoded key.

The JSON document is externally provided, the app's job is to visualize it, and let a reviewer edit it, before sending it back to the external system.

In handlebars, though I can't access the key's value; not with any of these options:

{{get record.document 'some.key'}}
{{record.document[some.key]}}
{{record.document['some.key']}}

I don't really care if we don't modify get, maybe a secondary get helper, i.e. get-with-encoded-dots.

[k3n]

That sounds like a different issue (though I'm not positive), since that's handlebars.

Have you tried the with helper?

https://handlebarsjs.com/block_helpers.html

[ruckc]

@k3n - my testing https://ember-twiddle.com/b92cb0d082f3d3282fdaeea39e4cbb5f?openFiles=templates.application.hbs%2C

it definetly doesn't work and is the same symptoms. My solution is below, which i find extremely annoying that I had to write; although it is simple.

import { helper } from '@ember/component/helper';

export function getValue([object, key]) {
  return object[key];
}

export default helper(getValue);

[jsfuchs]

I just ran into this as a weird edge case where I'm rendering data coming from an API I don't really control. I'm fine with a workaround - @ruckc's solution seems good; would it make sense to put this edge case in as a disclaimer or side note on the "get" documentation?

https://api.emberjs.com/ember/release/classes/Ember.Templates.helpers/methods/get?anchor=get