Accessing JSON array element in Polymer 0.9

[Thad Humphries]

I can use iron-ajax with Polymer 0.9.0-rc1 to retrieve a JSON object and display a value in the template like so:

<dom-module id="my-element">

  <template>

    <iron-ajax url="http://api.openweathermap.org/data/2.5/weather?type=accurate&units=imperial&cnt=1&q=Charlottesville"

auto last-response="{{resp}}"></iron-ajax>

    <textarea value="{{resp.main.temp}}"></textarea>

  </template>

</dom-module>

<script>

  Polymer({

    is: 'my-element',

    properties: {

      resp: { 

        type: Object 

      } 

    }

  });

</script>

This also works with a simple JSON object retrieved from a public HTML directory on my localhost. However I try to access an object in an array, I'm told the object is undefined. For example, if the JSON array contains two objects called "queries", <textarea value="{{resp.queries}}"></textarea> displays "[object Object],[object Object]". However if I attempt, <textarea value="{{resp.queries[0]}}"></textarea> or <textarea value="{{resp.queries[0].title}}"></textarea>, the displayed value is "undefined".

Am I doing something wrong? Is this a known shortcoming? Is there a work around?

[Eric Bidelman]

Use `resp.queries.0.title`. Right now, array notation is not supported in 0.9.

http://jsbin.com/fuziyo/1/edit?html,output

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/efbcd957-8429-4162-b05b-6a5bbd78a771%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Thad Humphries]

Thanks! I can now claim success in rewriting all the "Polymer in 10 Minutes" examples from 0.5 to 0.8 or 0.9. Whee!

[toma...@googlemail.com]

Hi,

I try to get sample data from a JSON file to fill my template with repeatable elements based on the original tutorial (with post-service) and the new sample on the 1.0 homepage (friend-list).
My JSON looks like that:

[
  {
    "address": {
      "Value": "ip:port",
      "Generation": xyz,
      "Version": 123
    },
    "alive": {
      "Value": "false",
      "Generation": xyz,
      "Version": 123 
    },
    "name": {
      "Value": "foo",
      "Generation": xyz,
      "Version": 123
    },
    "version": {
      "Value": "2015.06.01.009",
      "Generation": xyz,
      "Version": 123
    }
  }
]

Now I tried to create a data-provider (like post-service from first tutorial) in the following way

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-ajax/iron-ajax.html">
<polymer-element name="data-provider" attributes="states">
      <iron-ajax
         auto
         url="application-states.json"
         last-response="{{statesLoaded}}"
         handleAs="json"
         debounce-duration="300"
         verbose="true">
      </iron-ajax>
  </template>
  <script>
Polymer('data-provider', {
  created: function() {
    this.states = [];
  },
  statesLoaded: function() {
    // Make a copy of the loaded data
    this.states = this.$.ajax.response.slice(0);
  },
});
</script>

and my custom element which uses the provider

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="data-provider.html">

<dom-module id="application-states">
  <template>
     <template is="dom-repeat" items="{{states}}">
        <application-state name="{{item.address}}"
                           value="{{item.value}}"
                           generation="{{item.generation}}"
                           version="{{item.version}}">
        </application-state>
      </template>
  </template>

Unfortunately I get the following JS error, when previewing the element with polyserve.

mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]]
TypeError: prototype.registerCallback is not a function

Any suggestions?

Thx in advance

[Robert Simon]

Hi Thomas,

first decide if you are writing old polymer element with polymer-element as you are using in "data-provider", or new 1.0 with dom-module and keep them version compatible.

Than mby debugging will be easier.

And yes, immutable data is good practice.

Regards

Robert

[Thomas Kuchs]

Hi Robert,

thx for your reply. I want to use Polymer 1.0 and changed the datat-provider. Unfortunately I can't get it to work.

data-provider looks this way right now:

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-ajax/iron-ajax.html">

<dom-module id="data-provider" is="dom-bind">
    <template>

        <iron-ajax
           auto
           url="application-states.json"
           last-response="{{statesLoaded}}"

           handle-as="json"

           verbose="true">
        </iron-ajax>
    </template>
    <script>

     Polymer({
      is: 'data-provider',
      properties: {
        states: {
          type: Array,
          value:  function() { return []; }

        }
      },
      statesLoaded: function() {
        // Make a copy of the loaded data
        this.states = this.$.ajax.response.slice(0);

        console.log('states loaded ' + this.ajaxResponse);
      }
    });
  </script>
</dom-module>

and the template like this

<link rel="import" href="../polymer/polymer.html">

<link rel="import" href="../application-state/application-state.html">

<link rel="import" href="data-provider.html">

