无法使用Ajax调用创建动态HTML [英] Can not create dynamic html using ajax call

问题描述

我已经调用了ajax api调用&我得到json格式的响应.我想创建动态HTML&在HTML元素中显示每个值.我试过我从API得到响应，但它不会创建HTML.谁能帮我解决这个问题.如果响应的json为空(如果没有可用数据)，还希望显示Message.
我预期的输出结果是，如果3位乘客然后显示所有3列详细信息，如果2则仅显示2列详细信息，如果1则仅显示1列详细信息作为屏幕截图. 如果没有乘客，它将显示一条消息没有乘客可用"

I have call ajax api call & i get response in json format. I want to create dynamic HTML & display each values in HTML elements. I tried i get response from API but it wont create HTML. Can anyone help me to sort it out. Also want to show Message if response having empty json (No data available)
My expected out put is if 3 passengers then show all 3 columns with details if 2 then it will shows only 2 columns with details, if 1 then it will shows only 1 columns with details as screenshot. If no passenger it'll show a message "No passenger available"

[！[在此处输入图片描述] [1]] [1]

[![enter image description here][1]][1]

Json成功功能显示 [图片] [2]

Json success function shows [Image][2]

我已经应用了提供的解决方案

[！[在此处输入图片描述] [3]] [3]

[![enter image description here][3]][3]

[小提琴] [4]

[Fiddle][4]

我当前的代码

    $(document).ready(function() {

            $.get("http://10.26.32.4:8765/api/rating-service/rate/trip/getdetails/30/COMPLETED", function(data, status) {
                var output = '';
                for (i = 0; i < data.length; i++) {
                    var driverHtml = '<div class="col-md-4 driver"><div><label class="header">Driver Details</label></div><div><label>Name:</label><span class="dname">' + data[i].employeename + '</span></div>';
                    var passengerHtml = '<div class="col-md-8 passenger"><div><label class="header">Passenger Details</label></div><div><label>Name:</label><span class="pname">' + data[i].passenger_data[0].employeename + '</span></div><hr>';
                    output += driverHtml + passengerHtml;
                }
                $('#container').html(output);
            });
        });

        $(document).ready(function() {
            $("[id*=btnsubmit]").click(function() {
                /*debugger;*/
                var obj = {};
                obj = $.trim($("[id*=tripinfo]").val());
                objs = $.trim($("[id*=tripstatus]").val());
                console.log(obj)
                console.log(objs)
                $.ajax({
                    type: "GET",
                    url: "API URL" + obj + '/' + objs,
                    //dataType: "json",
                    success: function(data) {
                        //console.log(data)
                        var output = '';
                        for (i = 0; i < data.length; i++) {
                            var driverHtml = '<div class="col-md-4 driver"><div><label class="header"><b>Driver Details</b></label></div><div><label>Name:</label><span class="dname">' + data[i].employeename + '</span></div><div><label>Vehicle No:</label><span class="dname">' + data[i].vehicleno + '</span></div><div><label>Mobile:</label><span class="dname">' + data[i].mobilenumber + '</span></div></div>';
                            console.log(driverHtml);

                            var passengerHtml = '<div class="col-md-8 passenger"><div><label class="header"><b>Passenger Details</b></label></div><div><label>Name:</label><span class="pname">' + data[i].passenger_data[0].employeename + '</span></div><div><label>Mobile No:</label><span class="pname">' + data[i].passenger_data[0].mobilenumber + '</span></div><div><label>Email:</label><span class="pname">' + data[i].passenger_data[0].email + '</span></div></div><hr>';
                            output += driverHtml + passengerHtml;
                        }
                        $('#container').html(output);
                    }
                });
            });

        });

推荐答案

您需要检查乘客的长度，然后选择合适的colclass，如:

You need to check the length of the passengers then chose the right colclass like :

$.each(data.driver_data, function(key, val) {
  var pdetails = val.passenger_data;

  output += '<div class="row">';

  output += '<div class="col-md-4 driver"><div><label class="header"><b>Driver Details</b></label></div><div><label>Name:</label><span class="dname">' + val.employeename + '</span></div><div><label>Vehicle No:</label><span class="dname">' + val.vehicleno + '</span></div><div><label>Mobile:</label><span class="dname">' + val.mobilenumber + '</span></div></div>';

  var colclass = '8';
  var pdetails_length = pdetails.length;

  if (pdetails_length === 1)
    colclass = '12';
  else if (pdetails_length === 2)
    colclass = '6';
  else if (pdetails_length === 3)
    colclass = '4';
  else if (pdetails_length === 4)
    colclass = '3';

  output += '<div class="col-md-8 passenger"><div class="row">';

  $.each(pdetails, function(pkey, pval) {
    output += '<div class="col-md-' + colclass + '"><div><label class="header"><b>Passenger Details</b></label></div><div><label>Name:</label><span class="pname">' + pval.employeename + '</span></div><div><label>Mobile No:</label><span class="pname">' + pval.mobilenumber + '</span></div><div><label>Email:</label><span class="pname">' + pval.email + '</span></div></div>';
  });

  output += '</div></div></div><hr>';
});

这篇关于无法使用Ajax调用创建动态HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！