Есть ли способ заставить массив json отображать объекты в HTML-элементах, используя Angularjs

Question

НЕ в состоянии отображать данные объекта json в таблице.

JSON

{"json1":"[{\"years\":2018},{\"years\":2017},{\"years\":2016},{\"years\":2015}]",
"json2":"[{\"year5\":47.5100,\"year4\":50.9300,\"year3\":68.3700,\"year2\":65.2500,\"year1\":0.0000,
\"reportFormula\":\" Total cost of sales/total sales \",\"reportRang\":\"<35%\",\"reportTypeDetail\":\"Cost of sales % of sales\"},

let app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

  let result = {
    data: {
      "json1": "[{\"years\":2018},{\"years\":2017},{\"years\":2016},{\"years\":2015}]",
      "json2": "[{\"year5\":47.5100,\"year4\":50.9300,\"year3\":68.3700,\"year2\":65.2500,\"year1\":0.0000,\"reportFormula\":\"Total cost of sales/total sales\",\"reportRang\":\"<35%\",\"reportTypeDetail\":\"Cost of sales % of sales\"}]"
    }
  }

  $scope.yearList = result.data.json1;
  $scope.dataList = result.data.json2;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <table>
    <th ng-repeat="year in yearList[0].years"> {{year}}</th>
    <th ng-repeat="year in yearList[0].years"> {{year}}</th>

    <tr ng-repeat="data in dataList">
      <td>{{data.reportTypeDetail}}</td>
      <td>{{data.reportFormula}}</td>
    </tr>
  </table>
</div>

Answer 1

Вы используете yearList [0] в вашем ng-repeat, который возвращает объект, подобный следующему,

{"years":2018}

вы можете использовать

<div ng-repeat="(key, value) in yearList[0]">
    {{key}},{{ value }}
</div>

для циклического прохождения вашего объекта или вы можете попробовать следующее для отображения данных из вашего списка.

<div ng-repeat="item in yearList">{{item.years}}</div>
<br>
<div ng-repeat="operation in dataList">
  {{operation.reportTypeDetail}}<br>
  {{operation.reportFormula}}
</div>

Демо

Answer 2

Я обнаружил две проблемы мэра с вашим кодом.Во-первых, запомните золотое правило: «Всегда анализируйте ваш JSON объект».

Почему мне нужно проанализировать мой JSON? Что ж, при использовании JSON.parse() для JSON , полученного из массива, метод вернет массив JavaScript,вместо объекта JavaScript.

Но что это значит? Это означает, что JSON объекты представлены в виде строки JSON, которую JavaScript не может читать напрямую.

Хорошо, тогда как я могу его проанализировать? Синтаксис очень прост JSON.parse(text), где text - строка для анализа в формате JSON, и он вернет объект, соответствующий заданному тексту JSON.

Директива ng-if и атрибут $index

Теперь вы используете следующий код для определения ваших <th> тегов:

<th ng-repeat="year in yearList[0].years"> {{year}}</th>

Что я думаюэто не правильно и ограничивает ваш контроль над значениями.

Я думаю, что лучшим решением будет сочетание атрибута ng-repeat $index с директивой ng-if.Например:

<th ng-repeat="year in yearList" ng-if="$index == 0"> {{year.years}}</th>

Это даст вам больше контроля над значениями и тем, как вы хотите их отобразить.Это рабочий код для тех модификаций:

let app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

  let result = {
    data: {
      "json1": "[{\"years\":2018},{\"years\":2017},{\"years\":2016},{\"years\":2015}]",
      "json2": "[{\"year5\":47.5100,\"year4\":50.9300,\"year3\":68.3700,\"year2\":65.2500,\"year1\":0.0000,\"reportFormula\":\"Total cost of sales/total sales\",\"reportRang\":\"<35%\",\"reportTypeDetail\":\"Cost of sales % of sales\"}]"
    }
  }

  $scope.yearList = JSON.parse(result.data.json1);
  $scope.dataList = JSON.parse(result.data.json2);

  console.log('yearList', $scope.yearList);
  console.log('dataList', $scope.dataList);
});

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <table>
    <th ng-repeat="year in yearList" ng-if="$index == 0"> {{year.years}}</th>
    <th ng-repeat="year in yearList" ng-if="$index == 1"> {{year.years}}</th>


    <tr ng-repeat="data in dataList">
      <td>{{data.reportTypeDetail}}</td>
      <td>{{data.reportFormula}}</td>
    </tr>
  </table>
</div>

Answer 3

Ваш объект JSON содержит два строковых объекта json, которые JavaScript не может непосредственно прочитать.Чтобы разобрать их, используйте JSON.parse (), например:

JSON

{"json1":"[{\"years\":2018},{\"years\":2017},{\"years\":2016},{\"years\":2015}]",
"json2":"[{\"year5\":47.5100,\"year4\":50.9300,\"year3\":68.3700,\"year2\":65.2500,\"year1\":0.0000,
\"reportFormula\":\" Total cost of sales/total sales \",\"reportRang\":\"<35%\",\"reportTypeDetail\":\"Cost of sales % of sales\"},

JS

$scope.yearList=JSON.parse(result.data.json1);
$scope.dataList=JSON.parse(result.data.json2);

HTML

<th   ng-repeat="year in yearList[0].years">{{year}}</th>
<th   ng-repeat="year in yearList[1].years">{{year}}</th>
...
<tr ng-repeat="operation in dataList">
<td>{{operation.reportTypeDetail}}</td>
<td>{{operation.reportFormula}}</td>
.....