Question

我叫一个api，它以json格式给出响应，我想显示特定范围内的值。这是我的代码，请检查并更新缺少的内容。

[小提琴] [1]

[1]: http://jsfiddle.net/t2k8secx/

Answer 1

您可以在此处查看代码

<!DOCTYPE html>
<html>
<head>
<title>Demo ajax</title>
</head>
<body>
<div class="portlet light bg-inverse">
  <h4>Driver Details</h4>
  <div><label>Trip ID:</label> <span id="tripid"></span></div>
  <div><label>Trip Name:</label> <span id="tripname"></span></div>
  <div><label>Trip Status:</label> <span id="tripstatus"></span></div>
  <div><label>Booked Seats:</label> <span id="bookedseats"></span></div>
  <div><label>AccScr Location:</label> <span id="accscrloc"></span></div>
</div>
<div class="portlet light bg-inverse">
  <h4>Passanger Details</h4>
  <div><label>Trip ID:</label> <span id="tripid1"></span></div>
  <div><label>Employee ID:</label> <span id="employeeid"></span></div>
  <div><label>Trip Status:</label> <span id="tripstatus1"></span></div>
  <div><label>AccScr Location:</label> <span id="accscrloc1"></span>   
    </div>
    </div>

<!-- Latest compiled and minified CSS & JS -->
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function () {
    var data = {
        "driver_data": [
        {
            "tripId": 771,
            "creationDate": 1536126924000,
            "accDestLocation": "Location",
            "accDestGeoLat": "19.0770644",
            "accDestGeoLong": "72.99899249999999",
            "accEndTime": 1536129031731,
            "accScrLocation": "Location",
            "accSrcGeoLat": "19.1268537",
            "accSrcGeoLong": "73.00511699999993",
            "accStartTime": 1536129047644,
            "tripStatus": "COMPLETED",
            "createdBy": "SYSTEM",
            "bookedSeats": 1,
            "employeeid": "P10060357",
            "employeename": "Name",
            "vehicleno": "XC5M676",
            "vehiclecolor": "SILVER",
            "vehicletype": "OWN CAR",
            "vehiclemake": "Honda City",
            "srclocation": "Location",
            "srclat": "19.1268537",
            "srclong": "73.00511699999993",
            "starttime": "2018-09-05T06:30:47.644Z",
            "destlocation": "Location",
            "destlat": "19.0770644",
            "destlong": "72.99899249999999",
            "seatcount": 2,
            "mobilenumber": "+918356851445",
            "email": "name@domain.com",
            "routeid": 0,
            "distance": 7.2,
            "passenger_data": [
                {
                    "tripId": 893,
                    "creationDate": 1536126875000,
                    "tripStatus": "COMPLETED",
                    "createdBy": "SYSTEM",
                    "endTime": "2018-09-05T06:30:12.622Z",
                    "employeeid": "P10060776",
                    "employeename": "Name ",
                    "seatcount": 1,
                    "starttime": "2018-09-05T06:30:29.804Z",
                    "mobilenumber": "+917977421941",
                    "email": "name@domain.com",
                    "srclocation": "T Location",
                    "srclat": "19.125625499999998",
                    "srclong": "73.0087698",
                    "destlocation": "V Location",
                    "destlat": "19.0770644",
                    "destlong": "72.99899249999999",
                    "amount": 42
                    }
                ]
            }
        ]
    };
        $.ajax({
            type: "GET",
            url: "data.json",
            dataType: "json",
            success: function (result) {    
                // result same data
                console.log(result);
                var driver = data.driver_data[0];
                var passanger = driver.passenger_data[0];
                console.log(driver);
                $('#tripid').text(driver.tripId);
                $('#tripname').text(driver.employeename);
                $('#tripstatus').text(driver.tripStatus);
                $('#bookedseats').text(driver.bookedSeats);
                $('#accscrloc').text(driver.accScrLocation);

                $('#tripid1').text(passanger.tripId);
                $('#tripstatus1').text(passanger.tripStatus);
                $('#employeeid').text(passanger.employeeid);
                $('#accscrloc1').text(passanger.accScrLocation);
            },
        });
        return false;
    });
</script>
</body>
</html>

显示要跨越的ajax api（json响应）值

1 个答案: