gpt4 book ai didi

javascript - 无法在html页面中显示JSON数据

转载 作者:行者123 更新时间:2023-12-02 14:51:21 27 4
gpt4 key购买 nike

我正在使用 Foursquare API 开发一个 API 应用程序。使用我的getRequest,我得到了 JSON 格式的结果,这些结果显示在我的控制台.log 中。

问题是,我不知道如何解析 JSON 数据并在 HTML 页面上显示我想要的内容。

我正在尝试显示 field 的“名称”,但我不知道该怎么做。

P.S:我对来自 Foursquare 的传入数据有一个 Math.random 函数,因此我的 console.log 中显示的随机 field 名称就是我想要的显示在我的 HTML 页面中。

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Search</title>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js" type="text/javascript" id="jquery"></script>
<script type="text/javascript" src="apps/app.js"></script>

</head>

<body>

<H1>Hunger Pains</H1>
<p>Search for food cause you cant take it anymore</p>

<!--This is the area your location gets spit out on the html page-->
<p id="demo"></p>

<form id ="search-term">

<!--text entry field-
<input type="text" id="query">-->

<!--Submit button-->
<input id="submit" type="submit" value="submit">

<!--Search results div-->
<div id="search-results"></div>


</form>
</body>
</html>

Jquery:

$(document).ready(function(){

//document.getElementById("submit").disabled = false;

//When you click the submit button it fires off the getRequest.
$(function(){
$('#search-term').submit(function(event){
event.preventDefault();
//getRequest();
myFunction();


});
});

// This is the get request. It has a random function that randomizes the callback data. Once you get the randomizes data, it shows in the console window.
//This function displays three random results based on the myFunction below
function getRequest(){

$.getJSON('https://api.foursquare.com/v2/venues/search?v=20131016&ll=40.7%2C-74&intent=browse&radius=800&categoryId=4d4b7105d754a06374d81259&client_id=C2IEUINHBL2HEVOHIWNO0GGN5EUHK3PGYH03HCZRP2ETA4CF&client_secret=DOLF3UBQZOY5GX2DP3EXBQ5CW4AHEWMNDGRMH0IHJWZBDSIO', function(data){
var random = data.response.venues[Math.floor(Math.random() * data.response.venues.length)];
//showResults();
console.log(random);

});

}

//This is the function that calls getRequest function three times then stops.

function myFunction(){
var myVar = setInterval(function(){getRequest();}, 500);
//clearTimeout(myVar);
setTimeout(function( ) { clearInterval( myVar); }, 1600);
}

});

最佳答案

要从 Foursquare 获取的对象中获取名称,请使用:

console.log(random.name);

如果您需要 url 例如,请使用:

console.log(random.url);

关于javascript - 无法在html页面中显示JSON数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36163821/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com