How to sort and group json domtree for select option list

Question

ASP.NET 7 C# MVC shopping cart controller gets DPD picup point list using

      using HttpClient client = new() { BaseAddress = new Uri("http://ftp.dpdbaltics.com") };
      var domTree = await client.GetFromJsonAsync<JsonNode>("PickupParcelShopData.json");


Result is array of json objects sorted by parcelShopId property:

    [
      {
        "parcelShopId": "EE90001",
        "legacyShopId": "190001",
        "parcelShopType": "PickupStation",
        "companyName": "Automat 1 place xxx",
        "companyShortName": "Automat1",
        "street": "\u00D5ism\u00E4e tee 46",
        "houseNo": "",
        "addressLine2": "London",
        "countryCode": "UK",
        "zipCode": "13512",
        "city": "Tallinn",
        "longitude": "24.64727",
        "latitude": "59.411726",
        "openingHours": [
          {
            "weekday": "Monday",
...
           "openMorning": "0001",
            "closeMorning": "1200",
            "openAfternoon": "1200",
            "closeAfternoon": "2359"
          },
          {
            "weekday": "Tuesday",
            "openMorning": "0001",
            "closeMorning": "1200",
            "openAfternoon": "1200",
            "closeAfternoon": "2359"
          },
          {
            "weekday": "Wednesday",
            "openMorning": "0001",
            "closeMorning": "1200",
            "openAfternoon": "1200",
            "closeAfternoon": "2359"
          },
          {
            "weekday": "Thursday",
            "openMorning": "0001",
            "closeMorning": "1200",
            "openAfternoon": "1200",
            "closeAfternoon": "2359"
          },
          {
            "weekday": "Friday",
            "openMorning": "0001",
            "closeMorning": "1200",
            "openAfternoon": "1200",
            "closeAfternoon": "2359"
          },
          {
            "weekday": "Saturday",
            "openMorning": "0001",
            "closeMorning": "1200",
            "openAfternoon": "1200",
            "closeAfternoon": "2359"
          },
          {
            "weekday": "Sunday",
            "openMorning": "0001",
            "closeMorning": "1200",
            "openAfternoon": "1200",
            "closeAfternoon": "2359"
          }
        ]
      },
      {
        "parcelShopId": "EE90002",
        "legacyShopId": "190002",
        "parcelShopType": "PickupStation",
        "companyName": "Automa3 xxx ",
        "companyShortName": "Automa3",
        "street": "Endla 45",
        "houseNo": "",
        "addressLine2": "Riga",
        "countryCode": "EE",
        "zipCode": "10615",
        "city": "Riga",
        "longitude": "24.7227",
        "latitude": "59.42714",
        "openingHours": [
     ....

Razor View renders select element from it using

    <select id='dpd_select'>
    @foreach ( var esi in domTree.AsArray() ) {
      <option value='@esi["parcelShopId"]'>@esi["companyName"]</option>
      }
    </select>

It is difficult to find pickup point from this order.

How to order and group by select elemnt option list by 3 properties:

     countryCode
     city
     companyName

Should domTree sorted and grouped?

Answer 1

Hi @Andrus

How to order and group by select elemnt option list by 3 properties: countryCode, city ,companyName Should domTree sorted and grouped?

Yes, to group related options in a drop-down list, it is better to sort and group the domTree.

Try to create the following view model, use them to store the grouped and sorted result.

    public class CountryDataViewModel
    {
        public string CountryCode { get; set; }
        public List<CityDataViewModel> Data { get; set; }
    }

    public class CityDataViewModel
    {
        public string City { get; set; }
        public JsonNode[] SubData { get; set; }
    }

Then, in the controller, use the following code to sort and group the json data:

        public async Task<IActionResult> Index()
        {
            using HttpClient client = new() { BaseAddress = new Uri("http://ftp.dpdbaltics.com") };
            var domTree = await client.GetFromJsonAsync<JsonNode>("PickupParcelShopData.json");

            var result = domTree.AsArray().GroupBy(c => (string)c["countryCode"]).Select(c=> 
                new CountryDataViewModel()
                { 
                    CountryCode = c.Key, 
                    Data = c.GroupBy(d => (string)d["city"]).Select( e=> 
                    new CityDataViewModel()
                    { 
                        City = e.Key, 
                        SubData = e.OrderBy(d => (string)d["companyName"]).ToArray()
                    }
                    ).ToList()
                }).ToList();

            ViewBag.domtree = result;
            return View();
        }

In the view page, use optgroup element to add groups in the drop-down list.

@{
    var domTree = ViewBag.domtree as List<CountryDataViewModel>;  
}
<select id='dpd_select'>
    @foreach (var country in domTree)
    {
        <optgroup label="@country.CountryCode">
            @foreach (var city in country.Data)
            {
                <optgroup label="&nbsp;&nbsp;&nbsp;&nbsp;@city.City">
                    @foreach (var esi in city.SubData)
                    {
                        <option value='@esi["parcelShopId"]'>@esi["companyName"]</option>
                    }
                </optgroup>
            }

        </optgroup>
    }
</select>

The result as below:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion