Я новичок в Angular js, я хочу отобразить локальные данные JSON в HTML-файле. Ниже приведен код, который я пробовал

ProgramBox

Я новичок в Angular js, я хочу отобразить локальные данные JSON в HTML-файле. Ниже приведен код, который я пробовал

Post author:admin
Запись опубликована:5 апреля, 2023
Post category:Вопросы по программированию

#javascript #angularjs

Вопрос:

У меня есть образец файла JSON text.json . Я хотел бы отобразить данные в HTML с помощью ng-repeat , но это не работает.

Вот мой код:

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

Есть предложения?

1. Измените {{value.name ' and the age is ' value.age}} на {{value.name}} and the age is {{value.age}}

2. <li ng-repeat=»…»>{{value.name }} и возраст равен {{value.age}}</li>

3. Безуспешно.. ниже приведен код JSON.. [{‘name’:’test’, ‘age’: 28}, {‘name’:’test1′, ‘age’: 28}, {‘name’:’test2′, ‘age’: 28}, {‘name’:’test4′, ‘age’: 28}, {‘name’:’test3′, ‘age’:28}, ]

4. Что вы имеете в виду, говоря «это не работает»? Вы получаете неправильные данные? Вы получаете какие-либо данные вообще? Можете ли вы добавить console.log(response) в строку, где вы получаете ответ, и сообщить нам, что он печатает?

5. Я думаю, что есть какая-то тривиальная ошибка — недопустимый файл JSON или неправильный путь к файлу. Или, возможно, отсутствие веб-сервера — он не будет работать через file протокол.

Ответ №1:

Идея 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

Используете ли вы какой-либо веб-сервер для отображения вашего файла в браузере? Вероятно, он не будет работать через файловый протокол (например, file:///myfile.html ), вам нужен веб-сервер и протокол http (например, http://localhost:9000 ).

Идея 4

Если вы используете какую-то историческую версию AngularJS baybe, возникает проблема с интерполяцией.

{{}} это маркер для интерполяции AngularJS — это означает, что вы можете отобразить любое значение, которое существует в области Angular. Вы создаете его с помощью 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>

1. Возможно, ему не нужно интерполировать все это целиком, но если $scope.names это то, что он предполагает, код, который он опубликовал, все равно должен работать.

2. Безуспешно.. ниже приведен код JSON.. [{‘name’:’test’, ‘age’: 28}, {‘name’:’test1′, ‘age’: 28}, {‘name’:’test2′, ‘age’: 28}, {‘name’:’test4′, ‘age’: 28}, {‘name’:’test3′, ‘age’:28}, ]

3. @Fissio Это зависит от версии Angular, но вы правы, маловероятно, что он использует историческую версию.

Ответ №2:

Измените на это «{{value.name }} и возраст равен {{value.age}}» Только если данные json верны.

Пожалуйста, разделите «контроллер» и «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);
                                                });
                            }