How to create json object in Angularjs

Question

i want to create json object in Angularjs. when add on addBasket add new basket object to array and when click on addOrder add new order to array. in fact date field not repeat in loop. dothis way is good to create json object? or may be exist good solution to create json object.

Edit question:

I would like to create object in the json format. I put the format below. I wrote the code that I've put it. In fact, my problem is to add an object to the orders array. how add new object to orders array?

 [ { "date":'2015-30-7', "baskets": [ { "orders": [ { "id": "12" } ], "customer": { "phone": "555555" }, "discount": "8" } ] } ] 

var app = angular.module('app', []); app.controller('myController', function($scope, $http) { $scope.typistData = []; $scope.typistData.push({ baskets: [{ orders:[] }] }); $scope.addBasket = function() { $scope.typistData.push({ baskets: [{ orders:[] }] }); }; });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app='app' ng-controller='myController'> <input type="text" ng-model="data.name"> <hr> <div ng-repeat="data in typistData" ng-if="typistData"> <form novalidate ng-submit="submitOffices()"> <div> <ng-form ng-repeat="basket in data.baskets"> <div> <input type="text" ng-model="basket.customer.phone"> <br> <input type="text" ng-model="basket.discount"> <input type="text" ng-model="basket.orders[0].id"> <input type="button" value="addOrder"> </div> <hr> </ng-form> </div> </form> </div> <button ng-click="addBasket()">Add Basket</button> <div> <pre>{{ typistData | json }}</pre> </div> </div>

Answer 1

From what I have understood from your question, you want to able to add a basket to the baskets of any of the typists, and also you want to add an order to the orders of one of the baskets of one of the typists.

For handling that I think you can pass in the right objects for addBasket and addOrder inside ng-repeat with ng-click (it works because it passes the reference). So a possible working change can be this :

View part :

<div ng-repeat="data in typistData" ng-if="typistData"> <form novalidate ng-submit="submitOffices()"> <div> <ng-form ng-repeat="basket in data.baskets"> <div> <input type="text" ng-model="basket.customer.phone"> <br> <input type="text" ng-model="basket.discount"> <input type="text" ng-model="basket.orders[0].id"> <!-- Here you call the addOrder with basket. --> <button ng-click="addOrder(basket)">Add Order</button> </div> <hr> </ng-form> <!-- Here you call the addBasket with data. .--> <button ng-click="addBasket(data)">Add Basket</button> </div> </form> </div> 

Controller part :

var app = angular.module('app', []); app.controller('myController', function($scope, $http) { $scope.typistData = []; $scope.typistData.push({ baskets: [{ orders:[] }] }); /* This is wrong, because it doesn't add a basket, instead it another typist's details. $scope.addBasket = function() { $scope.typistData.push({ baskets: [{ orders:[] }] }); Correct way of adding it is to use the passed in reference to the data of a particular typist, and add a basket to its baskets. */ $scope.addBasket = function(typist) { // Adding a basket to the typist's baskets, and you want the // basket to contain an empty orders array initially right. typist.baskets.push({ orders:[] }); }; // To add an order to one of the basket of the baskets of a // particular typist. $scope.addOrder = function(typistBasket) { typistBasket.orders.push({ // Whatever you want the order to have. }); }; });