0

I need to update a UI to polymer 3 and the received data is converted from XML to json before it reached the client.

on the client side, I am using Polymer3 template to pass the values to underlying polymer elements.

as the XML is storing the values in the attributes, My json comes back as follows.

{
    @type: "filter",
    @target: "somevalue1",
    @operator: "=",
    @value: "4458"
},
{
    @op: "Or",
    @type: "filter",
    @target: "somevalue2",
    @operator:  "=",
    @value: "4828"
},
{
    @op: "Or",
    @type: "filter",
    @target: "somevalue3",
    @operator: "=",
    @value: "2428"
}

now, when I pass this property into my polymer 3 template as with indexing, it considers the whole thing as text and displays on the screen.

{{item['@op']}}

is displayed on the screen as is. Also, I cannot use it as follows

{{item.@op}}

I do not know if @ is considered as code but the whole text incuding the parenthesis {{}} is displayed on the screen.

How to handle these properties.

I cannot convert it into another readable object because the UI is already taking time to render due to the <\vaadin-select> and the json is going to repeat itself inside it nested.

Hari Krishna Gaddipati
  • 195
  • 2
  • 17
  • I am not sure how polymer interpolation works, but`item['@op']` is valid syntax to access an object property. [A comment from this thread](https://stackoverflow.com/questions/30534940/polymer-access-polymer-element-objects) suggests you to listen to `polymer-ready` event. Perhaps, that's what you're missing? – choz Mar 14 '19 at 19:50
  • 2
    item['@op'] might not work in dom-repeat but Works in handleResponse function()... Try to assign response obj value to this., this.opVal= item['@op'] .... And render html., Bind value ... [[opVal]] – shabarinath Apr 20 '19 at 12:30
  • @shabarinath was right. I had to convert my component to LitElement so that I can handle it in the DOM template. – Hari Krishna Gaddipati May 07 '19 at 17:31
  • @HariKrishnaGaddipati ., perhaps can you upvote my comment or can you accept my answer – shabarinath Sep 07 '19 at 03:18
  • @shabarinath, you should repost your comment as an answer so people can spot it more easily. – Nate Oct 21 '21 at 16:50

1 Answers1

0

Reposting my comment as answer for better view

item['@op'] might not work in dom-repeat but Works in handleResponse function()

Try to assign response obj value to this,

i.e. this.opVal= item['@op'] and in render html., Bind value as [[opVal]]

shabarinath
  • 548
  • 3
  • 18