AngularJSで使用するアイテムオブジェクトにPHP配列を変換

私は、フォルダー名とファイルの位置を6次元配列に供給するphpのforループを束ねています。 https://gist.github.com/anonymous/66aa7cabe47f91eda6835e193d04a92d AngularJSで使用するアイテムオブジェクトにPHP配列を変換

私はこれらのフォルダ名/配列サイズに基づいて情報を表示する1つのページアプリケーションを持っています。これらは私が通じトラバースする必要があるフォルダレベルです（未定義の値となっている）

環境（4があるうち）
機能名
日（日 - 未定義となっています値）
時間（タイムスタンプ - 未定義の値となっている）
レポートリンク（上記のフォルダ構造に基づいて、サーバ^上のhtmlファイルのファイルの場所 - 未定義の値となっている）

.jsonサーバー上のファイルの場所^ b

<?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 

?>

そして：私はjson_encodeの$folderStructure配列し、その後json_decodeは素晴らしい読める形式によいくつかのPHPコードを書かれている未定義の値

となっている - 上記のフォルダ構造にASED出力は次のとおりです。

ご覧のとおり、多くのデータがあります。配列のサイズが大きくなると、データの読み込みに時間がかかります。 AngularJSを使用して、ページコンテンツを表示するように提案されています（現在は-https://gist.github.com/anonymous/429747625b113df0bed30c727a338ffeです）。Dicionariesの方がはるかに高速であるため、この単一ページアプリケーションを変換するのが賢明ですAngularJSに書き込まれる

を私は以下でexperiementedています。

<!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>

そして、私はこれらのitemsオブジェクトの一つに私のPHPの配列を変換して表示するng-repeatを使用することが可能であるかどうかを疑問に思いましたPHPではなく情報です。これは実現可能なものですか？私はこれを達成する方法について少し困惑しています。誰もがこれで私を助けることができるでしょうか？

EDIT：私の現在のPHPソリューションは機能しますが、配列に依存するため遅いです。私が達成したいのは、PHPのforループの代わりにAngularJS（辞書からng-repeatを使用）で書かれている点を除き、のようなものです。

私の現在のデザイン：https://gist.github.com/anonymous/429747625b113df0bed30c727a338ffeに基づいて白黒で表示するにはどうすれば$folderStructureの配列をオブジェクトや辞書に変換し、ng-repeatを使ってそのページに情報を表示できますか？

編集2：Why would json_encode not work? JSON is Javascript Object Notation. さて、大丈夫です。配列の値を$scope.itemsに渡して、値をハードコーディングせずに名前の値のペアを作成するにはどうすればよいですか？ 1）最初のenvironmentの配列の位置が$folderStructureになったあと、フォルダ名が常に変わるため、フォルダ名がわかりません。 2）将来的に配列がどれだけ大きくなるかわからない。

EDIT 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を使用する方法はありますか（私がヘッダーの内容を知らない場合）？

出典

2016-10-26 twodimensionalmirrorsymmetrica

なぜjson_encodeが機能しないのですか？ JSONはJavascript Object Notationです。 – Devon

@Devonにお立ち寄りください。しかし、各配列の位置にng-repeatを持たせるためにjsonをどのようにトラバースすることができるのかを私に説明できますか？つまり理想的な出力です：4 * EnvironmentName、x * featureName、x * dayNameなど？ – twodimensionalmirrorsymmetrica

<<< json_encode（$ folderStructure）の結果を提供できますか？ >>>私の答えを改善する –

できるのは、このような巣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>

出典

2016-10-26 15:02:31

答えをありがとう。私の質問のEDIT 3に基づいてあなたのソリューションを改善することができますか？あなたの解決策は私が達成したいと思っていたもののわずかな部分だけをカバーしています。 – twodimensionalmirrorsymmetrica

まあ、短いそれを維持しようとするだろう - 私。

私はあなたの問題は、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; 
       }); 
      })

EDIT：

htmlコードあなたの記録を反復処理する（、ヒントとしてそれを使用する正直、^^ペーストビンにそのコードの構造を勉強するつもりはありません）：

<!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>

ところで、あなたのデータでは、なぜ、このような深いネストを??不必要に複雑に見える

出典

2016-10-26 15:45:48 sergio0983

答えをありがとう。私の質問の「編集3」に基づいてあなたのソリューションを改善することができますか？あなたの解決策は私が達成したいと思っていたもののわずかな部分だけをカバーしています。 – twodimensionalmirrorsymmetrica

私は試してみるが、あなたが持っている問題については確かではない。私は、あなたが「文字通り」と言うとき、あなたは、言及されたリンクの内容を意味し、テキスト自体は意味しません:) – sergio0983

AngularJSで使用するアイテムオブジェクトにPHP配列を変換

答えて

関連する問題