Inkrementieren Sie den Wert aller Elemente in einem JSON-Array und zeigen Sie ihn mit Polymer-Komponenten an.

Question

Ich habe eine JSON-Datei (enthält ein Integer-Array), an die ich eine <iron-ajax> Anfrage senden und die Antwort abrufen. Ich möchte die Antwort (ein Integer-Array) verarbeiten und alle Werte im Integer-Array bei einem Klick um eins erhöhen.

Jedes Mal, wenn ich auf die Schaltfläche klicken, sollten sie den Wert von 1.

Mein Element Vorlage erhöhen:

<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 */ 

Mein Polymer Definition:

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; 
    } 
}); 

Meine JSON-Datei:

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

Answer 1

Empfohlene Schritte:

1. ein <button> erstellen, die einen click -Handler haben, die die Werte von _simpleDataValuesA.data.values modifiziert:

   <button on-click="_incrementValues">Increment</button> 
   

2. in Ihrem Skript zu definieren, dass click -Handler wie folgt (Hinweis: Wir verwenden Array.prototype.map, um jeden Wert zu aktualisieren e im Array):

   _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. aktualisieren <template> Ihr Element ist wie dies die Array-Werte anzuzeigen:

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

demo