jquery - 如何将 JSON 对象数组组合在一起
问题描述
我有一个 JSON 文件,它在“delivery_options”下有一组对象。
https://api.myjson.com/bins/m0a3m
目前,我正在使用 .each 提取这些数据
$.each(value.delivery_options, function(key, val) {
$('#del-options').append('<li del-id='+ key +' class="list-group-item del-options link-class"><div> ' + val.name + ' </div><div> ' + val.description + ' </div><div class=""> ' + val.price + ' </div></li>');
})
我的问题是,它在一个列表下打印所有交付选项,<ul> </ul>
而不是将它们分成多个列表<ul> </ul> <ul> </ul> <ul> </ul>
下面是我正在使用的完整 jquery。
$.ajaxSetup({
cache: false
});
$('#search').blur(function() {
$('#result').html('');
$('#lat-long').html('');
$('#opening-times').html('');
$('#del-options').html('');
var searchField = $('#search').val();
var expression = new RegExp(searchField, "i");
$.getJSON('https://api.myjson.com/bins/m0a3m', function(data) {
//console.log('json')
$.each(data, function(key, value) {
if (value.address.name.search(expression) != -1 || value.address.line1.search(expression) != -1 || value.address.town.search(expression) != -1 || value.address.county.search(expression) != -1 || value.address.postcode.search(expression) != -1) {
//console.log(value)
//COURIER ADDRESS DETAILS
$('#result').append('<li data-contentid='+ key +' class="list-group-item courier"><div class="c-name font-weight-bold"> ' + value.name + ' </div><div class="address"> ' + value.address.name + ',' + value.address.line1 + ',' + value.address.town + ',' + value.address.county + ',' + value.address.postcode + '</div></li>');
//LAT AND LONG
var mapProp= {
center:new google.maps.LatLng(value.location.latitude,value.location.longitude),
zoom:5,
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
//OPENING TIMES
$('#opening-times').append('<li id=open-times-'+ key +' class="list-group-item op-times"><div class="c-name font-weight-bold"> Opening Times </div><div class="">Mon ' + value.opening_times.Mon + ' </div><div class="">Tues ' + value.opening_times.Tues + ' </div><div class="">Wed ' + value.opening_times.Wed + ' </div><div class="">Thurs ' + value.opening_times.Thurs + ' </div><div class="">Fri ' + value.opening_times.Fri + ' </div><div class="">Sat ' + value.opening_times.Sat + ' </div><div class="">Sun ' + value.opening_times.Sun + ' </div></li>');
// ARRAY DELIVERY OPTIONS
$.each(value.delivery_options, function(key, val) {
$('#del-options').append('<li del-id='+ key +' class="list-group-item del-options link-class"><div> ' + val.name + ' </div><div> ' + val.description + ' </div><div class=""> ' + val.price + ' </div></li>');
})
//COURIER ADDRESS FOR OTHER CONTAINER
$('#address-container').append('<li id=cour-add-'+ key +' class="list-group-item alt-address link-class"><div class="c-name font-weight-bold"> ' + value.name + ' </div><div class="d-inline-block w-100"> ' + value.address.name + ' </div><div class="d-inline-block w-100"> ' + value.address.line1 + ' </div><div class="d-inline-block w-100"> ' + value.address.town + '</div><div class="d-inline-block w-100"> ' + value.address.county + ' </div><div class="d-inline-block w-100"> ' + value.address.postcode + '</div></li>');
}
});
});
});
这是帮助显示问题的屏幕截图。如您所见,0 - 5 应该在一个列表中,然后另一个 0 - 5 在另一个列表中。
任何帮助或提示都会很棒。
提前致谢
解决方案
如果您将标记更改为
<div id="del-lists-wrapper"></div>
然后将js变成类似的东西
var ul = $('<ul></ul>');
$.each(value.delivery_options, function(key, val) {
ul.append('<li del-id=' + key + ' class="list-group-item del-options link-class"><div> ' + val.name + ' </div><div> ' + val.description + ' </div><div class=""> ' + val.price + ' </div></li>');
});
ul.appendTo('#del-lists-wrapper');
所以你上面的整个代码将是
$.ajaxSetup({
cache: false
});
$('#search').blur(function() {
$('#result').html('');
$('#lat-long').html('');
$('#opening-times').html('');
$('#del-options').html('');
var searchField = $('#search').val();
var expression = new RegExp(searchField, "i");
$.getJSON('https://api.myjson.com/bins/m0a3m', function(data) {
//console.log('json')
$.each(data, function(key, value) {
if (value.address.name.search(expression) != -1 || value.address.line1.search(expression) != -1 || value.address.town.search(expression) != -1 || value.address.county.search(expression) != -1 || value.address.postcode.search(expression) != -1) {
//console.log(value)
//COURIER ADDRESS DETAILS
$('#result').append('<li data-contentid='+ key +' class="list-group-item courier"><div class="c-name font-weight-bold"> ' + value.name + ' </div><div class="address"> ' + value.address.name + ',' + value.address.line1 + ',' + value.address.town + ',' + value.address.county + ',' + value.address.postcode + '</div></li>');
//LAT AND LONG
var mapProp= {
center:new google.maps.LatLng(value.location.latitude,value.location.longitude),
zoom:5,
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
//OPENING TIMES
$('#opening-times').append('<li id=open-times-'+ key +' class="list-group-item op-times"><div class="c-name font-weight-bold"> Opening Times </div><div class="">Mon ' + value.opening_times.Mon + ' </div><div class="">Tues ' + value.opening_times.Tues + ' </div><div class="">Wed ' + value.opening_times.Wed + ' </div><div class="">Thurs ' + value.opening_times.Thurs + ' </div><div class="">Fri ' + value.opening_times.Fri + ' </div><div class="">Sat ' + value.opening_times.Sat + ' </div><div class="">Sun ' + value.opening_times.Sun + ' </div></li>');
// ARRAY DELIVERY OPTIONS
var ul = $('<ul></ul>');
$.each(value.delivery_options, function(key, val) {
ul.append('<li del-id=' + key + ' class="list-group-item del-options link-class"><div> ' + val.name + ' </div><div> ' + val.description + ' </div><div class=""> ' + val.price + ' </div></li>');
});
ul.appendTo('#del-lists-wrapper');
//COURIER ADDRESS FOR OTHER CONTAINER
$('#address-container').append('<li id=cour-add-'+ key +' class="list-group-item alt-address link-class"><div class="c-name font-weight-bold"> ' + value.name + ' </div><div class="d-inline-block w-100"> ' + value.address.name + ' </div><div class="d-inline-block w-100"> ' + value.address.line1 + ' </div><div class="d-inline-block w-100"> ' + value.address.town + '</div><div class="d-inline-block w-100"> ' + value.address.county + ' </div><div class="d-inline-block w-100"> ' + value.address.postcode + '</div></li>');
}
});
});
});
推荐阅读
- c# - 如何使用正则表达式删除特定单词之间的空格?
- sql - 用于更改 WooCommerce 中所有产品的延期交货状态的 SQL 查询
- reactjs - 无法将项目添加到reactjs中的列表
- python - Python读取目录中的大量文件并进行处理,快速方式?
- laravel - 雄辩的“超级渴望”嵌套查询可能吗?
- java - 我正在尝试制作一个 Android 应用程序,但是当我按下按钮时它崩溃了,而不是转到下一个屏幕
- c# - ApplicationInsights - CustomProperties 不会在请求之间更新
- scala - Scala:如何按行号拆分数据框?
- dart - Flutter单选按钮自定义选择单个项目
- wordpress - 如何在带有 wordpress 后端的本地反应中实现通知系统