增加JSON数组中所有元素的值,并使用Polymer组件显示它

时间:2017-03-16 14:12:25

标签: polymer polymer-1.0

我有一个JSON文件(包含一个整数数组),我向其发送<iron-ajax>请求并检索响应。我想处理响应(整数数组)并在按钮单击时将整数数组中的所有值递增1。

每次单击按钮时,它都应该将值增加1。

我的元素模板:

<iron-ajax
         url="/api/time-series/simple-data/4"
         last-response="{{_simpleDataValuesA}}"
         auto>
</iron-ajax>

<h1> /* Where I would like the entire updated array to be shown when I press the BUTTON to increment */

我的聚合物定义:

 Polymer({

    is: 'new-page',
    properties: {
        _simpleDataValuesA: {
            type: Object
        },
        _cal: {
            type: Array,
            computed: 'cal_incr(_simpleDataValuesA)'
        }
    },
    cal_incr:function(_simpleDataValuesA){
        var a = this._simpleDataValuesA.data.values[0];
        a.forEach(function increment(item,index,a) {
            a[index]+=1;
        })
        console.log('array -- >',a);
        console.log('this._simpleDataValuesA.data.values[0] -- >',this._simpleDataValuesA.data.values[0]);
        this._simpleDataValuesA.data.values[0]=a;

        return this._simpleDataValuesA.data.values;
    }
});

我的JSON文件:

{
  "id": 4,
  "data": {
    "labels": ["acvc","b","a","b","a"],
    "values": [[112,57,53,122,128,120,56]]  
  }
}

1 个答案:

答案 0 :(得分:1)

推荐步骤:

  1. 创建一个<button>,其click - 处理程序可修改_simpleDataValuesA.data.values的值:

    <button on-click="_incrementValues">Increment</button>
    
  2. 在您的脚本中,按如下方式定义click - 处理程序(注意:我们使用Array.prototype.map更新数组中的每个值):

    _incrementValues: function() {
      var a = this._simpleDataValuesA.data.values[0];
    
      // Update the array with incremented values
      this._simpleDataValuesA.data.values[0] = a.map(function(item) {
        return item + 1;
      });
    
      // Bypass Polymer's dirty-check (in order to notify the
      // data bindings) by assigning the property to an empty
      // object and then itself.
      var copy = this._simpleDataValuesA;
      this._simpleDataValuesA = {};
      this.set('_simpleDataValuesA', copy);
    }
    
  3. 更新元素的<template>以显示如下数组值:

    <ul>
      <template is="dom-repeat" items="[[_simpleDataValuesA.data.values.0]]">
        <li>[[item]]</li>
      </template>
    </ul>
    
  4. demo