I have an object which contain parent and child in each parent then i want to draw it into jQuery append for put each object into ol for parent and li for childI still have problem when i tried to loop the childltdiv id34progressbody34 role34main34 class34containerfluid afternavbar row pagecontent34 style34margintop50pxmarginleft120pxmarginright120px34gtltdivgt 34shipmentid341000834vehiclename3434NusaFleet033434shi

Hi ruben00000Please refer below sampleJson 34shipmentid34 10008 34vehiclename34 34NusaFleet0334 34shipmentdate34 34Date168235560000034 34shipmentnumber34 34A09883777234 34origingeofencecode34 34Home Panji34 34planneddeparturetime34 34Date168235740000034 34departuretime34 null 34progress34 null 34drivername34 null 34detail34 34shipmentdestinationid34 10010 34shipmentid34 10008 34number34 1 34destinationgeofencename34 34Diratna HomeStay34 34arrivaltime34 null 34departuretime34 null 34plannedarrivaltime34 34Date168235920000034 34planneddeparturetime34 34Date168238080000034 34shipmentdestinationid34 10011 34shipment

Thank you for your ResponseBased On Joey Answer i already combine the html append via JQueryIt just added some css modification and adding some trick to create Timeline OutputThis is the combination resultfunction getmilestone var fromDate 39ViewBagFromDateDelivery39 var toDate 39ViewBagToDateDelivery39 var search null ajax url 34ShipmentsGetMilestone34 type 34POST34 data fromDate toDate search dataType 34json34 success function resp if resp34model34 34error34 alert34error34 else var data resp eachdata function i value ol 39ltol style34colorwhite34gt 39 39ltspan style34margintop 20px position absolutemarginleft40px34gt39 valuevehiclename 39lt

ASP.Net Ajax: Loop on parents and child records in jQuery

ruben000...

SOLVED CLOSED ACTIVE ANSWERED
User: ruben00000
Posted: on Apr 26, 2023 02:20 AM
Forum: ASP.Net AJAX
Answer: 2
Views: 1757
Sample Code: Download

I have an object which contain parent and child in each parent then i want to draw it into jQuery append for put each object into ol for parent and li for child

I still have problem when i tried to loop the child

<div id="progress-body" role="main" class="container-fluid after-navbar row page-content" style="margin-top:-50px;margin-left:-120px;margin-right:-120px">

</div>

[{"shipment_id":10008,"vehicle_name":"NusaFleet-03","shipment_date":"\/Date(1682355600000)\/","shipment_number":"A-098837772","origin_geofence_code":"Home Panji","planned_departure_time":"\/Date(1682357400000)\/","departure_time":null,"progress":null,"driver_name":null,"detail":[{"shipment_destination_id":10010,"shipment_id":10008,"number":1,"destination_geofence_name":"Diratna HomeStay","arrival_time":null,"departure_time":null,"planned_arrival_time":"\/Date(1682359200000)\/","planned_departure_time":"\/Date(1682380800000)\/"},{"shipment_destination_id":10011,"shipment_id":10008,"number":2,"destination_geofence_name":"Kasipah","arrival_time":null,"departure_time":null,"planned_arrival_time":"\/Date(1682445600000)\/","planned_departure_time":"\/Date(1682445600000)\/"},{"shipment_destination_id":10012,"shipment_id":10008,"number":3,"destination_geofence_name":"pool tika","arrival_time":null,"departure_time":null,"planned_arrival_time":"\/Date(1682449200000)\/","planned_departure_time":"\/Date(1682449200000)\/"},{"shipment_destination_id":10013,"shipment_id":10008,"number":4,"destination_geofence_name":"temtrem","arrival_time":null,"departure_time":null,"planned_arrival_time":"\/Date(1682451000000)\/","planned_departure_time":"\/Date(1682452800000)\/"},{"shipment_destination_id":10014,"shipment_id":10008,"number":5,"destination_geofence_name":"pool tikas","arrival_time":null,"departure_time":null,"planned_arrival_time":"\/Date(1682458200000)\/","planned_departure_time":"\/Date(1682465400000)\/"}]},{"shipment_id":10009,"vehicle_name":"NusaFleet-01","shipment_date":"\/Date(1682355600000)\/","shipment_number":"000000092","origin_geofence_code":"pool tikas","planned_departure_time":"\/Date(1682362800000)\/","departure_time":null,"progress":null,"driver_name":"Sugito","detail":[{"shipment_destination_id":10015,"shipment_id":10009,"number":1,"destination_geofence_name":"Diratna HomeStay","arrival_time":null,"departure_time":null,"planned_arrival_time":"\/Date(1682442000000)\/","planned_departure_time":"\/Date(1682528400000)\/"},{"shipment_destination_id":10016,"shipment_id":10009,"number":2,"destination_geofence_name":"temtrem","arrival_time":null,"departure_time":null,"planned_arrival_time":"\/Date(1682622000000)\/","planned_departure_time":"\/Date(1682715600000)\/"}]}]

