javascript - How to create json object in Angularjs - Stack Overflow

admin管理员组

文章数量:1419191

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=".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>

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

• javascript
• json
• angularjs

Share Improve this question Follow edited Jul 30, 2015 at 8:02 leezard 4333 bronze badges asked Jul 30, 2015 at 6:42 EmilEmil 42322 gold badges1212 silver badges3434 bronze badges 4

• 2 Could you rephrase your question better? You will get answers quicker that way! – shashanka n Commented Jul 30, 2015 at 6:47
• Perhaps you could try writing your question in your native language and then using Google Translate to get a better English description? – Alex McMillan Commented Jul 30, 2015 at 6:48
• your way of creating JSON is right and there is no good way available untill we dont know about what kind of JSON object you want .JSON object can be valid and invalid , you can not say it is a good JSON or bad JSON because it all depends on requirement – Shubham Nigam Commented Jul 30, 2015 at 6:52
• @ Alex McMillan may be see code snippet find out my expect. – Emil Commented Jul 30, 2015 at 7:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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.
    });
  };
});

本文标签： javascriptHow to create json object in AngularjsStack Overflow