locked
display webapi json data as navigation menu RRS feed

  • Question

  • User1182587605 posted

    Hi,

    I have a functionality to change my API output to navigation menu. I am able to read the data from it but I need to set it so that the data comes into a navigation menu for me to provide navigation. My API output is:

    {
      "registeredCarriers": [
        {
          "guID": "47885300-e62c-4608-985f-7a4b9d4c0a58",
          "symbol": "DD_Asia",
          "displayName": "DDL(Asia)",
          "systemName": "DDL(Asia)",
          "services": [
            {
              "carrierGuID": "47885300-e62c-4608-985f-7a4b9d4c0a58",
              "symbol": "EXP",
              "displayName": "DDL",
              "systemName": "DDL"
            },
            {
              "carrierGuID": "47885300-e62c-4608-985f-7a4b9d4c0a58",
              "symbol": "EXP_0900",
              "displayName": "DDL",
              "systemName": "DDL"
            },
            {
              "carrierGuID": "47885300-e62c-4608-985f-7a4b9d4c0a58",
              "symbol": "EXP_1200",
              "displayName": "DDL",
              "systemName": "DDL"
            }
          ],
          "documents": [
            {
              "carrierGuID": "47885300-e62c-4608-985f-7a4b9d4c0a58",
              "symbol": "DDL",
              "displayName": "DDL",
              "systemName": "DDL",
              "contentSource": 4,
              "options": [
                {
                  "carrierGuID": "47885300-e62c-4608-985f-7a4b9d4c0a58",
                  "documentSymbol": "DHL_ASIA_PACKAGE_LABEL",
                  "stock": 1,
                  "output": 1
                },
                {
                  "carrierGuID": "47885300-e62c-4608-985f-7a4b9d4c0a58",
                  "documentSymbol": "DDL_ASIA",
                  "stock": 1,
                  "output": 2
                }
              ]
            }
          ],
          "isModified": false
        },
        {
          "guID": "c20505a8-24a2-4030-be08-4d89b8fc26e7",
          "symbol": "S_EXPRESS",
          "displayName": "Sample Express",
          "systemName": "Sample Express",
          "services": [
            {
              "carrierGuID": "c20505a8-24a2-4030-be08-4d89b8fc26e7",
              "symbol": "EXP",
              "displayName": "sample Express",
              "systemName": "sample Express"
            },
            {
              "carrierGuID": "c20505a8-24a2-4030-be08-4d89b8fc26e7",
              "symbol": "PRM",
              "displayName": "Sample Premium",
              "systemName": "Sample Premium"
            },
            {
              "carrierGuID": "c20505a8-24a2-4030-be08-4d89b8fc26e7",
              "symbol": "PRM_FIX",
              "displayName": "Sample Premium Fixed Price",
              "systemName": "Sample Premium Fixed Price"
            }
          ],
          "documents": [
            {
              "carrierGuID": "c20505a8-24a2-4030-be08-4d89b8fc26e7",
              "symbol": "STAR",
              "displayName": "Sta Express Package Label",
              "systemName": "Sta Express Package Label",
              "contentSource": 4,
              "options": [
                {
                  "carrierGuID": "c20505a8-24a2-4030-be08-4d89b8fc26e7",
                  "documentSymbol": "STA",
                  "stock": 1,
                  "output": 1
                },
                {
                  "carrierGuID": "c20505a8-24a2-4030-be08-4d89b8fc26e7",
                  "documentSymbol": "STA",
                  "stock": 1,
                  "output": 2
                }
              ]
            },
            {
              "carrierGuID": "c20505a8-24a2-4030-be08-4d89b8fc26e7",
              "symbol": "Sample_TRACK_MANIFEST",
              "displayName": "Sample Express Manifest",
              "systemName": "Sample Express Manifest",
              "contentSource": 6,
              "options": [
                {
                  "carrierGuID": "c20505a8-24a2-4030-be08-4d89b8fc26e7",
                  "documentSymbol": "SAMPLE",
                  "stock": 3,
                  "output": 3
                }
              ]
            }
          ],
          "isModified": false
        },
        {
          "guID": "e45a0710-7c21-4be5-aa78-bab2494d0688",
          "symbol": "AMPLE",
          "displayName": "AMPLE",
          "systemName": "AMPLE",
          "services": [
            {
              "carrierGuID": "e45a0710-7c21-4be5-aa78-bab2494d0688",
              "symbol": "EXP_0900",
              "displayName": "AMPLE 0",
              "systemName": "AMPLE 0"
            },
            {
              "carrierGuID": "e45a0710-7c21-4be5-aa78-bab2494d0688",
              "symbol": "EXP_1000",
              "displayName": "AMPLE 10:00",
              "systemName": "AMPLE 10:00"
            },
            {
              "carrierGuID": "e45a0710-7c21-4be5-aa78-bab2494d0688",
              "symbol": "EXP_1200",
              "displayName": "AMPLE 12:00",
              "systemName": "AMPLE 12:00"
            },
            {
              "carrierGuID": "e45a0710-7c21-4be5-aa78-bab2494d0688",
              "symbol": "OVN",
              "displayName": "AMPLE Overnight Express",
              "systemName": "AMPLE Overnight Express"
            },
            {
              "carrierGuID": "e45a0710-7c21-4be5-aa78-bab2494d0688",
              "symbol": "ROAD",
              "displayName": "AMPLE Road Express",
              "systemName": "AMPLE Road Express"
            },
            {
              "carrierGuID": "e45a0710-7c21-4be5-aa78-bab2494d0688",
              "symbol": "SENSITIVE",
              "displayName": "AMPLE Sensitive Express",
              "systemName": "AMPLE Sensitive Express"
            }
          ],
          "documents": [
            {
              "carrierGuID": "e45a0710-7c21-4be5-aa78-bab2494d0688",
              "symbol": "AMPLE_PACKAGE_LABEL",
              "displayName": "AMPLE Package Label",
              "systemName": "AMPLE Package Label",
              "contentSource": 4,
              "options": []
            }
          ],
          "isModified": false
        }
      ],
      "registeredDocuments": null,
      "success": true,
      "errorCode": 0,
      "displayMessage": null,
      "systemMessage": null,
      "exceptionDetail": null
    }

    My cshtml page looks like:

    @model Tucson.Services.Common.Administration.RegistrationResponse
    @{ Layout = "_Layout";}
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
    
    <form asp-action="RegisterInstalled" asp-controller="CarriersAndDocuments">
        <div class="container">
            <div class="col-md-12 Card-Subcription">
                <div class="card flex-fill w-100">
                    <div class="card-header">
                        Carriers List
                    </div>
                    <div class="card-body py-3 container container-fluid mh-100" style="margin-top:8px;">
                        <nav id="sidebar" class="">
                            <div class="col-md-12 row container-fluid container">
                                <div class="col-xs-6 maindiv mh-100" id="carrierResults">
                                    <h6>Registered Carriers</h6>
                                    @{ foreach (var item in Model.RegisteredCarriers)
                                        {
                                            <ul class="sidebar-nav">
                                                <li class="sidebar-header">
                                                    <a class="CarrierId sidebar-link" data-toggle="" aria-expanded="false" href="#" id='"@item.GuID"' onclick="clickfunction('@item.GuID')">
                                                        @item.DisplayName
                                                    </a>
                                                    @{ foreach (var service in Model.RegisteredCarriers)
                                                        {
                                                            <ul class="collapse" id="@item.GuID">
                                                                <li class="sidebar-item">Services</li>
                                                                <li class="sidebar-item">
                                                                    <a class="CarrierId sidebar-link" href="#" id='"@item.GuID"' onclick="">
                                                                        @*@service.DisplayName*@
                                                                    </a>
                                                                </li>
                                                             </ul>
                                                        }
                                                      }
                                                    @{ foreach (var service in Model.RegisteredCarriers)
                                                        {
                                                            <ul class="collapse" id="@item.GuID">
                                                                <li class="sidebar-item">Documents</li>
                                                                <li class="sidebar-item">
                                                                    <a class="CarrierId sidebar-link" href="#" id='"@item.GuID"' onclick="">
                                                                        @*@service.DisplayName*@
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        }
                                                      }
                                                </li>
                                            </ul>
                                        }
                                    }
                                   
                                        @*@{ foreach (var item in Model.RegisteredCarriers)
                {
                    <ul class="sidebar-nav">
                        <li class="sidebar-header">
                            <a class="CarrierId sidebar-link" data-toggle="" aria-expanded="false" href="#" id='"@item.GuID"' onclick="clickfunction('@item.GuID')">
                                @item.DisplayName
                            </a>
                            <ul class="collapse" id="@item.GuID">
                                <li class="sidebar-item">
                                    <a class="CarrierId sidebar-link" href="#" id='"@item.GuID"' onclick="">
                                        Enabled Documents  @item.DisplayName
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                }
            }*@
                                    @*<h6>Registered Documents</h6>
            @{ foreach (var item in Model.RegisteredDocuments)
                {
                    <ul class="sidebar-nav">
                        <li class="sidebar-header">
                            <a class="DocumentId sidebar-link" data-toggle="" aria-expanded="false" href="#" id='"@item.GuID"' onclick="clickfunction('@item.GuID')">
                                @item.DisplayName
                            </a>
                            <ul class="collapse" id="@item.GuID">
                                <li class="sidebar-item">
                                    <a class="CarrierId sidebar-link" href="#" id='"@item.GuID"' onclick="">
                                        Enabled Documents  @item.SystemName
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                }
            }*@
                                </div>
                                <div id="divLocationDetails" class=" col-md-8 collapse">
    
                                    <div class="card-body py-3 col-md-12">
                                        @Html.EditorFor(x => x.RegisteredCarriers[0].DisplayName)
                                    </div>
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>        
        </div>
    </form>
    
    @section scripts{
        <script>
            var dataSet = [];
            var carrierResopnse = JSON.parse('@Html.Raw(Json.Serialize(Model.RegisteredCarriers))');
            $(document).ready(function () {
    
            });            
            function clickfunction(CarrierId) {
                if ($("#" + CarrierId).hasClass('collapse')) {
                    $("#" + CarrierId).removeClass('collapse');
                }
                else {
                      $("#" + CarrierId).addClass('collapse');
                }
            }    
            function clickfunction(DocumentId) {
                if ($("#" + DocumentId).hasClass('collapse')) {
                    $("#" + DocumentId).removeClass('collapse');
                }
                else {
                      $("#" + DocumentId).addClass('collapse');
                }           
            }    
        </script>
    }
    

    Any modification is appreciated but I need to display branches for any display name in that part of the section. Please help me with this. I am unable to do this..

    Friday, November 29, 2019 3:10 PM

Answers

  • User61956409 posted

    Hi Deepak,

    acmedeepak

    I need to display branches for any display name in that part of the section.

    To generate and display services and documents of each RegisteredCarrier, you can refer to the following sample.

    In View

    <div class="container">
        <div class="col-md-12 Card-Subcription">
            <div class="card flex-fill w-100">
                <div class="card-header">
                    Carriers List
                </div>
                <div class="card-body py-3 container container-fluid mh-100" style="margin-top:8px;">
                    <nav id="sidebar" class="">
                        <div class="col-md-12 row container-fluid container">
                            <div class="col-xs-6 maindiv mh-100" id="carrierResults">
                                <h6>Registered Carriers</h6>
                                @{ foreach (var item in Model.registeredCarriers)
                                    {
                                        <ul class="sidebar-nav">
                                            <li class="sidebar-header">
                                                <a class="CarrierId sidebar-link" data-toggle="" aria-expanded="false" href="#" id='"@item.guID"' onclick="clickfunction(this)">
                                                    @item.displayName
                                                </a>
                                                <ul class="collapse">
                                                    <li class="sidebar-item">Services</li>
                                                    @{ foreach (var service in item.services)
                                                        {
    
                                                            <li class="sidebar-item">
                                                                <a class="CarrierId sidebar-link" href="#">
                                                                    @service.symbol
                                                                </a>
                                                            </li>
                                                        }
                                                    }
                                                </ul>
    
                                                <ul class="collapse">
                                                    <li class="sidebar-item">Documents</li>
                                                    @{ foreach (var document in item.documents)
                                                        {
    
                                                            <li class="sidebar-item">
                                                                <a class="CarrierId sidebar-link" href="#">
                                                                    @document.displayName
                                                                </a>
                                                            </li>
                                                        }
                                                    }
                                                </ul>
                                            </li>
                                        </ul>
                                    }
                                }
    
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <script>
        function clickfunction(pa) {
            console.log($(pa).siblings("ul").length);
            $(pa).siblings("ul").each(function (index, el) {
                if ($(el).hasClass('collapse')) {
                    $(el).removeClass('collapse');
                }
                else {
                    $(el).addClass('collapse');
                }
            })
                
        }
    </script>

    In Controller

    public ActionResult ShowMenu()
    {
        RegistrationResponse modeldata = null;
    
        using (HttpClient client=new HttpClient())
        {
            var data_RC = client.GetStringAsync("http://xxx/xxx").Result;
    
            modeldata = JsonConvert.DeserializeObject<RegistrationResponse>(data_RC);
        }
    
        return View(modeldata);
    }

    Model Class(es)

    public class Service
    {
        public string carrierGuID { get; set; }
        public string symbol { get; set; }
        public string displayName { get; set; }
        public string systemName { get; set; }
    }
    
    public class Document
    {
        public string carrierGuID { get; set; }
        public string symbol { get; set; }
        public string displayName { get; set; }
        public string systemName { get; set; }
        public int contentSource { get; set; }
        public List<object> options { get; set; }
    }
    
    public class RegisteredCarrier
    {
        public string guID { get; set; }
        public string symbol { get; set; }
        public string displayName { get; set; }
        public string systemName { get; set; }
        public List<Service> services { get; set; }
        public List<Document> documents { get; set; }
        public bool isModified { get; set; }
    }
    
    public class RegistrationResponse
    {
        public List<RegisteredCarrier> registeredCarriers { get; set; }
        public object registeredDocuments { get; set; }
        public bool success { get; set; }
        public int errorCode { get; set; }
        public object displayMessage { get; set; }
        public object systemMessage { get; set; }
        public object exceptionDetail { get; set; }
    }

    Test Result

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 2, 2019 7:07 AM