function getmilestone()
{
    var fromDate = '@ViewBag.FromDateDelivery';
    var toDate = '@ViewBag.ToDateDelivery';
    var search = null;
    $.ajax({
        url: "/Shipments/GetMilestone",
        type: "POST",
        data: { fromDate, toDate, search },
        dataType: "json",
        success: function (resp) {
            if (resp["model"] == "error") {
                alert("error");
            }
            else {
                var data = resp;
                for (var i in data) {
                    //alert(JSON.stringify(data[i]));
                    //alert(JSON.stringify(data[i].shipment_number));
 
                    $('#progress-body').append(
                            '<ol style="color:white">'
                       +        '<li>'
                       +            '<span id="no_velivery" style="margin-top: -20px; position: absolute;margin-left:-40px">' + data[i].shipment_number
                       +            '</span>'
                       +            '<p id="idvehicle" style="margin-left: -40px">' + data[i].vehicle_name
                       +            '</p>'
                       +            '<p class="diplome"style="color:white">' + data[i].origin_geofence_code
                       +            '</p>'
                       +            '<span class="point">'
                       +            '</span>'
                       +            '<p class="description">' + "Test"
                       +            '</p>'
                       +        '</li>'
                       +    '</ol>'
                             
                    );
                }
            }
        }
    });
}

Maybe someone can help me

Thank you

Ruben

Download FREE API for Word, Excel and PDF in ASP.Net

Joey

0 3

Reply
ANSWER
User: Joey
Replied: on Apr 26, 2023 07:36 AM
Modified: on Apr 26, 2023 07:37 AM
Report

Hi ruben00000,

Please refer below sample.

Json

[
  {
    "shipment_id": 10008,
    "vehicle_name": "NusaFleet-03",
    "shipment_date": "\/Date(1682355600000)\/",
    "shipment_number": "A-098837772",
    "origin_geofence_code": "Home Panji",
    "planned_departure_time": "\/Date(1682357400000)\/",
    "departure_time": null,
    "progress": null,
    "driver_name": null,
    "detail": [
      {
        "shipment_destination_id": 10010,
        "shipment_id": 10008,
        "number": 1,
        "destination_geofence_name": "Diratna HomeStay",
        "arrival_time": null,
        "departure_time": null,
        "planned_arrival_time": "\/Date(1682359200000)\/",
        "planned_departure_time": "\/Date(1682380800000)\/"
      },
      {
        "shipment_destination_id": 10011,
        "shipment_id": 10008,
        "number": 2,
        "destination_geofence_name": "Kasipah",
        "arrival_time": null,
        "departure_time": null,
        "planned_arrival_time": "\/Date(1682445600000)\/",
        "planned_departure_time": "\/Date(1682445600000)\/"
      },
      {
        "shipment_destination_id": 10012,
        "shipment_id": 10008,
        "number": 3,
        "destination_geofence_name": "pool tika",
        "arrival_time": null,
        "departure_time": null,
        "planned_arrival_time": "\/Date(1682449200000)\/",
        "planned_departure_time": "\/Date(1682449200000)\/"
      },
      {
        "shipment_destination_id": 10013,
        "shipment_id": 10008,
        "number": 4,
        "destination_geofence_name": "temtrem",
        "arrival_time": null,
        "departure_time": null,
        "planned_arrival_time": "\/Date(1682451000000)\/",
        "planned_departure_time": "\/Date(1682452800000)\/"
      },
      {
        "shipment_destination_id": 10014,
        "shipment_id": 10008,
        "number": 5,
        "destination_geofence_name": "pool tikas",
        "arrival_time": null,
        "departure_time": null,
        "planned_arrival_time": "\/Date(1682458200000)\/",
        "planned_departure_time": "\/Date(1682465400000)\/"
      }
    ]
  },
  {
    "shipment_id": 10009,
    "vehicle_name": "NusaFleet-01",
    "shipment_date": "\/Date(1682355600000)\/",
    "shipment_number": "000000092",
    "origin_geofence_code": "pool tikas",
    "planned_departure_time": "\/Date(1682362800000)\/",
    "departure_time": null,
    "progress": null,
    "driver_name": "Sugito",
    "detail": [
      {
        "shipment_destination_id": 10015,
        "shipment_id": 10009,
        "number": 1,
        "destination_geofence_name": "Diratna HomeStay",
        "arrival_time": null,
        "departure_time": null,
        "planned_arrival_time": "\/Date(1682442000000)\/",
        "planned_departure_time": "\/Date(1682528400000)\/"
      },
      {
        "shipment_destination_id": 10016,
        "shipment_id": 10009,
        "number": 2,
        "destination_geofence_name": "temtrem",
        "arrival_time": null,
        "departure_time": null,
        "planned_arrival_time": "\/Date(1682622000000)\/",
        "planned_departure_time": "\/Date(1682715600000)\/"
      }
    ]
  }
]

