title: Server callback happen 4 times instead of 1
body: <p>I noticed the below happen upon the execution of my call of the sever, what is the wrong thing here!</p>
  
  <pre class="lang-dart prettyprint-override"><code> getItems(){
      print('getItems');
      request = new HttpRequest();
      request.onReadyStateChange.listen(onData_getItems);
  
      request.open('POST', host+'/getItems');
      request.send(' ');  
  }
  
  onData_getItems(_){
     print('call');  // --&gt; printed 4 times!!
  
  if (request.readyState == HttpRequest.DONE &amp;&amp; request.status == 200) { 
      print('Data loaded successfully..';
      
      print(request.responseText);   // --&gt; printed 1 time!!
      for(Map item in JSON.decode(request.responseText)){
           LineItem..children.add(new OptionElement(value: item['Code'], data: item['Name']));
      }         
  } 
  else if (request.readyState == HttpRequest.DONE &amp;&amp;
    request.status == 0) { 
       print(&quot;could not connect to server, contact your admin&quot;);  
  }
  else print('something else');    // --&gt; printed 3 times
  </code></pre>
  <p>}</p>
  <p>the above is executed in my custom element:</p>
  <pre class="lang-dart prettyprint-override"><code>class getPurchaseLines extends HtmlElement {
      static final tag = 'get-POlines';
      factory getPurchaseLines() =&gt; new Element.tag(tag);
  
      var shadow, LineItem, LineQty, Lineprice, clsBtn;
  
      getPurchaseLines.created() : super.created() {    
            shadow = this.createShadowRoot();      
  
           LineItem = new SelectElement()
                 ..children.add(new OptionElement(value: '0', data:'Stock Code'));
  
            LineQty = new InputElement()..type='number'..placeholder='Qty'..style.width='50px';   
            Lineprice = new InputElement()..type='number'..placeholder='price'..style.width='50px';
  
            LineQty.onKeyUp.listen((e){if(LineQty.checkValidity() == false)LineQty.value='0';});
            Lineprice.onKeyUp.listen((e){if(Lineprice.checkValidity() == false)Lineprice.value='0';});
  
     shadow.host
              ..style.position='relative'
              ..style.display='inline-block'
              ..style.verticalAlign = 'top'
              ..style.backgroundColor = '#ffffff'
              ..style.boxShadow = '1px 1px 5px #333333'
              ..style.boxSizing = 'border-box'
              ..style.marginTop='2px'
              ..style.padding = '4px'
              ..style.paddingRight='30px'
              ..style.borderRadius='2px'
              ..style.fontSize='14px'  
              ..style.transition = 'all 0.2s ease-in'; 
     clsBtn
         ..onClick.listen((e)=&gt; this.remove())
         ..style.position='absolute'
         ..style.right = '5px'
         ..style.top = '5px'
         ..style.color = 'black'
         ..style.cursor = 'pointer'
         ..style.zIndex = '1'
         ..style.fontSize = '16px'
         ..style.fontWeight = 'solid'  
         ..classes.add('ion-close-circled')
         ..text='x'
         ;
  
      shadow.nodes..add(LineItem)..add(LineQty)..add(Lineprice)..add(clsBtn);
     }
  </code></pre>
  <p>which is called in my function as below:</p>
  <pre class="lang-dart prettyprint-override"><code>   Future fonixFuture() =&gt; new Future.value(true);                 
         for (var line in orderLines){               
                 fonixFuture()
                       .then((_)=&gt; LineDisplay = new getPurchaseLines())
                       .then((_)=&gt; LineDisplay.getItems())
                       .then((_)=&gt; this.parent.nodes.add(LineDisplay))
                       .then((_)=&gt;print(this.parent.nodes));
              }
  </code></pre>
  <p>and only the last element (LineDisplay) shows the correct getItem() results. for example if I've 4 lines, the LineDisplay is:</p>
  <ol>
  <li>printed &quot;call&quot; 16 times in the counsle</li>
  <li>display the element LineDisplay 4 times in the browser</li>
  <li>the items field in the first 3 'LineDisplay' is null, while the last one shows the items executed correctly.</li>
  </ol>
  <p>Attached illustration of the issue.</p>
  <p><img src="https://i.stack.imgur.com/kmfY0.png" alt="issue illustration" /></p>
  <h3>Update</h3>
  <p>After receiving answer, the 4 responses issue had been fixed, but still the output received in the last element only! the updated code is:</p>
  <pre class="lang-dart prettyprint-override"><code>    return Future.forEach(orderLines, (ol) {
           return fonixFuture()
               .then((_)=&gt;print(ol))
               .then((_)=&gt; LineDisplay = new getPurchaseLines())
               .then((_)=&gt; LineDisplay..getItems())
               .then((_)=&gt; this.parent.nodes.add(LineDisplay))
               .then((_)=&gt;print(this.parent.nodes));      
           });
  </code></pre>
  <p>the custom element is:</p>
  <pre class="lang-dart prettyprint-override"><code>part of fonix_client_library;
  
  class getPurchaseLines extends HtmlElement {
    static final tag = 'get-POlines';
    factory getPurchaseLines() =&gt; new Element.tag(tag);
  
    var shadow, LineItem, LineQty, Lineprice;
  
    getPurchaseLines.created() : super.created() {    
        shadow = this.createShadowRoot();      
        LineItem = new SelectElement()
          ..children.add(new OptionElement(value: '0', data:'Stock Code'));
  
        LineQty = new InputElement()..type='number'..placeholder='Qty'..style.width='50px';   
        Lineprice = new InputElement()..type='number'..placeholder='price'..style.width='50px';
  
        LineQty.onKeyUp.listen((e){if(LineQty.checkValidity() == false)LineQty.value='0';});
        Lineprice.onKeyUp.listen((e){if(Lineprice.checkValidity() == false)Lineprice.value='0';});
  
        shadow.host
              ..style.position='relative'
              ..style.display='inline-block'
              ..style.verticalAlign = 'top'
              ..style.backgroundColor = '#ffffff'
              ..style.boxShadow = '1px 1px 5px #333333'
              ..style.boxSizing = 'border-box'
              ..style.marginTop='2px'
              ..style.padding = '4px'
              ..style.paddingRight='30px'
              ..style.borderRadius='2px'
              ..style.fontSize='14px'  
              ..style.transition = 'all 0.2s ease-in'; 
     shadow.nodes..add(LineItem)..add(LineQty)..add(Lineprice);  
    }
  
   getItems(){
     print('getItems');
     request = new HttpRequest();
     request.onReadyStateChange.listen(onData_getItems);
  
     request.open('POST', host+'/getItems');
     request.send(' '); 
   }
  
   onData_getItems(_){
      if (request.readyState != HttpRequest.DONE) return;
      else
        print('responce recieved..: ${request.responseText}');
  
      if (request.readyState == HttpRequest.DONE &amp;&amp; request.status == 200) { 
        fonixFooter.innerHtml='Items retreived..';
      
        print('responce after checking ifItemsretrieved..: ${request.responseText}');
      
            for(Map item in JSON.decode(request.responseText)){
                   LineItem..children.add(new OptionElement(value: item['Code'], data: item['Name']));
                   
            }
  
  } 
     else if (request.readyState == HttpRequest.DONE &amp;&amp;
    request.status == 0) { 
      print('no server..');
    }
    } 
  }
  </code></pre>
  <p>the second screen shoots shows the updated output
  <img src="https://i.stack.imgur.com/njOUB.png" alt="illustration 2" /></p>