All replies

  • User61956409 posted

    Hi Deepak,

    acmedeepak

    I need to display branches for any display name in that part of the section.

    To generate and display services and documents of each RegisteredCarrier, you can refer to the following sample.

    In View

    <div class="container">
        <div class="col-md-12 Card-Subcription">
            <div class="card flex-fill w-100">
                <div class="card-header">
                    Carriers List
                </div>
                <div class="card-body py-3 container container-fluid mh-100" style="margin-top:8px;">
                    <nav id="sidebar" class="">
                        <div class="col-md-12 row container-fluid container">
                            <div class="col-xs-6 maindiv mh-100" id="carrierResults">
                                <h6>Registered Carriers</h6>
                                @{ foreach (var item in Model.registeredCarriers)
                                    {
                                        <ul class="sidebar-nav">
                                            <li class="sidebar-header">
                                                <a class="CarrierId sidebar-link" data-toggle="" aria-expanded="false" href="#" id='"@item.guID"' onclick="clickfunction(this)">
                                                    @item.displayName
                                                </a>
                                                <ul class="collapse">
                                                    <li class="sidebar-item">Services</li>
                                                    @{ foreach (var service in item.services)
                                                        {
    
                                                            <li class="sidebar-item">
                                                                <a class="CarrierId sidebar-link" href="#">
                                                                    @service.symbol
                                                                </a>
                                                            </li>
                                                        }
                                                    }
                                                </ul>
    
                                                <ul class="collapse">
                                                    <li class="sidebar-item">Documents</li>
                                                    @{ foreach (var document in item.documents)
                                                        {
    
                                                            <li class="sidebar-item">
                                                                <a class="CarrierId sidebar-link" href="#">
                                                                    @document.displayName
                                                                </a>
                                                            </li>
                                                        }
                                                    }
                                                </ul>
                                            </li>
                                        </ul>
                                    }
                                }
    
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <script>
        function clickfunction(pa) {
            console.log($(pa).siblings("ul").length);
            $(pa).siblings("ul").each(function (index, el) {
                if ($(el).hasClass('collapse')) {
                    $(el).removeClass('collapse');
                }
                else {
                    $(el).addClass('collapse');
                }
            })
                
        }
    </script>

    In Controller

    public ActionResult ShowMenu()
    {
        RegistrationResponse modeldata = null;
    
        using (HttpClient client=new HttpClient())
        {
            var data_RC = client.GetStringAsync("http://xxx/xxx").Result;
    
            modeldata = JsonConvert.DeserializeObject<RegistrationResponse>(data_RC);
        }
    
        return View(modeldata);
    }

    Model Class(es)

    public class Service
    {
        public string carrierGuID { get; set; }
        public string symbol { get; set; }
        public string displayName { get; set; }
        public string systemName { get; set; }
    }
    
    public class Document
    {
        public string carrierGuID { get; set; }
        public string symbol { get; set; }
        public string displayName { get; set; }
        public string systemName { get; set; }
        public int contentSource { get; set; }
        public List<object> options { get; set; }
    }
    
    public class RegisteredCarrier
    {
        public string guID { get; set; }
        public string symbol { get; set; }
        public string displayName { get; set; }
        public string systemName { get; set; }
        public List<Service> services { get; set; }
        public List<Document> documents { get; set; }
        public bool isModified { get; set; }
    }
    
    public class RegistrationResponse
    {
        public List<RegisteredCarrier> registeredCarriers { get; set; }
        public object registeredDocuments { get; set; }
        public bool success { get; set; }
        public int errorCode { get; set; }
        public object displayMessage { get; set; }
        public object systemMessage { get; set; }
        public object exceptionDetail { get; set; }
    }

    Test Result

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 2, 2019 7:07 AM
  • User1182587605 posted

    Thanks for the reply,

    The elements inside the Documents also need to expand to show their content. Is that possible.

    Tuesday, December 3, 2019 6:37 AM