HTML

<body style="background-color: darkgoldenrod;">
    <form id="form1" runat="server">
        <div id="progress-body">
        </div>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $.ajax({
                    url: "CS.aspx/GetJson",
                    type: "POST",
                    data: {},
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function (resp) {
                        if (resp["model"] == "error") {
                            alert("error");
                        }
                        else {
                            var data = resp.d;
                            for (var i in data) {
                                $('#progress-body').append(
                                    '<ol style="color: white">'
                                    + '<li>'
                                    + '<span id="no_velivery" style="margin-top: -20px; position: absolute; margin-left: -40px">' + data[i].shipment_number
                                    + '</span>'
                                    + '<p id="idvehicle" style="margin-left: -40px">' + data[i].vehicle_name
                                    + '</p >'
                                    + '<p class="diplome" style="color: white">' + data[i].origin_geofence_code
                                    + '</p >'
                                    + '<span class="point">'
                                    + '</span>'
                                    + '<p class="description">' + "Test"
                                    + '</p >'
                                    + '</li>'
                                    + '</ol >'
                                    + '</hr>'
                                );
                                for (var j in data[i].detail) {
                                    $('#progress-body').append(data[i].detail[j].number + '</br>');
                                }
                            }
                        }
                    },
                    error: function (response) { alert(response.responseText); }
                });
            });
        </script>
    </form>
</body>

Namespace

using Newtonsoft.Json;
using System.Web.Services;

Code

[WebMethod]
public static List<Root> GetJson()
{
    string jsonString = File.ReadAllText(HttpContext.Current.Server.MapPath("~/json.json"));
    List<Root> json = JsonConvert.DeserializeObject<List<Root>>(jsonString);
    return json;
}

public class Detail
{
    public int shipment_destination_id { get; set; }
    public int shipment_id { get; set; }
    public int number { get; set; }
    public string destination_geofence_name { get; set; }
    public object arrival_time { get; set; }
    public object departure_time { get; set; }
    public DateTime planned_arrival_time { get; set; }
    public DateTime planned_departure_time { get; set; }
}

public class Root
{
    public int shipment_id { get; set; }
    public string vehicle_name { get; set; }
    public DateTime shipment_date { get; set; }
    public string shipment_number { get; set; }
    public string origin_geofence_code { get; set; }
    public DateTime planned_departure_time { get; set; }
    public object departure_time { get; set; }
    public object progress { get; set; }
    public string driver_name { get; set; }
    public List<Detail> detail { get; set; }
}

ruben000...

0 8

Reply
ANSWER
User: ruben00000
Replied: on May 01, 2023 11:02 AM
Report

Thank you for your Response

Based On Joey Answer i already combine the html append via JQuery

It just added some css modification and adding some trick to create

Timeline Output

This is the combination result:

function getmilestone()
{
    var fromDate = '@ViewBag.FromDateDelivery';
    var toDate = '@ViewBag.ToDateDelivery';
    var search = null;
    $.ajax({
        url: "/Shipments/GetMilestone",
        type: "POST",
        data: { fromDate, toDate, search },
        dataType: "json",
        success: function (resp) {
            if (resp["model"] == "error") {
                alert("error");
            }
            else {
 
                var data = resp;
 
                $.each(data, function (i, value) {
 
                    $ol = $('<ol style="color:white"> '
 
                        + '<span style="margin-top: -20px; position: absolute;margin-left:-40px">' + value.vehicle_name + '</span>'
 
                        + '<li> '
 
                            + '<p class="diplome"style="color:white">' + value.origin_geofence_name + '</p>'
 
                            + '<span id=_point class="point">' + '<input name="shipment_id" id="shipment_id" class="shipment_id" type="hidden" value="'+ value.shipment_id + '" />' + '</span>'
 
                            /*+ '<p class="description">' + "Test" + '</p>'*/
 
                        + '</li>'
                         
                        + '</ol>').appendTo('#progress-body');                       
 
                    $.each(value.detail, function (index, obj) {
 
                        $ol.append(
 
                            '<li>'
 
                           + '<p class="diplome" style="color:white">' + obj.destination_geofence_name + '</p>'
 
                           + '<span id=_point class="point">' + '<input name="shipment_destination_id" id="shipment_destination_id" type="hidden" value="'+obj.shipment_destination_id + '" />' + '</span>'
 
                           /*+ '<p class="description">' + "Test" + '</p>'*/
 
                           + '</li>'
                        );
                    })
                });
            }
        }
    });
}

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

ASP.Net Ajax: Loop on parents and child records in jQuery

Company

Explore

Follow us

Contact Us