使用 angularjs 从多个输入生成 JSON

Question

我是 ionic、angular 和 firebase 的新手。这可能是一个荒谬的问题:)

我正在使用 ionic + firebase 制作一个应用程序，我想从多个输入中制作一个 JSON。我有一个如下所示的界面（图片）。

我应该怎么做才能将“菜单”作为 key 并将“价格”作为 value 的 JSON。 上图是显示意外结果，结果一定是这样的

[{"yakiniku":"2000","ramen":"1200"}]

---

查看

<div class="row">
    <div class="col">
      <div class="item item-divider">
        Menu
      </div>
      <label class="item item-input">
        <input type="text" ng-model="menu_resto[0].menu1" name="menu_resto[]" placeholder="Menu">
      </label>
      <label class="item item-input">
        <input type="text" ng-model="menu_resto[1].menu2" name="menu_resto[]" placeholder="Menu">
      </label>
    </div>
    <div class="col">
      <div class="item item-divider">
        Price
      </div>
      <label class="item item-input">
        <input type="text" ng-model="menu_resto[0].price1" name="menu_resto[]" placeholder="Price">
      </label>
      <label class="item item-input">
        <input type="text" ng-model="menu_resto[1].price2" name="menu_resto[]" placeholder="Price">
      </label>
    </div>
  </div>
  {{menu_resto}}

控制器

resto.controller('DaftarRestoCtrl',function($scope,DB,$firebaseArray){
  $scope.menu_resto = [];
});

谢谢你:)

Answer 1

我假设第一个数组在您的控制器上的某个地方可用，并且编辑实际上改变了这个数组。如果是这种情况，一个简单的 for each 遍历该数组并构建一个字符串就足够了。我不知道您可以调用什么来将数组展平为 JSON 字符串。

Answer 2

这个问题归结为纯 JavaScript。 请不要索引您的数据两次。调用模型变量就够了

menu_resto[0].menu
menu_resto[0].price
menu_resto[1].menu
menu_resto[1].price
...

然后，您需要做的就是，在单击安全按钮时，将以下函数与ng-click="json = genJSON()" 绑定：

$scope.json = {};
$scope.genJSON = function () {
   return $scope.menu_resto.map(function (entry) {
       var newObj = {};
       newObj[entry.menu] = entry.price;
       return newObj;
   })
}

在问下一个问题之前，请考虑阅读一本关于 javascript 的基础书籍和一些关于 Angular 的教程。