Accessing a value of an Object in an Array nested in an Object with Polymer

Question

I am sorry for this unclear title

The Problem
I have a data Object with an Array of contacts that holds several Objects inside it. Unfortunately I am unable to access the value's of the nested Object.

A answer to a similar question found here explains how to access it in JavaScript. response.data.contacts[1].value However, using Polymer just prints the code instead of retrieving the value. I believe that the problem comes from the square brackets I use inside my binding. {{response.data.contacts[1].value}}

Below I added my data to clarify what I mean by value of object inside an object with an array as this is a bit confusing. I want to access just the value inside the contacts array and not iterate over all of them

{
  "data": {
    "contacts": [
     {
      "id": 259,
      "user_id": 248,
      "type": "phone",
      "value": "+1 (946) 315-2819",
      "created_at": "2016-08-24 18:12:30",
      "updated_at": "2016-10-24 13:03:33",
      "deleted_at": null
     },
     {
      "id": 260,
      "user_id": 248,
      "type": "phone",
      "value": "+1-979-427-7971",
      "created_at": "2015-12-08 04:10:19",
      "updated_at": "2016-10-24 13:03:33",
      "deleted_at": null
     },
    ]
  },
}

Could you please add the code for the part that creates the `response` variable? — polarise, Oct 26 '16 at 14:18

score 1 · Accepted Answer · answered Oct 26 '16 at 16:22

To bind to a subproperty of an array item, use an array item path like this:

{{response.data.contacts.1.value}}

HTMLImports.whenReady(() => {
  "use strict";

  Polymer({
    is: 'x-foo',
    properties: {
      response: {
        type: Object,
        value: () => ({
          "data": {
            "contacts": [{
              "id": 259,
              "user_id": 248,
              "type": "phone",
              "value": "+1 (946) 315-2819",
              "created_at": "2016-08-24 18:12:30",
              "updated_at": "2016-10-24 13:03:33",
              "deleted_at": null
            }, {
              "id": 260,
              "user_id": 248,
              "type": "phone",
              "value": "+1-979-427-7971",
              "created_at": "2015-12-08 04:10:19",
              "updated_at": "2016-10-24 13:03:33",
              "deleted_at": null
            }, ]
          },
        })
      }
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <span>{{response.data.contacts.1.value}}</span>
    </template>
  </dom-module>
</body>

codepen

I was sure that i tried that but I must have had some mistake in it. Thanks @tony19! — Niklas, Oct 27 '16 at 14:41

Accessing a value of an Object in an Array nested in an Object with Polymer

1 Answers1