Issue using .NET Core Razor pages with JQuery to render values from nested JSON

Question

I am using razor Pages in .NET Core and I have a controller that I am calling using JQuery. My intention is to get the values from the JSON, returned by the controller and create a re-usable snippet of HTML that I will render to the DOM and I will style accordingly. I am almost there but I am not savvy with JQuery.

NOTE: I am using a sample database so my values are just placeholders for now.

This is the currently rendered 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>
    }

The "parts" object in my JSON is the area giving me issues. I need the parts associated with DataSource1 to be listed under DataSource1, and so on for DataSource2 and DataSource3. Can anybody assist me with the JQuery issue I am having, I believe it is related to the second $.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

I have made some re-structuring, you can check the output in the snippet.

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>

Basically, you should not put a <div> inside an <ul> directly, but that was not the problem. You need to append the header before iterating the parts and need to maintain a single <ul>, that will make things easier for you. It would be better if you could avoid creating HTML elements directly from script; You can atleast have a <ul> defined in HTML itself instead of creating it within loop.

Answer 2

Using duplicate ID in HTML is wrong, use another symbole for detecting element like class or custom attribute. ' id="part-list" '. chage it to class="part-list", and $('.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);
                    });
                });