Проблема с использованием страниц .NET Core Razor с JQuery для визуализации значений из вложенного JSON

Question

Я использую бритву Pages в .NET Core, и у меня есть контроллер, который я вызываю, используя JQuery.Мое намерение состоит в том, чтобы получить значения из JSON, возвращаемые контроллером, и создать повторно используемый фрагмент HTML, который я буду отображать в DOM, и буду соответствующим образом стилизовать.Я почти у цели, но я не разбираюсь в JQuery.

ПРИМЕЧАНИЕ: я использую пример базы данных, поэтому мои значения пока только заполнители.

Это HTML-код, отображаемый в данный момент

@page
    @model Monitor.Web.Pages.Dashboard.IndexModel
    @{
        ViewData["Title"] = "Index";
    }

    <h2>Index</h2>
    <ul class="" id="monitor-list">
    </ul>

    @section scripts{
        <script type="text/javascript">
            $(function () {
                $.get('/api/GetDashboardItemsAsync').done(function (monitors) {
                    $.each(monitors, function (i, monitor) {
                        var monitorItem = `<ul><li><strong>${monitor.title} - Count: ${monitor.count} - </strong><span>Status: ${monitor.status}</span></li>
                        <div id="part-list"></div></ul>`;
                        $.each(monitor.parts, function (i, part) {
                            var partList = 
                                `<ul>
                                    <li>Part: ${part.serialNumber}</li>
                                    <li>Date at data source:${part.dateAtDataSource}</li>
                                    <li>Location: ${part.location}</li>
                                    <li>Date Processed: ${part.dateProcessed}</li>
                                </ul>`
                            $('#part-list').append(partList);
                        });
                        $('#monitor-list').append(monitorItem);
                    });
                });
            });
        </script>
    }

Объект "parts" в моем JSON - это область, вызывающая у меня проблемы.Мне нужно, чтобы детали, связанные с DataSource1, были перечислены в DataSource1, и так далее для DataSource2 и DataSource3.Кто-нибудь может мне помочь с проблемой JQuery, которая у меня возникла, я думаю, что она связана со второй $.each

[{
    "title": "DataSource1",
    "parts": [{
        "serialNumber": "Sales Representative",
        "dateAtDataSource": "2018-11-26T14:58:01.4013602Z",
        "location": "",
        "dateProcessed": "0001-01-01T00:00:00"
      },
      {
        "serialNumber": "Senior Manager",
        "dateAtDataSource": "2018-11-26T14:58:01.4014315Z",
        "location": "",
        "dateProcessed": "0001-01-01T00:00:00"
      },
      {
        "serialNumber": "Sales Representative",
        "dateAtDataSource": "2018-11-26T14:58:01.4014908Z",
        "location": "",
        "dateProcessed": "0001-01-01T00:00:00"
      },
      {
        "serialNumber": "Sales Representative",
        "dateAtDataSource": "2018-11-26T14:58:01.4015859Z",
        "location": "",
        "dateProcessed": "0001-01-01T00:00:00"
      },
      {
        "serialNumber": "Inside Sales Coordinator",
        "dateAtDataSource": "2018-11-26T14:58:01.401888Z",
        "location": "",
        "dateProcessed": "0001-01-01T00:00:00"
      }
    ],
    "count": 5,
    "warningThreshold": [{
        "warningName": "Green",
        "threshold": 0
      },
      {
        "warningName": "Orange",
        "threshold": 5
      }
    ],
    "status": "Orange"
  },
  {
    "title": "DataSource2",
    "parts": [{
        "serialNumber": "Sales Representative",
        "dateAtDataSource": "2018-11-26T14:58:01.4030892Z",
        "location": "",
        "dateProcessed": "0001-01-01T00:00:00"
      },
      {
        "serialNumber": "Senior Manager",
        "dateAtDataSource": "2018-11-26T14:58:01.4031069Z",
        "location": "",
        "dateProcessed": "0001-01-01T00:00:00"
      },
      {
        "serialNumber": "Sales Representative",
        "dateAtDataSource": "2018-11-26T14:58:01.4031809Z",
        "location": "",
        "dateProcessed": "0001-01-01T00:00:00"
      },
      {
        "serialNumber": "Sales Representative",
        "dateAtDataSource": "2018-11-26T14:58:01.4032413Z",
        "location": "",
        "dateProcessed": "0001-01-01T00:00:00"
      },
      {
        "serialNumber": "Inside Sales Coordinator",
        "dateAtDataSource": "2018-11-26T14:58:01.4032912Z",
        "location": "",
        "dateProcessed": "0001-01-01T00:00:00"
      }
    ],
    "count": 5,
    "warningThreshold": [{
        "warningName": "Green",
        "threshold": 0
      },
      {
        "warningName": "Orange",
        "threshold": 5
      }
    ],
    "status": "Orange"
  },
  {
    "title": "DataSource3",
    "parts": [{
      "serialNumber": "Senior Manager",
      "dateAtDataSource": "2018-11-26T14:58:01.404735Z",
      "location": "",
      "dateProcessed": "0001-01-01T00:00:00"
    }],
    "count": 1,
    "warningThreshold": [{
        "warningName": "Green",
        "threshold": 0
      },
      {
        "warningName": "Orange",
        "threshold": 5
      }
    ],
    "status": "Green"
  }
]

Answer 1

Я сделал некоторую реструктуризацию, вы можете проверить вывод во фрагменте.

var monitors = [{
        "title": "DataSource1",
        "parts": [{
            "serialNumber": "Sales Representative",
            "dateAtDataSource": "2018-11-26T14:58:01.4013602Z",
            "location": "",
            "dateProcessed": "0001-01-01T00:00:00"
          },
          {
            "serialNumber": "Senior Manager",
            "dateAtDataSource": "2018-11-26T14:58:01.4014315Z",
            "location": "",
            "dateProcessed": "0001-01-01T00:00:00"
          },
          {
            "serialNumber": "Sales Representative",
            "dateAtDataSource": "2018-11-26T14:58:01.4014908Z",
            "location": "",
            "dateProcessed": "0001-01-01T00:00:00"
          },
          {
            "serialNumber": "Sales Representative",
            "dateAtDataSource": "2018-11-26T14:58:01.4015859Z",
            "location": "",
            "dateProcessed": "0001-01-01T00:00:00"
          },
          {
            "serialNumber": "Inside Sales Coordinator",
            "dateAtDataSource": "2018-11-26T14:58:01.401888Z",
            "location": "",
            "dateProcessed": "0001-01-01T00:00:00"
          }
        ],
        "count": 5,
        "warningThreshold": [{
            "warningName": "Green",
            "threshold": 0
          },
          {
            "warningName": "Orange",
            "threshold": 5
          }
        ],
        "status": "Orange"
      },
      {
        "title": "DataSource2",
        "parts": [{
            "serialNumber": "Sales Representative",
            "dateAtDataSource": "2018-11-26T14:58:01.4030892Z",
            "location": "",
            "dateProcessed": "0001-01-01T00:00:00"
          },
          {
            "serialNumber": "Senior Manager",
            "dateAtDataSource": "2018-11-26T14:58:01.4031069Z",
            "location": "",
            "dateProcessed": "0001-01-01T00:00:00"
          },
          {
            "serialNumber": "Sales Representative",
            "dateAtDataSource": "2018-11-26T14:58:01.4031809Z",
            "location": "",
            "dateProcessed": "0001-01-01T00:00:00"
          },
          {
            "serialNumber": "Sales Representative",
            "dateAtDataSource": "2018-11-26T14:58:01.4032413Z",
            "location": "",
            "dateProcessed": "0001-01-01T00:00:00"
          },
          {
            "serialNumber": "Inside Sales Coordinator",
            "dateAtDataSource": "2018-11-26T14:58:01.4032912Z",
            "location": "",
            "dateProcessed": "0001-01-01T00:00:00"
          }
        ],
        "count": 5,
        "warningThreshold": [{
            "warningName": "Green",
            "threshold": 0
          },
          {
            "warningName": "Orange",
            "threshold": 5
          }
        ],
        "status": "Orange"
      },
      {
        "title": "DataSource3",
        "parts": [{
          "serialNumber": "Senior Manager",
          "dateAtDataSource": "2018-11-26T14:58:01.404735Z",
          "location": "",
          "dateProcessed": "0001-01-01T00:00:00"
        }],
        "count": 1,
        "warningThreshold": [{
            "warningName": "Green",
            "threshold": 0
          },
          {
            "warningName": "Orange",
            "threshold": 5
          }
        ],
        "status": "Green"
      }
    ];

$(function(){
  $.each(monitors, function (i, item) {
    var header = `<li><strong>Data Source: ${item.title } - Count: ${ item.count }</strong> - Status: ${ item.status }</li>`;
    
    $('#data').append(header);
    
    $.each(item.parts, function (j, part) {
      var parts = `<li>Part: ${part.serialNumber }</li>
                   <li>Date at data source: ${ part.dateAtDataSource }</li>
                   <li>Location: ${ part.location }</li><li>Date Processed: ${ part.dateProcessed }</li>`;
      
      $('#data').append(parts);
    });    
  });
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
  <ul id="data"></ul>  
  
</body>
</html>

По сути, вы не должны помещать <div> непосредственно в <ul>, но это не было проблемой.Вам нужно добавить заголовок перед повторением частей и поддерживать один <ul>, который облегчит вам задачу.Было бы лучше, если бы вы могли избежать создания элементов HTML непосредственно из скрипта;Вы можете по крайней мере иметь <ul>, определенный в самом HTML, вместо того, чтобы создавать его в цикле.

Answer 2

Использование дублированного идентификатора в HTML неверно, используйте другой символ для обнаружения элемента, такого как класс или пользовательский атрибут.'id = "part-list"'.измените его на class = "part-list" и $ ('. part-list: last-child'). append (partList)

$.each(monitors, function (i, monitor) {
                    var monitorItem = `<ul><li><strong>${monitor.title} - Count: ${monitor.count} - </strong><span>Status: ${monitor.status}</span></li>
                    <div class="part-list"></div></ul>`;                        
                    $('#monitor-list').append(monitorItem);
                    $.each(monitor.parts, function (i, part) {
                        var partList = 
                            `<ul>
                                <li>Part: ${part.serialNumber}</li>
                                <li>Date at data source:${part.dateAtDataSource}</li>
                                <li>Location: ${part.location}</li>
                                <li>Date Processed: ${part.dateProcessed}</li>
                            </ul>`
                        $('#monitor-list .part-list:last-child').append(partList);
                    });
                });