首頁猿問如何根據(jù)輸入值呈現(xiàn) JSON 數(shù)據(jù)

如何根據(jù)輸入值呈現(xiàn) JSON 數(shù)據(jù)

JavaScript

紅顏莎娜 2021-11-25 19:12:45

背景：我正在做一個(gè)小型項(xiàng)目，學(xué)習(xí)如何通過帶有 JSON 文件的 vanilla JavaScript 使用 AJAX。我知道我可以使用 Jquery，但我正在學(xué)習(xí)很長的路，Jquery 將是下一個(gè)。目標(biāo)：我的目標(biāo)是能夠輸入一個(gè)城市，一旦我點(diǎn)擊按鈕，它就會(huì)呈現(xiàn)我輸入的城市的當(dāng)前天氣。問題：我無法弄清楚并且正在尋找有關(guān)如何從本質(zhì)上獲取價(jià)值并將其附加到密鑰并呈現(xiàn)我正在尋找的所有數(shù)據(jù)的指導(dǎo)。我的思考過程是引入輸入值并將其與名稱鍵進(jìn)行比較，如果它們匹配則呈現(xiàn)結(jié)果。我只是無法理解代碼中的樣子，因此將不勝感激任何指導(dǎo)。我擁有的：到目前為止，我能夠通過使用以下文件進(jìn)行硬編碼來呈現(xiàn)我想要的內(nèi)容：<!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

TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超7個(gè)贊

正如 Todd R 所說，你只需要在訪問屬性之前找到你真正想要的數(shù)組元素。您也不需要，JSON.stringify因?yàn)檫@些值已經(jīng)是字符串或數(shù)字，可以直接放入 HTML 中。將它們包裝在 stringify 調(diào)用中將導(dǎo)致將引號(hào)添加到字符串值中，例如。

<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

}

反對(duì) 回復(fù) 2021-11-25

蝴蝶刀刀

TA貢獻(xiàn)1801條經(jīng)驗(yàn) 獲得超8個(gè)贊

這是一個(gè)略有不同的演示，展示了使用fetch()作為執(zhí)行 Ajax 的新 Vanilla Javascript 方式：

我只獲取一次數(shù)據(jù)（在加載時(shí)，然后掃描數(shù)組以查找與城市匹配的模式。這綁定到keyup輸入字段的事件，使按鈕過時(shí)。

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

}

});

反對(duì) 回復(fù) 2021-11-25

千巷貓影

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超7個(gè)贊

您快到了。在“forEach”評(píng)論開始的地方，通過weatherTest“找到”（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find）匹配“city”的元素”。然后使用從“find”返回的元素來構(gòu)建“result”。

反對(duì) 回復(fù) 2021-11-25