将 PHP 数组转换为项目对象以与 AngularJS 一起使用答案

【问题标题】：Converting PHP array into item object to use with AngularJS将 PHP 数组转换为项目对象以与 AngularJS 一起使用
【发布时间】：2017-03-08 23:56:37
【问题描述】：

我在 php 中有一堆 for 循环，它们将文件夹名称和文件位置提供给 6 维数组。这是循环背后的代码：https://gist.github.com/anonymous/66aa7cabe47f91eda6835e193d04a92d

我有一个单页应用程序，它根据这些文件夹名称/数组大小显示信息。这些是我需要遍历的文件夹级别：

环境（有4个）
功能名称（未定义值）
天（日期 - 是一个未定义的值）
时间（时间戳 - 是一个未定义的值）
报告链接（服务器上的html文件的文件位置^基于上述文件夹结构-其中未定义值）
.json 文件在服务器上的位置 ^ 基于上述文件夹结构 - 其中是一个未定义的值

我已经编写了一些 php 代码，其中json_encodes $folderStructure 数组，然后 json_decodes 将其转换为可读的格式：

<?php

    require('data.php');

    $data = json_encode($folderStructure); // decode the JSON into an associative array

    $changed = json_decode($data, true);

    echo '<pre>' . print_r($changed, true) . '</pre>'; // This will print out the contents of the array in a nice readable format

?>

输出为：https://gist.github.com/anonymous/944e97b98596454a27cc8236a4420dbd

如您所见，有很多数据。随着数组大小的增加，数据的加载将花费更长的时间。有人建议我使用 AngularJS 来显示页面内容（与我目前所拥有的相反 - https://gist.github.com/anonymous/429747625b113df0bed30c727a338ffe （这是非常非常无能的）。字典显然要快得多，因此明智的解决方案是将这个单用 AngularJS 编写的页面应用程序。

我已经体验过以下内容：

<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>

<div ng-controller="controllerName">
    <ul>
        <li ng-repeat="(environment, number) in items">{{environment}}: {{number}}</li>
    </ul>

</div>

    <script>
        angular.module('app', [])
            .controller('controllerName', function($scope)
            {
                $scope.items = {'DEV':10, 
                                'Production':12
                                ,'Staging':10
                                ,'QA':12

                                };
            });
    </script>
</body>
</html>

我想知道是否可以将我的 PHP 数组转换为这些 items 对象之一并使用 ng-repeat 而不是 PHP 来显示信息。这是无法实现的吗？我对如何实现这一点有点困惑，有人能帮我解决这个问题吗？

编辑：我当前的 PHP 解决方案可以工作，但是速度很慢，因为它依赖于数组。我想要实现的是类似于以下内容：，除了用 AngularJS 编写（使用字典中的 ng-repeat）而不是 PHP 中的 for 循环。

因此，根据我当前的设计，将其设置为黑白：https://gist.github.com/anonymous/429747625b113df0bed30c727a338ffe - 如何将$folderStructure 数组转换为某种对象或字典，并使用 ng- 在页面上显示信息重复？

编辑 2：Why would json_encode not work? JSON is Javascript Object Notation. 哦，那好吧。如何将数组的值传递到：$scope.items 并创建名称值对，而无需自己对值进行硬编码？ 1) 我不知道$folderStructure 的初始environment 数组位置之后的文件夹名称，因为它们一直在变化。 2）我也不知道阵列将来会有多大。

编辑 3：

我已将 index.php 中的一些代码更改为如下所示：

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>

        <div ng-controller="myCtrl">

            <p>{{myStuff}}</p>

        </div>

        <script>
            var app = angular.module('myApp', []);

            // get the data using a http request
            app.controller('myCtrl', function($scope, $http) 
            {
                $http.get("php/get_data.php").then(function (response) 
                {
                    $scope.myStuff = response.data;
                });
            });


        </script>
    </body>
</html>

问题是，myStuff 的输出实际上是这样的：pastebin.com/CyiZ5UhG

有没有办法让我遍历这个输出并对每个标题使用 ng-repeat（我不知道标题是什么）？

【问题讨论】：

为什么 json_encode 不起作用？ JSON 是 Javascript 对象表示法..
Alight @Devon ，但是您能否向我解释一下我将如何遍历 json 以便为每个数组位置设置一个 ng-repeat ？即理想输出：4*EnvironmentName, x* featureName, x* dayName etc?
你能提供 >> 改善我的答案
@swordf1zh 您好，感谢您的回复。请看这个：pastebin.com/CyiZ5UhG - echo json_encode($folderStructure);的结果

标签： javascript php angularjs arrays json

【解决方案1】：

你可以像这样嵌套ngRepeat：

<div ng-repeat="item in items">
  <div ng-repeat="itemChild_level1 in item">
    <div ng-repeat="itemChild_level2 in itemChild_level1>
      ...
      <p>{{ itemChild_levelX.property</p>
    </div>
  </div>
</div>

【讨论】：

感谢您的回答。您能否根据我的问题的 EDIT 3 改进您的解决方案？因为您的解决方案只涵盖了我想要实现的一小部分。

【解决方案2】：

好吧，我会尽量保持简短；

我认为你的问题是如何注入 json，对你来说最简单的方法是这样注入：

    <script>
        angular.module('app', [])
            .controller('controllerName', function($scope, $datasources){
                $scope.items = $datasources["dataset1"];
            }).value("$datasources", {
               dataset1:<?php echo json_encode($data); ?>,
            });
    </script>

但是，我建议您进一步阅读有关角度服务的信息。我会做的不是这个，而是创建一个通过 $http 指令检索该数据的服务，并在控制器声明中调用它，如下所示：

            .factory("DataService", function($http, $q){
                return{
                    get:function(){
                       var deferred = $q.defer();

                       $http.get("urlWithData").then(function(data){
                          deferred.resolve(data)
                       }, function(error){
                          deferred.reject(error);
                       })
                       return deferred.promise;
                    }
            })
            ....
            .controller('controllerName', function($scope, DataService){
                DataService.get().then(function(data){
                     $scope.items = data;
                });
            })

编辑：

用于遍历记录的 html 代码（老实说，将其用作提示，不会在 pastebin 中研究该代码的结构 ^^）：

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>

        <div ng-controller="myCtrl">

            <ul>
                 <li ng-repeat = "(index, item) in myStuff">
                      <ul ng-if = 'typeof item == 'Array'">
                          <li ng-repeat = "(subindex, subitem) in item"></li>                        
                          etc ...
                      </ul>
                      <p ng-if= "typeof item == 'String'">{{item}}</p>
                 </li>
            </ul>

        </div>

        <script>
            var app = angular.module('myApp', []);

            // get the data using a http request
            app.controller('myCtrl', function($scope, $http) 
            {
                $http.get("php/get_data.php").then(function (response) 
                {
                    $scope.myStuff = response.data;
                });
            });


        </script>
    </body>
</html>

顺便说一句，为什么在您的数据中嵌套如此深？看起来不必要的复杂

【讨论】：

感谢您的回答。您能否根据我的问题的EDIT 3 改进您的解决方案？因为您的解决方案只涵盖了我想要实现的一小部分。
我会尝试...但不确定您遇到的问题。我假设当您说“字面意思”时，您指的是引用链接的内容，而不是文本本身:)