使用 AngularJS 从嵌套的 JSON 文件中解析 HTML答案

【问题标题】：Parse HTML from a nested JSON file with AngularJS使用 AngularJS 从嵌套的 JSON 文件中解析 HTML
【发布时间】：2020-11-14 19:02:48
【问题描述】：

我正在尝试使用 AngularJS 解析嵌套的 JSON。其中有些项目将在整个页面中使用，但其中也有嵌套的新闻项目。我不确定如何解决这个问题。

test.json

{
  "CustomerName" : "TEST",
  "PaidCustomer" : true,
  "LaunchEndDate" : "24-07-2021",
  "LauncherTitle" : "Launcher Title",
  "LauncherSlogan" : "LauncherSlogan",
  "CommunityLogo" : "logo.jpg",
  "news" : [
    {
      "Title" : "News 1",
      "Description" : "Newsmessage 1",
      "FeaturesImage" : "",
      "Author" : "Hutserino",
      "Tags" : [ "#launcher", "#HellYeah" ],
    },
    {
      "Title" : "News 2",
      "Description" : "news 2",
      "FeaturesImage" : "",
      "Author" : "Hutserino",
      "Tags" : [ "#launcher", "#HellYeah" ]
    }
  ]
}

我已经试过了：

角度代码

<script>
(function() {
  angular.module('myApp', []);

  function myController($scope, $http) {
    return $http.get('launcher.json')
    .then(function(response) {
      return response.data;
    });

    return {
      LauncherTitle: LauncherTitle,
      LauncherSlogan: LauncherSlogan
    }

    var data = response.data;

    data.forEach(data.news, function(clientdata.news, index) {
      angular.forEach(clientdata.news, function(newsitem, index){
        $scope.news.push(newsitem);
      });
    });

  }
})();

</script>

HTML

<div ng-app="myApp" ng-controller="myController"> 
                  <h1 class="display-3">{{ GameLauncherTitle }}</h1>
                  <h3 class="display-5">{{ GameLauncherSlogan }}</h3>
    
    <div class="card-columns">
                  <div class="card" ng-repeat="newsitem in news">
                    <img src="{{ newsitem.FeaturesImage }}" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title text-dark">{{ newsitem.Title }}</h5>
                      <p class="card-text text-dark">{{ newsitem.Description }}</p>
                    </div>
                  </div>
                </div>
    </div>

但这并没有返回任何结果。

【问题讨论】：

这部分是什么：return $http.get('launcher.json').then(function(response) {return response.data;}); 应该是什么？
我已经阅读了多篇关于此的文章，并将代码合并在一起，尽管这是正确的方法。无论如何返回 response.data 必须像 LauncherSlogan 和 LauncherLogo 等一样返回。所有不在新闻部分的数据。
是的，但是您不是要退出您的myController 吗？该函数以 return 语句结束，因此整个数据部分不会运行
就像我说的，我还在学习 :) 你能给我一些例子或文章吗？
我不知道退货应该做什么，一团糟。在学习 Angular 之前，您可能想看看 JS。也就是说，我有一个很好的想法，你想做什么，所以期待在几分钟内得到答复

标签： html json angularjs nested

【解决方案1】：

您将退出 myController 函数并返回两个返回值，我想您可能一直在尝试

(function() {
  var myApp = angular.module('myApp', []);

  myApp.controller('myController', function($scope, $http) {
    $scope.news = []

    $http.get('launcher.json')
    .then(function(r) {return JSON.parse(r)})
    .then(function(response) {
      response.news.forEach(function(newsitem){
          $scope.news.push(newsitem);
        });
      });
    });
})();

你可以试试这个而不是你的 Angular 代码吗？

干净版：

(() => {
  const myApp = angular.module('myApp', []);

  myApp.controller('myController', ($scope, $http) => {
    $scope.news = []
    $http.get('launcher.json')
      .then(r => JSON.parse(r))
      .then(response => {
        response.news.forEach(function (newsitem) {
          $scope.news.push(newsitem);
        })
      })
  })
})();

【讨论】：

对不起，但这不是我的解决方案，它没有解析任何东西。