Javascript I'；我是Angular js新手，我想在HTML文件中显示本地JSON数据。下面是我试过的代码_Javascript_Angularjs

Javascript I'；我是Angular js新手，我想在HTML文件中显示本地JSON数据。下面是我试过的代码

javascript angularjs

Javascript I'；我是Angular js新手，我想在HTML文件中显示本地JSON数据。下面是我试过的代码,javascript,angularjs,Javascript,Angularjs,我有一个示例JSON文件text.JSON。我想使用ng repeat以HTML格式显示数据，但它不起作用这是我的密码： <html ng-app="myapp"> <head> <title> Test</title> <script src="js/angular.min.js" type="text/javascript"></script> <scrip

我有一个示例JSON文件

text.JSON

。我想使用

ng repeat

以HTML格式显示数据，但它不起作用

这是我的密码：

<html ng-app="myapp">
    <head>
        <title> Test</title>
        <script src="js/angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            var myapp = angular.module('myapp', []);
            myapp.controller('myCtrl', function ($scope, $http) {
                $http.get("js/text.json").success(function (response) {
                    $scope.names = response;
                });
            });
        </script>
    </head>
    <body>
        <div ng-controller="myCtrl">
            <li ng-repeat="value in names">
                {{value.name +' and the age is ' + value.age}}
            </li>
        </div>
    </body>
</html>


试验
var myapp=angular.module（'myapp'，[]）；
控制器（'myCtrl'，函数（$scope，$http）{
$http.get（“js/text.json”）.success（函数（响应）{
$scope.names=响应；
});
});

{{value.name+'且年龄为'+value.age}}

有什么建议吗？

仅当json数据正确时，才更改为该“{value.name}”，并且年龄为{{value.age}”

请将“controller”和“app.js”文件分开，以便轻松识别问题

    return $http
                                        .get(
                                                'http://localhost:8089/eCommerce/product/attributes/'
                                                        )
                                        .then(
                                                function(response) {

                                                    return response.data;
                                                },
                                                function(errResponse) {
                                                    console
                                                            .error('Error while fetching specific Item');
                                                    return $q
                                                            .reject(errResponse);
                                                });
                            }

想法1

可能JSON文件无效。通过将最后一个逗号删除到以下位置进行编辑：

[
  {
    "name": "test",
    "age": 28
  },
  {
    "name": "test1",
    "age": 28
  },
  {
    "name": "test2",
    "age": 28
  },
  {
    "name": "test4",
    "age": 28
  },
  {
    "name": "test3",
    "age": 28
  }
]

创意2

仔细检查JSON文件的路径。

js/text.json

真的是正确的吗

创意3

您是否使用某些web服务器在浏览器中显示您的文件？它可能无法通过文件协议工作（例如

file:///myfile.html

），您需要一个web服务器和http协议（例如

http://localhost:9000

）

创意4

如果您使用的是AngularJS baybe的历史版本，则插值存在问题

{{}

是AngularJS插值的标记-它意味着您可以显示AngularJS范围内存在的任何值。您正在通过

ng repeat

创建一个。与此相比，“和年龄是”是一个简单的文本，不需要插值（它不是Angular范围内的变量，而是一个简单的常数）

这意味着您只需要插入

{{value.name}

和

{{value.age}

。它应适用于以下代码：

<div ng-controller="myCtrl">
   <li ng-repeat="value in names">
      {{value.name}} and the age is {{value.age}}
   </li>
</div>



{{value.name}，年龄为{{value.age}

将

{value.name+'更改为{{value.name}，年龄为'+value.age}}}
更改为{value.name}，年龄为{{value.age}
{value.name}，年龄为{value.age}
不走运。。下面是JSON代码。。[{'name'：'test'，'age'：28}，{'name'：'test1'，'age'：28}，{'name'：'test2'，'age'：28}，{'name'：'test4'，'age'：28}，{'name'：'test3'，'age'：28}，]你说“它不工作”是什么意思？你得到了错误的数据吗？你有什么数据吗？能否在获得响应的行上添加console.log（response）
，并告诉我们它打印了什么？我认为存在一些小错误—JSON文件无效或文件路径错误。或者可能缺少web服务器-它无法通过文件
协议工作。他可能不需要插入整个内容，但如果$scope.names
是他假设的，那么他发布的代码应该仍然有效。运气不好。。下面是JSON代码。。[{'name'：'test'，'age'：28}，{'name'：'test1'，'age'：28}，{'name'：'test2'，'age'：28}，{'name'：'test4'，'age'：28}，{'name'：'test3'，'age'：28}，]@Fissio这取决于角度的版本，但你是对的，他不太可能使用历史版本。