<dom-module id="application-states">
  <template>

     <data-provider id="provider" states="{{states}}"></data-provider>

     <template is="dom-repeat" items="{{states}}">

         <template is="dom-repeat" items="{{item.address}}">

            <application-state name="{{item.address}}"
                               value="{{item.value}}"
                               generation="{{item.generation}}"
                               version="{{item.version}}">
            </application-state>
         </template>
      </template>

  </template>
  <script>
    Polymer({
      is: 'application-states'
    });
  </script>
</dom-module>

So at the moment there are no more JS errors, but the preview stays empty. So I guess the data-binding between provider and template doesn't work.
I don't know why.

Could someone have a look?
Thanks

[Thomas Kuchs]

And by the way I can't see my console logging (states loaded) either, so it seems the provider doesn't run properly.

[Thomas Kuchs]

Hey Guys,

I figured it out.

This one work's now

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-ajax/iron-ajax.html">
<dom-module id="data-provider" is="dom-bind">
    <template>
        <iron-ajax
           auto

           id="ajax"
           url="application-states.json"
           on-response="statesLoaded"
           handle-as="json"
           verbose="true"
           debounce-duration="300">

        </iron-ajax>
    </template>
    <script>
     Polymer({
      is: 'data-provider',
      properties: {
        states: {
          type: Array,
          value:  function() { return []; }
        }
      },
      statesLoaded: function() {
        // Make a copy of the loaded data

        this.states = this.$.ajax.lastResponse;
      }
    });
  </script>
</dom-module>

and using it in the template

<data-provider id="provider"></data-provider>

If I iterate through my states now with some for-loops to get the keys and values of the objects and arrays I get the right console output

for (var key in this.states) {
    for (var key2 in this.states[key]) {
        for (var key3 in this.states[key][key2]) {
            var value = this.states[key][key2][key3]
            console.log(key+":"+key2+":"+key3+":"+value);
        }
    }
}

"0:address:Value:ip:port"
"0:address:Generation:1433177415"
"0:address:Version:123"
"0:alive:Value:false"
"0:alive:Generation:1433177415"
"0:alive:Version:123"
"0:name:Value:foo"
"0:name:Generation:1433177415"
"0:name:Version:123"
"0:version:Value:2015.06.01.009"
"0:version:Generation:1433177415"
"0:version:Version:123"

So with the fact, that I don't know the key or rather the second key is different how can I handle this inside my template with dom-repeat?
Any ideas?

Thx in adnvance.

[Anandhi Subramani]

Hi am trying to rean an external json file as response to an ajax call. But am not able to display the value from json in template using binding. Am using polymer 1.0

<template>

<iron-ajax

             auto

             url:"http://localhost:3000/input.json",

             method:'GET',

             dataType: "json",

             last-response="{{ajaxResponse}}">

          </iron-ajax>

          <textarea value="{{ajaxResponse.degree}}"></textarea>

  </template>

<script>

    Polymer({

      is: 'gauge-ajax'

      },

      ajaxResponse: function(request) {

          console.log(request.detail.response);

          console.log(this.$.ajax.lastResponse);

        }

</script>

The text area displaye "undefined"

[Daniel Llewellyn]

On 20/08/2015 10:02, Anandhi Subramani wrote:
> Hi am trying to rean an external json file as response to an ajax
> call. But am not able to display the value from json in template using
> binding. Am using polymer 1.0

From your code it's probably dying before assigning the variable because
you've got incorrect javascript syntax in your Polymer() call, which is
likely causing all javascript to stop running.

> <template>
> <iron-ajax
> auto
> url:"http://localhost:3000/input.json",
> method:'GET',
> dataType: "json",
> last-response="{{ajaxResponse}}">

You're assigning the value of the response to a variable named
identically to a function that already exists. The resultant behaviour
as far as I can tell is undefined, but will probably overwrite the
function (effectively deleting the function from memory). To use
ajaxResponse as a function you need to change the above to rename or
remove the assigned variable and add an on-ajax-response="ajaxResponse"
attribute. Don't forget to alter the textarea definition for the updated
variable name below.

> </iron-ajax>
> <textarea value="{{ajaxResponse.degree}}"></textarea>
> </template>
>
> <script>
> Polymer({
> is: 'gauge-ajax'

The next two characters are incorrect for Polymer 1.0, which only has
one argument to the Polymer function,
> },
so, remove the curly bracket but leave the comma (you can move the comma
onto the end of the is: line if it looks more neat).
> ajaxResponse: function(request) {
> console.log(request.detail.response);
> console.log(this.$.ajax.lastResponse);
> }
You now need to close the function request and object argument with
"});" without the quotes.
> </script>