创建动态html&在其中显示json值 [英] Create dynamic html & display json values in it
问题描述
我已经调用了ajax api调用，我得到了json格式的响应.我想在屏幕上用html元素显示每个值.我已经实现了这一点，但是它无法根据需要创建动态设计.如果没有数据响应，我还要显示一条消息(无可用数据").这是我的工作HTML& JSON样本.
需要显示如下
I have call ajax api call, i get response in json format. I want to display each values on screen with html elements. I've achieve this but it wont create dynamic design as i needed. Also i wan to show an message("No data available") if there is no data in response. Here is my working HTML & JSON sample.
Need to display as follows
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="portlet light bg-inverse tripcontainer">
<div id="container">
<div class="col-md-4 driver">
<div>
<label class="header">Driver Details</label>
</div>
<div>
<label>Name:</label>
<span class="dname"></span>
</div>
<div>
<label>Vehicle No:</label>
<span class="dvehicle"></span>
</div>
<div>
<label>Mobile No:</label>
<span class="dmob"></span>
</div>
<div>
<label>Email:</label>
<span class="demail"></span>
</div>
<div>
<label>Start Location:</label>
<span class="dstart"></span>
</div>
<div>
<label>Lat:</label>
<span class="dlat"></span>
</div>
<div>
<label>Long:</label>
<span class="dlong"></span>
</div>
<div>
<label>End Location:</label>
<span class="dend"></span>
</div>
<div>
<label>Lat:</label>
<span class="dselat"></span>
</div>
<div>
<label>Long:</label>
<span class="dselong"></span>
</div>
<div>
<label>Booked Seats:</label>
<span class="dseat"></span>
</div>
<div>
<label>Start Time:</label>
<span class="dstarttime"></span>
</div>
<div>
<label>Route ID:</label>
<span class="droute"></span>
</div>
<div>
<label>Distance:</label>
<span class="ddistance"></span>KM</div>
</div>
<div class="col-md-8 passanger">
<div>
<label class="header">Passanger Details</label>
</div>
<div>
<label>Name:</label>
<span class="pname"></span>
</div>
<div>
<label>Mobile No:</label>
<span class="pmob"></span>
</div>
<div>
<label>Email:</label>
<span class="pemail"></span>
</div>
<div>
<label>Start Location:</label>
<span class="pstart"></span>
</div>
<div>
<label>Lat:</label>
<span class="pslat"></span>
</div>
<div>
<label>Long:</label>
<span class="pelong"></span>
</div>
<div>
<label>End Location:</label>
<span class="pend"></span>
</div>
<div>
<label>Lat:</label>
<span class="pelat"></span>
</div>
<div>
<label>Long:</label>
<span class="pelong"></span>
</div>
<div>
<label>Booked Seats:</label>
<span class="pseat"></span>
</div>
<div>
<label>Start Time:</label>
<span class="pstarttie"></span>
</div>
<div>
<label>End Time:</label>
<span class="pendtime"></span>
</div>
<div>
<label>Distance:</label>
<span class="pdistance"></span>KM</div>
</div>
</div>
</div>
</div>
推荐答案
要使其动态化，您可以按照以下步骤操作
To make this dynamic you can follow these steps
1.像这样为驱动程序分配值
$('.dname').html(driver_data[0].employeename);
2.像这样为乘客分配值
$('.pname').html(driver_data[0].passenger_data[0].employeename);
3.遍历您的结果(应该是第一个)
for (i = 0; i < result.length; i++) {
// your assignments here
}
在这里，我已经在此 fiddle 中解析并附加了值
Here i have parsed and appended values in this fiddle
这是追加后的样子
[！[在此处输入图片描述] [2]] [2]
[![enter image description here][2]][2]
注意:
-
我为驾驶员和乘客添加了一些字段，您应该对其进行迭代并使其符合您的意愿.
I have appended few fields for driver and passenger you should iterate through it and make it fit for your wish.
您不需要创建静态HTML，而是可以从jquery本身执行此操作.这样您可以减少代码量.
You don't need to create static HTML, instead you can do this from jquery itself. So that you can have less code.
更新:
OP希望如何遍历结果并修复其中的数据.
As the OP wants how to iterate through the result and fix the data in it.
这是动态迭代的更新的小提琴
这是它的样子
[！[输出] [4]] [4]
[![Output][4]][4]
$(document).ready(function() {
$.get("http://www.mocky.io/v2/5ba349e82f000054009685b0", 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);
});
});
更新说明:
我已经使用 Mocky 作为数据来模拟
I have used Mocky for the Data to simulate the real time output like this
我还动态创建了HTML，仅填写了几个字段.您也可以填写其余字段.
I have created HTML also dynamically and filled only few fields. You can fill the remaining fields too.
希望这对您有所帮助.
这篇关于创建动态html&在其中显示json值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
