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

atmalone спросил: 03 ноября 2018 в 08:42 в: jquery

Я использую бритву 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"
  }
]

0 ответов