如何根据输入值呈现 JSON 数据
背景：
我正在做一个小型项目，学习如何通过带有 JSON 文件的 vanilla JavaScript 使用 AJAX。我知道我可以使用 Jquery，但我正在学习很长的路，Jquery 将是下一个。
目标：
我的目标是能够输入一个城市，一旦我点击按钮，它就会呈现我输入的城市的当前天气。
问题：
我无法弄清楚并且正在寻找有关如何从本质上获取价值并将其附加到密钥并呈现我正在寻找的所有数据的指导。我的思考过程是引入输入值并将其与名称键进行比较，如果它们匹配则呈现结果。我只是无法理解代码中的样子，因此将不胜感激任何指导。
我拥有的：
到目前为止，我能够通过使用以下文件进行硬编码来呈现我想要的内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax3 - JSON(external api practice) File</title>
</head>
<body>
<input id="city">
<button id="button">Get Weather</button>
<br><br>
<h1>Weather</h1>
<div id='weather'></div>
<script>
// Create an event listener
document.getElementById('button').addEventListener('click', loadWeather);
function loadWeather(){
// console.log(city);
let xhr = new XMLHttpRequest();
xhr.open('GET', 'weather.json', true);
xhr.onload = function(){
let city = document.getElementById('city').value;
// let keys = Object.keys(weather);
if(this.status == 200){
let weatherTest = JSON.parse(this.responseText);
let result = '';
// })
}
}
xhr.send();
}
//HTTP statuses
// 200: 'Ok'
// 403: 'Forbidden'
// 404: 'Not Found'
</script>
</body>
</html>
红颜莎娜3回答
-
幕布斯6054654
正如 Todd R 所说，你只需要在访问属性之前找到你真正想要的数组元素。您也不需要，JSON.stringify因为这些值已经是字符串或数字，可以直接放入 HTML 中。将它们包装在 stringify 调用中将导致将引号添加到字符串值中，例如。<li>City: "San Francisco"</li>示例代码：xhr.onload = function(){ const city = document.getElementById('city').value; if(this.status == 200){ let cityWeathers; try { cityWeathers = JSON.parse(this.responseText); } catch (e) { // JSON not valid, show error message } const cityWeather = Array.isArray(cityWeathers) && cityWeathers.find((obj)=>obj.name === city); if (cityWeather) { const result = `<ul><li>City: ${cityWeather.name}</li>` + `<li>Weather: ${cityWeather.weather[0].description}</li>` + `<li>Latitude: ${cityWeather.coord.lat}</li>` + `<li>Longitude: ${cityWeather.coord.lon}</li></ul>`; document.getElementById('weather').innerHTML = result } }} -
蝴蝶刀刀
这是一个略有不同的演示，展示了使用fetch()作为执行 Ajax 的新 Vanilla Javascript 方式：我只获取一次数据（在加载时，然后扫描数组以查找与城市匹配的模式。这绑定到keyup输入字段的事件，使按钮过时。var data, ct=document.querySelector('#city'), wt=document.querySelector('#weather');fetch('https://jsonplaceholder.typicode.com/users') .then(function(r){r.json().then(function(da){data=da; document.querySelector('#all').innerHTML=data.map(function(v){return v.address.city}).join(', ');});})ct.addEventListener('keyup',function(){ wt.innerHTML=''; var i,n=data.length, rx=new RegExp(ct.value,'i'); for (i=0;i<n;i++) if (rx.test(data[i].address.city)) { wt.innerHTML=data[i].address.city+': '+data[i].address.zipcode }});<input id="city"><br><div id="all"></div><h1>City and zip code</h1><div id='weather'></div> -
千巷猫影
您快到了。在“forEach”评论开始的地方，通过weatherTest“找到”（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find）匹配“city”的元素”。然后使用从“find”返回的元素来构建“result”。
随时随地看视频慕课网APP
相关分类
JavaScript