如何在AngularJS中将JSON文件转为对象并进行展示？

嘿，我来帮你搞定这个问题！先纠正你现有代码里的一个小误区：<p ng-model="array"></p> 里的ng-model不能用在<p>标签上——它是给表单输入元素做双向绑定用的，展示数据得用插值表达式{{}}或者ng-bind。

下面是完整的实现方案，一步步来：

1. 准备你的JSON文件 #

假设你有个data.json文件，内容示例如下（数组或单个对象都适用）：

[
  {
    "name": "张三",
    "age": 28,
    "job": "前端开发"
  },
  {
    "name": "李四",
    "age": 32,
    "job": "后端开发"
  }
]

2. 编写完整的AngularJS代码 #

核心是用AngularJS的$http服务加载JSON文件，它会自动把JSON字符串转换成JavaScript对象/数组，不用你手动调用JSON.parse()。

完整HTML代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>AngularJS 展示JSON数据</title>
  <link rel="stylesheet" type="text/css" href="css/site.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
  <script>
    // 定义AngularJS模块
    var myApp = angular.module('myApp', []);
    
    // 定义控制器，注入$http服务
    myApp.controller('myCtrl', function($scope, $http) {
      // 加载JSON文件
      $http.get('data.json')
        .then(function(response) {
          // 把转换好的对象/数组绑定到作用域变量
          $scope.userList = response.data;
          // 如果你的JSON是单个对象，就改成$scope.user = response.data;
        })
        .catch(function(error) {
          // 处理加载失败的情况，比如路径错误
          console.error('JSON加载失败:', error);
        });
    });
  </script>
</head>
<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <!-- 用ng-repeat遍历数组，展示每一项数据 -->
    <h3>用户信息列表</h3>
    <div ng-repeat="user in userList">
      <p>姓名：{{user.name}}</p>
      <p>年龄：{{user.age}}</p>
      <p>职业：{{user.job}}</p>
      <hr>
    </div>

    <!-- 如果是单个对象，直接展示属性即可 -->
    <!-- <p>姓名：{{user.name}}</p>
    <p>年龄：{{user.age}}</p> -->
  </div>
</body>
</html>

3. 关键注意点 #

• $http.get()返回一个Promise，用.then()处理成功回调，response.data就是已经转换好的JS对象/数组。
• 确保JSON文件的路径正确：如果和HTML文件在同一目录，直接写文件名；如果在子目录，比如json/data.json，要写相对路径。
• 如果JSON加载失败，打开浏览器控制台（F12）就能看到错误信息，方便排查问题。

内容的提问来源于stack exchange，提问作者Roman Roshchuk