gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 07:47:01 25 4
gpt4 key购买 nike

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

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

  • 环境(其中有 4 个)
  • 特征名称(未定义值)
  • 日(日期 - 未定义值)
  • 时间(时间戳 - 未定义值)
  • 报告链接(服务器上 html 文件的文件位置 ^ 基于上述文件夹结构 - 其中未定义值)
  • 服务器上的 .json 文件位置 ^ 基于上述文件夹结构 - 其中未定义值

我写了一些 php 代码,json_encode$folderStructure 数组,然后 json_decode 是一个很好的可读格式:

<?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 解决方案有效,但速度很慢,因为它依赖于数组。我想要实现的是类似于此的东西:enter image description here除了用 AngularJS 编写(使用字典中的 ng-repeat)而不是 PHP 中的 for 循环。

所以根据我目前的设计,将其黑白分明:https://gist.github.com/anonymous/429747625b113df0bed30c727a338ffe - 如何将 $folderStructure 数组转换为某种对象或字典,并使用它在使用 ng-repeat 的页面上显示信息?

编辑 2:为什么 json_encode 不起作用? JSON 是 Javascript 对象表示法。哦,那好吧。如何将数组的值传递到:$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

有没有办法让我遍历此输出并对每个 header 使用 ng-repeat(我不知道 header 是什么)?

最佳答案

你可以像这样嵌套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>

关于javascript - 将 PHP 数组转换为项目对象以与 AngularJS 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40265292/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com