小贝子编程

有没有办法循环访问 JSON 数据并以 HTML 格式显示它



我正在尝试使用天气API来开发一个很棒的天气应用程序。我已经设法从JSON中获取了我需要的信息并以HTML格式显示。

我不想从 JSON 中获取每小时的天气并显示每小时的天气。我想过在循环中执行此操作并以这种方式显示它，但不确定如何编写它。

这是 JSON

"hour": [
{
"time_epoch": 1622070000,
"time": "2021-05-27 00:00",
"temp_c": 7.6,
"temp_f": 45.7,
"is_day": 0,
"condition": {
"text": "Partly cloudy",
"icon": "//cdn.weatherapi.com/weather/64x64/night/116.png",
"code": 1003
},
"wind_mph": 4.0,
"wind_kph": 6.5,
"wind_degree": 231,
"wind_dir": "SW",
"pressure_mb": 1018.0,
"pressure_in": 30.5,
"precip_mm": 0.0,
"precip_in": 0.0,
"humidity": 89,
"cloud": 5,
"feelslike_c": 6.6,
"feelslike_f": 43.9,
"windchill_c": 6.6,
"windchill_f": 43.9,
"heatindex_c": 7.6,
"heatindex_f": 45.7,
"dewpoint_c": 5.9,
"dewpoint_f": 42.6,
"will_it_rain": 0,
"chance_of_rain": "0",
"will_it_snow": 0,
"chance_of_snow": "0",
"vis_km": 10.0,
"vis_miles": 6.0,
"gust_mph": 7.6,
"gust_kph": 12.2,
"uv": 1.0
},
{
"time_epoch": 1622073600,
"time": "2021-05-27 01:00",
"temp_c": 7.4,
"temp_f": 45.3,
"is_day": 0,
"condition": {
"text": "Partly cloudy",
"icon": "//cdn.weatherapi.com/weather/64x64/night/116.png",
"code": 1003
},
"wind_mph": 4.3,
"wind_kph": 6.8,
"wind_degree": 213,
"wind_dir": "SSW",
"pressure_mb": 1018.0,
"pressure_in": 30.5,
"precip_mm": 0.0,
"precip_in": 0.0,
"humidity": 88,
"cloud": 5,
"feelslike_c": 6.2,
"feelslike_f": 43.2,
"windchill_c": 6.2,
"windchill_f": 43.2,
"heatindex_c": 7.4,
"heatindex_f": 45.3,
"dewpoint_c": 5.6,
"dewpoint_f": 42.1,
"will_it_rain": 0,
"chance_of_rain": "0",
"will_it_snow": 0,
"chance_of_snow": "0",
"vis_km": 10.0,
"vis_miles": 6.0,
"gust_mph": 8.1,
"gust_kph": 13.0,
"uv": 1.0
},
{
"time_epoch": 1622077200,
"time": "2021-05-27 02:00",
"temp_c": 7.1,
"temp_f": 44.8,
"is_day": 0,
"condition": {
"text": "Partly cloudy",
"icon": "//cdn.weatherapi.com/weather/64x64/night/116.png",
"code": 1003
},
"wind_mph": 4.5,
"wind_kph": 7.2,
"wind_degree": 196,
"wind_dir": "SSW",
"pressure_mb": 1018.0,
"pressure_in": 30.5,
"precip_mm": 0.0,
"precip_in": 0.0,
"humidity": 88,
"cloud": 5,
"feelslike_c": 5.9,
"feelslike_f": 42.6,
"windchill_c": 5.9,
"windchill_f": 42.6,
"heatindex_c": 7.1,
"heatindex_f": 44.8,
"dewpoint_c": 5.2,
"dewpoint_f": 41.4,
"will_it_rain": 0,
"chance_of_rain": "0",
"will_it_snow": 0,
"chance_of_snow": "0",
"vis_km": 10.0,
"vis_miles": 6.0,
"gust_mph": 8.7,
"gust_kph": 14.0,
"uv": 1.0
},
{
"time_epoch": 1622080800,
"time": "2021-05-27 03:00",
"temp_c": 6.9,
"temp_f": 44.4,
"is_day": 0,
"condition": {
"text": "Partly cloudy",
"icon": "//cdn.weatherapi.com/weather/64x64/night/116.png",
"code": 1003
},
"wind_mph": 4.7,
"wind_kph": 7.6,
"wind_degree": 178,
"wind_dir": "S",
"pressure_mb": 1018.0,
"pressure_in": 30.5,
"precip_mm": 0.0,
"precip_in": 0.0,
"humidity": 87,
"cloud": 5,
"feelslike_c": 5.5,
"feelslike_f": 41.9,
"windchill_c": 5.5,
"windchill_f": 41.9,
"heatindex_c": 6.9,
"heatindex_f": 44.4,
"dewpoint_c": 4.9,
"dewpoint_f": 40.8,
"will_it_rain": 0,
"chance_of_rain": "0",
"will_it_snow": 0,
"chance_of_snow": "0",
"vis_km": 10.0,
"vis_miles": 6.0,
"gust_mph": 9.2,
"gust_kph": 14.8,
"uv": 1.0
},
{
"time_epoch": 1622084400,
"time": "2021-05-27 04:00",
"temp_c": 7.3,
"temp_f": 45.1,
"is_day": 0,
"condition": {
"text": "Partly cloudy",
"icon": "//cdn.weatherapi.com/weather/64x64/night/116.png",
"code": 1003
},
"wind_mph": 5.4,
"wind_kph": 8.6,
"wind_degree": 171,
"wind_dir": "S",
"pressure_mb": 1018.0,
"pressure_in": 30.5,
"precip_mm": 0.0,
"precip_in": 0.0,
"humidity": 86,
"cloud": 5,
"feelslike_c": 5.7,
"feelslike_f": 42.3,
"windchill_c": 5.7,
"windchill_f": 42.3,
"heatindex_c": 7.3,
"heatindex_f": 45.1,
"dewpoint_c": 5.1,
"dewpoint_f": 41.2,
"will_it_rain": 0,
"chance_of_rain": "0",
"will_it_snow": 0,
"chance_of_snow": "0",
"vis_km": 10.0,
"vis_miles": 6.0,
"gust_mph": 10.1,
"gust_kph": 16.2,
"uv": 1.0
},
{
"time_epoch": 1622088000,
"time": "2021-05-27 05:00",
"temp_c": 7.6,
"temp_f": 45.7,
"is_day": 1,
"condition": {
"text": "Partly cloudy",
"icon": "//cdn.weatherapi.com/weather/64x64/day/116.png",
"code": 1003
},
"wind_mph": 6.0,
"wind_kph": 9.7,
"wind_degree": 163,
"wind_dir": "SSE",
"pressure_mb": 1018.0,
"pressure_in": 30.5,
"precip_mm": 0.0,
"precip_in": 0.0,
"humidity": 85,
"cloud": 5,
"feelslike_c": 5.9,
"feelslike_f": 42.6,
"windchill_c": 5.9,
"windchill_f": 42.6,
"heatindex_c": 7.6,
"heatindex_f": 45.7,
"dewpoint_c": 5.2,
"dewpoint_f": 41.4,
"will_it_rain": 0,
"chance_of_rain": "0",
"will_it_snow": 0,
"chance_of_snow": "0",
"vis_km": 10.0,
"vis_miles": 6.0,
"gust_mph": 10.7,
"gust_kph": 17.3,
"uv": 3.0
},
{
"time_epoch": 1622091600,
"time": "2021-05-27 06:00",
"temp_c": 8.0,
"temp_f": 46.4,
"is_day": 1,
"condition": {
"text": "Partly cloudy",
"icon": "//cdn.weatherapi.com/weather/64x64/day/116.png",
"code": 1003
},
"wind_mph": 6.7,
"wind_kph": 10.8,
"wind_degree": 156,
"wind_dir": "SSE",
"pressure_mb": 1018.0,
"pressure_in": 30.5,
"precip_mm": 0.0,
"precip_in": 0.0,
"humidity": 84,
"cloud": 6,
"feelslike_c": 6.1,
"feelslike_f": 43.0,
"windchill_c": 6.1,
"windchill_f": 43.0,
"heatindex_c": 8.0,
"heatindex_f": 46.4,
"dewpoint_c": 5.4,
"dewpoint_f": 41.7,
"will_it_rain": 0,
"chance_of_rain": "0",
"will_it_snow": 0,
"chance_of_snow": "0",
"vis_km": 10.0,
"vis_miles": 6.0,
"gust_mph": 11.6,
"gust_kph": 18.7,
"uv": 3.0
},
{
"time_epoch": 1622095200,
"time": "2021-05-27 07:00",
"temp_c": 9.3,
"temp_f": 48.7,
"is_day": 1,
"condition": {
"text": "Partly cloudy",
"icon": "//cdn.weatherapi.com/weather/64x64/day/116.png",
"code": 1003
},
"wind_mph": 7.6,
"wind_kph": 12.2,
"wind_degree": 155,
"wind_dir": "SSE",
"pressure_mb": 1018.0,
"pressure_in": 30.5,
"precip_mm": 0.0,
"precip_in": 0.0,
"humidity": 82,
"cloud": 14,
"feelslike_c": 7.5,
"feelslike_f": 45.5,
"windchill_c": 7.5,
"windchill_f": 45.5,
"heatindex_c": 9.3,
"heatindex_f": 48.7,
"dewpoint_c": 6.3,
"dewpoint_f": 43.3,
"will_it_rain": 0,
"chance_of_rain": "0",
"will_it_snow": 0,
"chance_of_snow": "0",
"vis_km": 10.0,
"vis_miles": 6.0,
"gust_mph": 12.3,
"gust_kph": 19.8,
"uv": 3.0
}

我喜欢显示图标和时间。

这是我为显示第一个小时而写的内容。

$.ajax({
type: "GET",
url: api + "forecast.json?key=" + apiKey + "&q=" + position.coords.latitude+ "," + position.coords.longitude,
dataType: 'json',
timeout: 0,
success: (parsed_json) => {
const hourImage = parsed_json['forecast']['forecastday'][0]['hour'][0]['condition']['icon'];
const time = parsed_json['forecast']['forecastday'][0]['hour'][0]['time'];
const hourHigh = parsed_json['forecast']['forecastday'][0]['hour'][0]['temp_c'];

const hourImg = document.createElement("img"); 
hourImg.src = "http:" + hourImage;
const hourImageText = document.getElementById("box");
hourImageText.appendChild(hourImg);

const timeText = document.getElementById("title");
timeText.innerText = time.split(" ")[1];
const hourHighText = document.getElementById("card-text");
hourHighText.innerHTML = hourHigh + "°";

}
});

我想在类似的 HTML 中循环遍历并显示每小时

<div class="card align-items-center justify-content-center text-center" style="width: 7rem;">

<div class="card-body">
<h5 id="title"></h5>
<div id="box"></div>
<p id="card-text"></p>
</div>
</div>
</div>

在查看了给我的答案之一后，我尝试了以下方法，但似乎不起作用。

for (let key in parsed_json) {
for (let i = 0; i < parsed_json[key].length; i++) {
const time = parsed_json[key][i]['forecast']['forecastday'][0]['hour'][0]['time'];
const hourImage = parsed_json[key][i]['forecast']['forecastday'][0]['hour'][0]['condition']['icon'];
const hourHigh = parsed_json[key][i]['forecast']['forecastday'][0]['hour'][0]['temp_c'];
const hour = document.createElement('div');
hour.className = "card align-items-center justify-content-center text-center";
hour.innerHTML =  '<div class="card-body">' +'<h5>' + time + '</h5>' + '</div>';
document.getElementById(key).appendChild(hour);
}
}

您可以使用.each循环来循环访问您的 json。然后，内部循环使用键名获取值，即：v.time这会给你时间，然后在你的 dom 中添加生成的 html。

演示代码：

//this is just for demo ..
var parsed_json = {
"hour": [{
"time_epoch": 1622070000,
"time": "2021-05-27 00:00",
"temp_c": 7.6,
"temp_f": 45.7,
"is_day": 0,
"condition": {
"text": "Partly cloudy",
"icon": "//cdn.weatherapi.com/weather/64x64/night/116.png",
"code": 1003
},
"wind_mph": 4.0,
"wind_kph": 6.5,
"wind_degree": 231,
"wind_dir": "SW",
"pressure_mb": 1018.0,
"pressure_in": 30.5,
"precip_mm": 0.0,
"precip_in": 0.0,
"humidity": 89,
"cloud": 5,
"feelslike_c": 6.6,
"feelslike_f": 43.9,
"windchill_c": 6.6,
"windchill_f": 43.9,
"heatindex_c": 7.6,
"heatindex_f": 45.7,
"dewpoint_c": 5.9,
"dewpoint_f": 42.6,
"will_it_rain": 0,
"chance_of_rain": "0",
"will_it_snow": 0,
"chance_of_snow": "0",
"vis_km": 10.0,
"vis_miles": 6.0,
"gust_mph": 7.6,
"gust_kph": 12.2,
"uv": 1.0
},
{
"time_epoch": 1622073600,
"time": "2021-05-27 01:00",
"temp_c": 7.4,
"temp_f": 45.3,
"is_day": 0,
"condition": {
"text": "Partly cloudy",
"icon": "//cdn.weatherapi.com/weather/64x64/night/116.png",
"code": 1003
},
"wind_mph": 4.3,
"wind_kph": 6.8,
"wind_degree": 213,
"wind_dir": "SSW",
"pressure_mb": 1018.0,
"pressure_in": 30.5,
"precip_mm": 0.0,
"precip_in": 0.0,
"humidity": 88,
"cloud": 5,
"feelslike_c": 6.2,
"feelslike_f": 43.2,
"windchill_c": 6.2,
"windchill_f": 43.2,
"heatindex_c": 7.4,
"heatindex_f": 45.3,
"dewpoint_c": 5.6,
"dewpoint_f": 42.1,
"will_it_rain": 0,
"chance_of_rain": "0",
"will_it_snow": 0,
"chance_of_snow": "0",
"vis_km": 10.0,
"vis_miles": 6.0,
"gust_mph": 8.1,
"gust_kph": 13.0,
"uv": 1.0
},
{
"time_epoch": 1622077200,
"time": "2021-05-27 02:00",
"temp_c": 7.1,
"temp_f": 44.8,
"is_day": 0,
"condition": {
"text": "Partly cloudy",
"icon": "//cdn.weatherapi.com/weather/64x64/night/116.png",
"code": 1003
},
"wind_mph": 4.5,
"wind_kph": 7.2,
"wind_degree": 196,
"wind_dir": "SSW",
"pressure_mb": 1018.0,
"pressure_in": 30.5,
"precip_mm": 0.0,
"precip_in": 0.0,
"humidity": 88,
"cloud": 5,
"feelslike_c": 5.9,
"feelslike_f": 42.6,
"windchill_c": 5.9,
"windchill_f": 42.6,
"heatindex_c": 7.1,
"heatindex_f": 44.8,
"dewpoint_c": 5.2,
"dewpoint_f": 41.4,
"will_it_rain": 0,
"chance_of_rain": "0",
"will_it_snow": 0,
"chance_of_snow": "0",
"vis_km": 10.0,
"vis_miles": 6.0,
"gust_mph": 8.7,
"gust_kph": 14.0,
"uv": 1.0
}
]
}
/* $.ajax({
type: "GET",
url: api + "forecast.json?key=" + apiKey + "&q=" + position.coords.latitude+ "," + position.coords.longitude,
dataType: 'json',
timeout: 0,
success: (parsed_json) => {*/
var htmls = "";
//loop through jsons
$(parsed_json.hour).each(function(i, v) {
//append htmls...
htmls += `<div class="card align-items-center justify-content-center text-center" style="width: 7rem;">    
<div class="card-body">
<h5 class="title">${v.time.split(" ")[1]}</h5>
<div class="box"><img src="http:${v.condition.icon}"></div>
<p class="card-text">${v.temp_c}&#176;</p>
</div>
</div>
</div>`
})
$("#outer").html(htmls) //add them in your dom..
/* }
});*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="outer"></div>

您使用jQuery，因此$.getJSON与使用设置为dataType$.ajax相同jsonhttps://api.jquery.com/jquery.getjson/此页面甚至有一个如何格式化HTML输出的示例。

这是一个注释，您可以在其中执行所有DOMElement创建/更新，但它使用jQuery的上下文系统 https://api.jquery.com/jquery/#jQuery-selector-context

const tpl = `<div class="card align-items-center justify-content-center text-center" style="width: 7rem;">

<div class="card-body">
<h5 id="title"></h5>
<div id="box"></div>
<p id="card-text"></p>
</div>
</div>
</div>`;
$.ajax({
type: "GET",
url: api + "forecast.json?key=" + apiKey + "&q=" + position.coords.latitude+ "," + position.coords.longitude,
dataType: 'json',
timeout: 0,
success: (parsed_json) => {
$.each(parsed_json.forecast.forecastday, fucntion(key, val){
let card = $(tpl);
$("#box", card).append("<img src='"+val['hour'][0]['condition']['icon']+"'");
// add the other Elements you want in display here using $("selector", card)
});
}
});

所以上面是一个示例，说明如何在 DOM 之外创建 DOM 结构，然后在完成后只需选择您的card容器，例如let container = $("#container")然后在它上面调用 appendcontainer.append(card);

需要注意的另一件事是，使用具有完整HTML的jQuery选择器将创建HTMLObjects并返回包装在jQuery包装器中的最顶层元素，以便您可以对其进行操作。例如，$("<div id='testDiv'></div>")将返回一个 jQuery 包装的新 HTMLDivElement，属性 id 设置为 "testDiv">

尝试使用reviver 参数 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#using_the_reviver_parameter

const json = `{ "forecast": {
"forecastday": [{
"time_epoch": 1622080800,
"time": "2021-05-27 03:00",
"temp_c": 6.9,
"temp_f": 44.4,
"is_day": 0,
"condition": {
"text": "Partly cloudy",
"icon": "//cdn.weatherapi.com/weather/64x64/night/116.png",
"code": 1003
}},
{
"time_epoch": 1622080800,
"time": "2021-05-27 03:00",
"temp_c": 6.9,
"temp_f": 44.4,
"is_day": 0,
"condition": {
"text": "Partly cloudy",
"icon": "//cdn.weatherapi.com/weather/64x64/night/116.png",
"code": 1003
}
},
{
"time_epoch": 1622080800,
"time": "2021-05-27 03:00",
"temp_c": 6.9,
"temp_f": 44.4,
"is_day": 0,
"condition": {
"text": "Partly cloudy",
"icon": "//cdn.weatherapi.com/weather/64x64/night/116.png",
"code": 1003
}}]
}}`;
const arr = [];    
const obj = JSON.parse(json, (key, value) => {
if(key === 'temp_c' || key === 'time' || key === 'condition'){
arr.push({key, value})
}
});

console.log(arr);

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium