How to create an ArrayList in javascript or JSON and fill it

0

I'm developing a shopping page, where there are dropdowns that display the product options that the customer can buy, I need when the user clicks add the content of that line is added in an arraylist, however I am not able to create the arraylist in javascript nor JSON, if you can give an example of how I can do this to create this ArrayList and how to fill it with the contents of the line. My screen looks like this:

HereIcandeterminethebuttonactions:

<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/html">
 <head> 
  <title>pedido</title> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <link rel="stylesheet" href="css/bootstrap.min.css"> 
  <link rel="stylesheet" href="css/widget.css"> 
  <link rel="stylesheet" href="../theme/theme.css"> 
  <script src="js/vendor.min.js"></script> 
  <script src="js/runtime.min.js"></script> 
  <!-- assets attached to the page --> 
  <!-- widget need to be injected at runtime --> 
  <script src="widgets/pbTitle/pbTitle.js"></script> 
  <script src="widgets/pbInput/pbInput.js"></script> 
  <script src="widgets/pbSelect/pbSelect.js"></script> 
  <script src="widgets/pbButton/pbButton.js"></script> 
  <script src="widgets/pbText/pbText.js"></script> 
 </head> 
 <body ng-app="bonitasoft.ui" pb-model="58949bd7-40d1-48ed-9377-38f7f73c4738"> 
  <div class="container-fluid"> 
   <div class="row"> 
    <div pb-property-values="39428a7e-e7a6-4acf-ba61-4536a76a2950"> 
     <form novalidate class="col-xs-12" ng-class="properties.cssClasses" name="$form" ng-if="!properties.hidden"> 
      <div pb-property-values="b30d4897-9664-4fa9-8a36-4adf01576e16"> 
       <div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden"> 
        <div class="row"> 
         <div pb-property-values="59f816f2-c982-4cb7-b6ec-631568599ae5"> 
          <div ng-if="!properties.hidden" class="component col-xs-12" ng-class="properties.cssClasses"> 
           <pb-title></pb-title> 
          </div> 
         </div> 
        </div> 
        <div class="row"> 
         <div pb-property-values="d8a41fe8-8607-42f1-ad85-45df63f22252"> 
          <div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden"> 
           <div class="row"> 
            <div pb-property-values="432154f2-0b6a-4a25-8554-0ff0a0712463"> 
             <div ng-if="!properties.hidden" class="component col-xs-12" ng-class="properties.cssClasses"> 
              <pb-input></pb-input> 
             </div> 
            </div> 
           </div> 
           <div class="row"> 
            <div pb-property-values="54f1ed64-76be-4596-aa03-70a75ef9e5ed"> 
             <div ng-if="!properties.hidden" class="component col-xs-12" ng-class="properties.cssClasses"> 
              <pb-title></pb-title> 
             </div> 
            </div> 
           </div> 
           <div class="row"> 
            <div pb-property-values="41509ec6-8740-4b81-ab1b-39ad39eb4f9b"> 
             <div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden"> 
              <div class="row"> 
               <div pb-property-values="7594216f-a971-4290-a146-75315c0c16a7"> 
                <div ng-if="!properties.hidden" class="component col-xs-4" ng-class="properties.cssClasses"> 
                 <pb-text></pb-text> 
                </div> 
               </div>
               <div pb-property-values="1a73b64e-b16a-4b4f-938d-48a1f90ee3b0"> 
                <div ng-if="!properties.hidden" class="component col-xs-4" ng-class="properties.cssClasses"> 
                 <pb-text></pb-text> 
                </div> 
               </div>
               <div pb-property-values="8ffac374-d3e7-45f9-8cfd-5ec6d36e4f14"> 
                <div ng-if="!properties.hidden" class="component col-xs-4" ng-class="properties.cssClasses"> 
                 <pb-text></pb-text> 
                </div> 
               </div> 
              </div> 
             </div> 
            </div> 
           </div> 
           <div class="row"> 
            <div pb-property-values="26a67a06-dda9-4da3-8d63-41f1a12820a0"> 
             <div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden" ng-repeat="$item in ($collection = properties.repeatedCollection) track by $index"> 
              <div class="row"> 
               <div pb-property-values="4dd7d924-5244-444d-870c-fd5b51a3bb7c"> 
                <div ng-if="!properties.hidden" class="component col-xs-4" ng-class="properties.cssClasses"> 
                 <pb-select></pb-select> 
                </div> 
               </div>
               <div pb-property-values="3bc747b8-84a7-474a-bdb7-42ca576cabbc"> 
                <div ng-if="!properties.hidden" class="component col-xs-4" ng-class="properties.cssClasses"> 
                 <pb-select></pb-select> 
                </div> 
               </div>
               <div pb-property-values="612c1119-2e72-4633-9d45-1abb9286f17c"> 
                <div ng-if="!properties.hidden" class="component col-xs-2" ng-class="properties.cssClasses"> 
                 <pb-input></pb-input> 
                </div> 
               </div>
               <div pb-property-values="e6ac398e-0307-44bd-8c0f-987c2e1e4d7f"> 
                <div ng-if="!properties.hidden" class="component col-xs-2" ng-class="properties.cssClasses"> 
                 <pb-button></pb-button> 
                </div> 
               </div> 
              </div> 
              <div class="row"> 
               <div pb-property-values="014362e5-b321-4d19-b52f-878d44250784"> 
                <div ng-if="!properties.hidden" class="component col-xs-12" ng-class="properties.cssClasses"> 
                 <pb-text></pb-text> 
                </div> 
               </div> 
              </div> 
             </div> 
            </div> 
           </div> 
           <div class="row"> 
            <div pb-property-values="a6baa941-6079-40cc-9038-71903865b541"> 
             <div ng-if="!properties.hidden" class="component col-xs-4" ng-class="properties.cssClasses"> 
              <pb-text></pb-text> 
             </div> 
            </div>
            <div pb-property-values="2f75ef3f-ab42-4cfb-8873-8afe62f551a5"> 
             <div ng-if="!properties.hidden" class="component col-xs-12" ng-class="properties.cssClasses"> 
              <pb-button></pb-button> 
             </div> 
            </div> 
           </div> 
           <div class="row"> 
            <div pb-property-values="9ea87133-a8b3-4d2c-955f-29eadfe18b2a"> 
             <div ng-if="!properties.hidden" class="component col-xs-12" ng-class="properties.cssClasses"> 
              <pb-text></pb-text> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
        <div class="row"> 
         <div pb-property-values="453280ad-8431-4eba-b000-216fe1c18df5"> 
          <div ng-if="!properties.hidden" class="component col-xs-12" ng-class="properties.cssClasses"> 
           <pb-button></pb-button> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </form> 
    </div> 
   </div> 
   <script>angular.module('bonitasoft.ui.services').factory('dataModelFactory', function() {
  var resources = {};
  resources['58949bd7-40d1-48ed-9377-38f7f73c4738'] =  {"taskId":{"type":"urlparameter","value":"id","exposed":false},"formOutput":{"type":"expression","value":"return {\n\t'pedido': $data.formInput.pedido\n};","exposed":false},"task":{"type":"url","value":"../API/bpm/userTask/{{taskId}}","exposed":false},"context":{"type":"url","value":"../API/bpm/userTask/{{taskId}}/context","exposed":false},"formInput":{"type":"json","value":"{\r\n  \"pedido\" : {\r\n    \"empresa\" : \"\",\r\n    \"itensPedido\" : [ \r\n        {\r\n            \"impressoraPedido\":\"\",\r\n            \"suprimentoPedido\":\"\",\r\n            \"quantidadePedido\":1\r\n        }]\r\n  }\r\n}","exposed":false},"requestImpressora":{"type":"url","value":"../API/bdm/businessData/com.company.model.Impressoras?q=find&p=0&c=10000","exposed":false},"requestSuprimento":{"type":"url","value":"../API/bdm/businessData/com.company.model.ModeloImpressoraSuprimento?q=findByCodigoModeloImpressora&p=0&c=10000&f=codigoModeloImpressora={{teste}}","exposed":false},"teste":{"type":"expression","value":"//return $data.formInput;\n\n\nvar x = $data.formInput.pedido.itensPedido.length - 1;\nreturn $data.formInput.pedido.itensPedido[x].impressoraPedido.codigoImpressora;\n\n","exposed":false},"lista":{"type":"expression","value":"var obj = [];\nvar x = $data.formInput.pedido.itensPedido.length - 1;\nvar cod = $data.formInput.pedido.itensPedido[x].impressoraPedido.codigoImpressora;\nobj.push(cod);\nvar z = obj.length;\nreturn obj +\" Código Valor: \"+ cod;","exposed":false},"array":{"type":"expression","value":"var vetor = new Array (\"José\");\nvetor.push(\"Antonio\");\nreturn \"Agora o Teste Array possui \" + vetor +\"<BR>\";","exposed":false}};
  return {
    get: function(uuid) {
      return resources[uuid];
    }
  };
});
</script> 
   <script>angular.module('bonitasoft.ui.services').factory('modelPropertiesFactory', function() {
  var resources = {};
  return {
    get: function(uuid) {
      return resources[uuid];
    }
  };
});
</script> 
   <script>angular.module('bonitasoft.ui.services').factory('propertyValuesFactory', function() {
  var resources = {};
  resources['59f816f2-c982-4cb7-b6ec-631568599ae5'] =  {"alignment":{"type":"constant","value":"left"},"text":{"type":"interpolation","value":"Pedido"},"dimension":{"type":"constant","value":12},"level":{"type":"constant","value":"Level 4"},"isDisplayed":{"type":"constant","value":true},"widgetId":{"type":"constant","value":"pbTitle"},"labelHidden":{"type":"constant","value":false},"class":{"type":"constant","value":"org.bonitasoft.web.designer.experimental.parametrizedWidget.TitleWidget"},"label":{"type":"constant","value":null},"readonly":{"type":"constant","value":false},"cssClasses":{"type":"constant","value":""}};
  resources['612c1119-2e72-4633-9d45-1abb9286f17c'] =  {"alignment":{"type":"constant","value":"left"},"labelWidth":{"type":"constant","value":1},"isDisplayed":{"type":"constant","value":true},"placeholder":{"type":"constant","value":null},"class":{"type":"constant","value":"org.bonitasoft.web.designer.experimental.parametrizedWidget.InputWidget"},"label":{"type":"constant","value":""},"labelPosition":{"type":"constant","value":"top"},"type":{"type":"constant","value":"number"},"dimension":{"type":"constant","value":12},"widgetId":{"type":"constant","value":"pbInput"},"value":{"type":"variable","value":"$item.quantidadePedido"},"labelHidden":{"type":"constant","value":false},"required":{"type":"constant","value":false},"readonly":{"type":"constant","value":false},"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false},"minLength":{"type":"constant","value":""},"maxLength":{"type":"constant","value":""},"readOnly":{"type":"expression","value":"$item.impressoraPedido.codigoImpressora == null"},"min":{"type":"constant","value":1},"max":{"type":"constant","value":null},"step":{"type":"constant","value":1}};
  resources['39428a7e-e7a6-4acf-ba61-4536a76a2950'] =  {"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false}};
  resources['d8a41fe8-8607-42f1-ad85-45df63f22252'] =  {"alignment":{"type":"constant","value":"left"},"dimension":{"type":"constant","value":12},"isDisplayed":{"type":"constant","value":true},"widgetId":{"type":"constant","value":null},"labelHidden":{"type":"constant","value":false},"class":{"type":"constant","value":"org.bonitasoft.web.designer.experimental.parametrizedWidget.WidgetContainer"},"repeatedCollection":{"type":"variable","value":null},"label":{"type":"constant","value":null},"readonly":{"type":"constant","value":false},"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false}};
  resources['e6ac398e-0307-44bd-8c0f-987c2e1e4d7f'] =  {"removeItem":{"type":"variable","value":"$item"},"alignment":{"type":"constant","value":"right"},"isDisplayed":{"type":"constant","value":true},"targetUrlOnSuccess":{"type":"interpolation","value":null},"class":{"type":"constant","value":"org.bonitasoft.web.designer.experimental.parametrizedWidget.ButtonWidget"},"label":{"type":"constant","value":"Remover Item"},"collectionPosition":{"type":"constant","value":"Item"},"buttonStyle":{"type":"constant","value":"danger"},"dimension":{"type":"constant","value":12},"valueToAdd":{"type":"expression","value":null},"collectionToModify":{"type":"variable","value":"$collection"},"widgetId":{"type":"constant","value":"pbButton"},"labelHidden":{"type":"constant","value":false},"action":{"type":"constant","value":"Remove from collection"},"dataToSend":{"type":"expression","value":null},"readonly":{"type":"constant","value":false},"disabled":{"type":"constant","value":false},"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false},"url":{"type":"interpolation","value":null},"dataFromSuccess":{"type":"variable","value":null},"dataFromError":{"type":"variable","value":null}};
  resources['a6baa941-6079-40cc-9038-71903865b541'] =  {"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false},"text":{"type":"interpolation","value":"{{lista}}"},"alignment":{"type":"constant","value":"left"}};
  resources['1a73b64e-b16a-4b4f-938d-48a1f90ee3b0'] =  {"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false},"text":{"type":"interpolation","value":"<h5><b>Suprimento"},"alignment":{"type":"constant","value":"left"}};
  resources['7594216f-a971-4290-a146-75315c0c16a7'] =  {"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false},"text":{"type":"interpolation","value":"<h5><b>Impressora"},"alignment":{"type":"constant","value":"left"}};
  resources['014362e5-b321-4d19-b52f-878d44250784'] =  {"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":true},"text":{"type":"interpolation","value":"{{$item.impressoraPedido.modeloImpressora}}"},"alignment":{"type":"constant","value":"left"}};
  resources['2f75ef3f-ab42-4cfb-8873-8afe62f551a5'] =  {"removeItem":{"type":"variable","value":null},"alignment":{"type":"constant","value":"right"},"isDisplayed":{"type":"constant","value":true},"targetUrlOnSuccess":{"type":"interpolation","value":null},"class":{"type":"constant","value":"org.bonitasoft.web.designer.experimental.parametrizedWidget.ButtonWidget"},"label":{"type":"constant","value":"Adicionar"},"collectionPosition":{"type":"constant","value":null},"buttonStyle":{"type":"constant","value":"success"},"dimension":{"type":"constant","value":12},"valueToAdd":{"type":"expression","value":"{  \"impressoraPedido\" : \"\",  \"suprimentoPedido\" : \"\",  \"quantidadePedido\" : 1}"},"collectionToModify":{"type":"variable","value":"formInput.pedido.itensPedido"},"widgetId":{"type":"constant","value":"pbButton"},"labelHidden":{"type":"constant","value":false},"action":{"type":"constant","value":"Add to collection"},"dataToSend":{"type":"expression","value":"{  \"impressoraPedido\" : \"\",  \"suprimentoPedido\" : \"\",  \"quantidadePedido\" : 1}"},"readonly":{"type":"constant","value":false},"disabled":{"type":"constant","value":false},"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false},"url":{"type":"interpolation","value":null},"dataFromSuccess":{"type":"variable","value":null},"dataFromError":{"type":"variable","value":null}};
  resources['432154f2-0b6a-4a25-8554-0ff0a0712463'] =  {"alignment":{"type":"constant","value":"left"},"labelWidth":{"type":"constant","value":1},"isDisplayed":{"type":"constant","value":true},"placeholder":{"type":"constant","value":null},"class":{"type":"constant","value":"org.bonitasoft.web.designer.experimental.parametrizedWidget.InputWidget"},"label":{"type":"constant","value":"Empresa"},"labelPosition":{"type":"constant","value":"top"},"type":{"type":"constant","value":"text"},"dimension":{"type":"constant","value":12},"widgetId":{"type":"constant","value":"pbInput"},"value":{"type":"variable","value":"formInput.pedido.empresa"},"labelHidden":{"type":"constant","value":false},"required":{"type":"constant","value":true},"readonly":{"type":"constant","value":false},"cssClasses":{"type":"constant","value":""}};
  resources['8ffac374-d3e7-45f9-8cfd-5ec6d36e4f14'] =  {"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false},"text":{"type":"interpolation","value":"<h5><b>Quantidade"},"alignment":{"type":"constant","value":"left"}};
  resources['3bc747b8-84a7-474a-bdb7-42ca576cabbc'] =  {"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false},"disabled":{"type":"constant","value":false},"required":{"type":"constant","value":false},"labelHidden":{"type":"constant","value":false},"label":{"type":"interpolation","value":""},"labelPosition":{"type":"constant","value":"top"},"labelWidth":{"type":"constant","value":4},"placeholder":{"type":"interpolation","value":""},"availableValues":{"type":"expression","value":"requestSuprimento"},"displayedKey":{"type":"constant","value":"codigoModeloImpressora+' | '+nomeSuprimento"},"returnedKey":{"type":"constant","value":null},"value":{"type":"variable","value":"$item.suprimentoPedido"}};
  resources['9ea87133-a8b3-4d2c-955f-29eadfe18b2a'] =  {"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false},"text":{"type":"interpolation","value":"{{array}}"},"alignment":{"type":"constant","value":"left"}};
  resources['41509ec6-8740-4b81-ab1b-39ad39eb4f9b'] =  {"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false},"repeatedCollection":{"type":"variable","value":null}};
  resources['b30d4897-9664-4fa9-8a36-4adf01576e16'] =  {};
  resources['4dd7d924-5244-444d-870c-fd5b51a3bb7c'] =  {"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false},"disabled":{"type":"constant","value":false},"required":{"type":"constant","value":false},"labelHidden":{"type":"constant","value":false},"label":{"type":"interpolation","value":""},"labelPosition":{"type":"constant","value":"top"},"labelWidth":{"type":"constant","value":4},"placeholder":{"type":"interpolation","value":""},"availableValues":{"type":"expression","value":"requestImpressora"},"displayedKey":{"type":"constant","value":"codigoImpressora+' | '+modeloImpressora+' | '+patrimonio"},"returnedKey":{"type":"constant","value":null},"value":{"type":"variable","value":"$item.impressoraPedido"}};
  resources['26a67a06-dda9-4da3-8d63-41f1a12820a0'] =  {"alignment":{"type":"constant","value":"left"},"dimension":{"type":"constant","value":12},"isDisplayed":{"type":"constant","value":true},"widgetId":{"type":"constant","value":null},"labelHidden":{"type":"constant","value":false},"class":{"type":"constant","value":"org.bonitasoft.web.designer.experimental.parametrizedWidget.WidgetContainer"},"repeatedCollection":{"type":"variable","value":"formInput.pedido.itensPedido"},"label":{"type":"constant","value":null},"readonly":{"type":"constant","value":false},"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false}};
  resources['453280ad-8431-4eba-b000-216fe1c18df5'] =  {"removeItem":{"type":"variable","value":null},"alignment":{"type":"constant","value":"center"},"isDisplayed":{"type":"constant","value":true},"targetUrlOnSuccess":{"type":"interpolation","value":"/bonita"},"class":{"type":"constant","value":"org.bonitasoft.web.designer.experimental.parametrizedWidget.ButtonWidget"},"label":{"type":"constant","value":"Enviar"},"collectionPosition":{"type":"constant","value":null},"buttonStyle":{"type":"constant","value":"primary"},"dimension":{"type":"constant","value":12},"valueToAdd":{"type":"expression","value":null},"collectionToModify":{"type":"variable","value":null},"widgetId":{"type":"constant","value":"pbButton"},"labelHidden":{"type":"constant","value":false},"action":{"type":"constant","value":"Submit task"},"dataToSend":{"type":"expression","value":"formInput"},"readonly":{"type":"constant","value":false},"disabled":{"type":"expression","value":"$form.$invalid"},"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false},"url":{"type":"interpolation","value":null},"dataFromSuccess":{"type":"variable","value":null},"dataFromError":{"type":"variable","value":null}};
  resources['54f1ed64-76be-4596-aa03-70a75ef9e5ed'] =  {"alignment":{"type":"constant","value":"left"},"text":{"type":"interpolation","value":"Itens Pedido"},"dimension":{"type":"constant","value":12},"level":{"type":"constant","value":"Level 4"},"isDisplayed":{"type":"constant","value":true},"widgetId":{"type":"constant","value":"pbTitle"},"labelHidden":{"type":"constant","value":false},"class":{"type":"constant","value":"org.bonitasoft.web.designer.experimental.parametrizedWidget.TitleWidget"},"label":{"type":"constant","value":null},"readonly":{"type":"constant","value":false},"cssClasses":{"type":"constant","value":""}};
  return {
    get: function(uuid) {
      return resources[uuid];
    }
  };
});
</script> 
  </div>   
 </body>
</html>
    
asked by anonymous 05.06.2017 / 14:07

0 answers