AngularJS не показывает данные JSON в виде списка

0

Я потратил несколько часов на это, и я просто не могу получить данные для отображения на странице. Я не получаю никаких ошибок, и я могу видеть полученные данные в окне консоли. Вот мой code-

На странице html -

<div class="row">
    <div class="col-md-8">
        <ul>
            <li ng-repeat="menuContent in profileMenu">
                <a href="profileMenu/{{menuContent.menuId}}">
                    {{menuContent.menuItem}}
                </a>
            </li>
        </ul>
    </div>
</div>

Внутри файла.json -

[{
    "menuId":"1",
    "menuItem":"About"
},{
    "menuId":"2",   
    "menuItem":"Timeline"
},{
    "menuId":"3",
    "menuItem":"Teams"
},{
    "menuId":"4",   
    "menuItem":"Liked Profiles"
}]

Внутри файла JS -

$http({
    method: "get",
    url: "data/custom-menu.json"
}).then(function(profileMenuContent){
    $scope.profileMenu = profileMenuContent;
    console.log($scope.profileMenu.data);
});
  • 0
    Вы можете сделать вантуз? Также у вас есть нг-приложение и нг-контроллер в вашем HTML?
  • 1
    Внутри JSON у вас было имя объекта как «menuId» и «menuItem». Но в HTML вы используете «id» и «name». Пожалуйста, измените и проверьте
Показать ещё 4 комментария
Теги:

4 ответа

0
Лучший ответ

Спасибо, товарищи за ваши предложения! Теперь я могу просмотреть данные json. Ошибка находится в файле.js. Поскольку я использую обещание вызывать данные, я должен использовать '.data' для получения данных в переменной $ scope. Вот окончательный код -

В файле HTML:

<div class="row">
 <div class="col-md-8">
    <ul>
        <li ng-repeat="menuContent in profileMenu">
            <a href="profileMenu/{{menuContent.menuId}}">
                {{menuContent.menuItem}}
            </a>
        </li>
    </ul>
</div>

В Json:

[{
"menuId":"1",
"menuItem":"About"
 },{
"menuId":"2",   
"menuItem":"Timeline"
 },{
"menuId":"3",
"menuItem":"Teams"
 },{
"menuId":"4",   
"menuItem":"Liked Profiles"
 }]

В js file-

$http({
method: "get",
url: "data/custom-menu.json"
}).then(function(profileMenuContent){
$scope.profileMenu = profileMenuContent.data;
console.log($scope.profileMenu.data);
});
0

Используйте следующий код:

$http({
       method: "get",
       url: "data/custom-menu.json"
}).then(function(profileMenuContent){
      $scope.profileMenu = profileMenuContent.data;
      console.log($scope.profileMenu);
});

Вы используете обещание в своей службе, поэтому оно вернет ваши данные в profileMenuContent.data.

  • 0
    Спасибо, Рроксисам! Работает. После добавления «.data» все работает нормально. В чем секрет этого?
  • 0
    Причина в том, что .then () возвращает объект, который также содержит другую информацию о запросе $ http и фактических данных запроса, хранящихся в свойстве data. Поэтому мы должны использовать свойство .data для получения наших фактических данных. Вы также можете проверить это, утешив ответ from / обещания, который вернет объект.
Показать ещё 1 комментарий
0

здесь работает code-

'use strict';
 var app = angular.module("demo", [], function($httpProvider) {

});

app.controller("demoCtrl", function($scope) {
  $scope.profileMenu = [{
    "menuId":"1",
    "menuItem":"About"
},{
    "menuId":"2",   
    "menuItem":"Timeline"
},{
    "menuId":"3",
    "menuItem":"Teams"
},{
    "menuId":"4",   
    "menuItem":"Liked Profiles"
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app="demo">
  <div ng-controller="demoCtrl">
           <ul>
              <li ng-repeat="menuContent in profileMenu">
                    <a href="profileMenu/{{menuContent.menuId}}">
                        {{menuContent.menuItem}}
                    </a>
              </li>
          </ul>
  </div>
</body>
  • 0
    Да, я редактировал код в соответствии с вашим ответом. Но все равно список не отображается.
  • 0
    @NagaHemanth Я обновил рабочий пример. (он не получает данные из http-запроса, но вы также можете установить переменную в http-запросе.)
0

Прямо сейчас, у вас неправильный key в HTML

Используйте menuContent.menuId вместо menuContent.id и используйте menuContent.menuItem вместо menuContent.name.

Это сработает!

  • 0
    Я отредактировал код согласно вашей инструкции. Но проблема все еще сохраняется и не отображает список.
  • 0
    Что вы получаете в profileMenuContent ?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню