javascript - 使用从 PHP 脚本获取的 Javascript 数组

Question

我正在使用 PHP 脚本从数据库获取值。 这是从PHP脚本中获取的json结果。

{"subcategories":
 [
  {"category":"Grocery",
   "products":
    [              
     {"name":"Mixture"},
     {"name":"Chocolates"},
     {"name":"Noodles"}
    ]
  },
  {"category":"Evening Strolls",
   "products":
    [
     {"name":"Shawarma"},
     {"name":"Momos"},
     {"name":"Sandwiches"},
     {"name":"Sizzling Kebabs"},
     {"name":"Desi Delights"}
    ]
  }
 ]
}

这是我的应用程序和 Controller 。

var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope, $http) {
$http.get("testing.php")
.then(function (response) 
{ 
$scope.result = response.data.subcategories; 
});
});

这是 HTML 代码

<div class="w3-row">
  <div ng-repeat="x in result" class="w3-col s12 m12 l12">
    <table>
      <tr>
        <td>
          <h3>{{ x.category }}</h3>
        </td>
        <td>
          <h3 style="font-family:'Droid Sans'" id="title_cat"></h3>
        </td>
      </tr>
    </table>
    <div id="sub" class="w3-row">
      <div ng-repeat="y in x.products" class="w3-col s4 m4 l4">
        <table>
          <tr>
            <td>
              <p>{{ y.name }}
                <br />
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <h3 style="font-family:'Droid Sans';text-align:center" id="title_cat">{{ y.name }}</h3>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

我想显示类别，然后显示产品数组。我该怎么办？

Answer 1

你有类似的吗？

var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($scope) {
  $scope.result = 
    
    {"subcategories":
 [
  {"category":"Grocery",
   "products":
    [              
     {"name":"Mixture"},
     {"name":"Chocolates"},
     {"name":"Noodles"}
    ]
  },
  {"category":"Evening Strolls",
   "products":
    [
     {"name":"Shawarma"},
     {"name":"Momos"},
     {"name":"Sandwiches"},
     {"name":"Sizzling Kebabs"},
     {"name":"Desi Delights"}
    ]
  }
 ]
};
               
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="mainCtrl">
<div class="w3-row">
    <div class="w3-col s12 m12 l12">
        <table>
            <tr>
                <td ng-repeat="x in result.subcategories">
                    <h3>{{ x.category }}</h3>
                    <table>
                        <tr ng-repeat="y in x.products">
                            <td>{{y.name}}</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</div>
</div>