我有两段代码,很难弄清楚如何将它们组合在一起。
第一个从Google Spreadsheet中获取JSON,然后将数据放入字符串中。
var jsonSource = "https://spreadsheets.google.com/feeds/list/1cDoIo8QG2k4pzBC_Mx5k7CCi_rZRlEsZAOSb8QY00vk/od6/public/values?alt=json"
//fetch the json feed
$.getJSON( jsonSource, function() {
$("<p>json request successful</p>").prependTo("#container");
})
.done(function(data) {
if (data.feed.entry.length > 0) {
var $rand = Math.floor(Math.random() * data.feed.entry.length);
$.each( data.feed.entry, function( i, item ) {
var $name = item[$rand].gsx$name.$t;
var $info = item.gsx$info.$t;
var $dataquick = item.gsx$dataquick.$t;
var $datadrink = item.gsx$datadrink.$t;
var $datahappy = item.gsx$datahappy.$t;
var $hours = item.gsx$hours.$t;
var $happyhour = item.gsx$happyhour.$t;
var $x = item.gsx$x.$t;
var $y = item.gsx$y.$t;
var $img = item.gsx$img.$t;
var $happyhourlist;
if ($datahappy == "FALSE") {
$happyhourlist = "";
} else {
$happyhourlist = $happyhour;
};
$('<div class="container" id="answer"><div class="row justify-content-sm-center"><div class="col-md-12 cells"><img src="' + $img + '" style="width:250px;height:250px;float:right;"><p>' + $info + '</p></div></div><div class="row justify-content-sm-center"><div class="col-md-12 cells"><h3>hours</h3></div></div><div class="row justify-content-sm-center"><div class="col-md-12 cells"><h3>happy hours</h3></div></div><div class="row justify-content-sm-center"><div class="col-md-12 cells"><h3>location</h3><div class="where"><div class="maps"><iframe src="https://www.google.com/maps/embed?pb=!1m26!1m12!1m3!1d3066.84554775914!2d-86.16056328462379!3d39.76557607944616!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m11!3e6!4m5!1s0x886b50bc12e1255b%3A0x1e64cf5eed1c326b!' + $x + ',' + $y + '!3m2!1d3' + $x + '!2d' + $y + '!4m3!3m2!1d' + $x + '!2d' + $y + '!5e0!3m2!1sen!2sus!4v1542066257172"></iframe></div> </div></div></div></div>').appendTo(".newItem");
});
// $('<div style="background:white;margin:10px 0px;padding:10px;"><div>' + $name +
// "</div><div>" + $img +
// "</div><div>" + $info +
// "</div><div>" + $dataquick +
// "</div><div>" + $datadrink +
// "</div><div>" + $datahappy +
// // "</td><td>" + $docLink +
// "</div><div>" + $hours +
// "</div><div>" + $happyhourlist +
// "</div><div>" + $x +
// "</div><div>" + $y +
// "</div></div>").appendTo(".newItem");
// });
} else {
// if the json request is successful but there are no items
$("<p>JSON request succeeded but no data returned.</p>").prependTo("#container");
}
})
.fail(function() {
$("<p>JSON request fail</p>").prependTo("#container");
})
.error(function() {
$("<p>JSON request error</p>").prependTo("#container");
});
代码的第二部分是使用一些JS,过滤信息并输出与前一个几乎相同的结构,但是我不确定如何将它们组合起来。
const placesToEat = [
{
name: "NAME",
img: "IMG",
quick: false,
drink: true,
happy: true,
info: "INFO",
hours:
"HOURS",
happyhour:
"HAPPY HOUR",
x: "XXXX",
y: "YYYYY"
}
];
function decidePlace() {
const placesToEatFiltered =
// quick
placesToEat.filter( place => {
needQuick = doc('quick').checked;
return (needQuick)?place.quick:true;
})
// drink
.filter( place => {
needDrink = doc('drink').checked;
return (needDrink)?place.drink:true;
})
// happy
.filter( place => {
needHappy = doc('happy').checked;
return (needHappy)?place.happy:true;
});
const rand = Math.floor(Math.random() * placesToEatFiltered.length);
const choice = placesToEatFiltered[rand].name;
const img = placesToEatFiltered[rand].img;
const info = placesToEatFiltered[rand].info;
const hours = placesToEatFiltered[rand].hours;
const happyhour = placesToEatFiltered[rand].happyhour;
const x = placesToEatFiltered[rand].x;
const y = placesToEatFiltered[rand].y;
const zoomLevel = 0;
const zoom = 15 + zoomLevel;
document.getElementById('output').innerHTML = '<div class="container"><div class="row justify-content-sm-center"><div class="col-md-12 cells"><img src="' + img + '" class="brand_logo">' + info + '</div></div></div><div class="container"><div class="row justify-content-sm-center"><div class="col-md-12 cells">' + hours + "</div></div></div><div class='container'><div class='row justify-content-sm-center'><div class='col-md-12 cells'>" + happyhour + "</div></div></div><div class='container'><div class='row justify-content-sm-center'><div class='col-md-12 cells'><h3>location</h3><div class='where'><div class='maps'><iframe src='https://www.google.com/maps/embed?pb=!1m26!1m12!1m3!1d3066.84554775914!2d-86.16056328462379!3d39.76557607944616!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m11!3e6!4m5!1s0x886b50bc12e1255b%3A0x1e64cf5eed1c326b!" + x + "," + y + "!3m2!1d3" + x + "!2d" + y + "!4m3!3m2!1d" + x + "!2d" + y + "!5e0!3m2!1sen!2sus!4v1542066257172'></iframe></div></div></div></div>" ;
}
function doc(string) {
return document.getElementById(string);
}
我正在尝试通过步骤思考,使他们聚在一起。从电子表格中获取JSON,对数据进行过滤,在所选过滤器中输出电子表格的随机行。
很抱歉我对JSON / JS缺乏经验,但我正在学习。非常感谢您为我提供的任何帮助。