无法将从api获取的数据转换为json

k3fezbri  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(355)

所以,我试着制作一个天气应用程序,它能给出输入的城市温度,它总是在捕捉中运行代码。当试图调试它时,响应的输出被打印出来,而不是数据。我是一个初学者,所以请忽略我的错误和不正确的代码规则,希望你能帮助我解决这个问题:)!

  1. const submit = document.getElementById("btnsubmit");
  2. const cityname = document.getElementById("cityname");
  3. const city_output = document.getElementById("cityoutput");
  4. const temp_status = document.getElementById('temp_status');
  5. const temp = document.getElementById('temp');
  6. const getInfo = async(event) => {
  7. event.preventDefault();
  8. const cityval = cityname.value;
  9. if (cityval === '') {
  10. city_output.innerText = `please write a value`;
  11. } else {
  12. try {
  13. let url = `api.openweathermap.org/data/2.5/weather?q=${cityval}&units=metric&appid=(myapiid)`;
  14. const response = await fetch(url);
  15. // console.log(response);
  16. const data = await response.json();
  17. // console.log(data);
  18. const arrData = [data];
  19. // console.log(arrData);
  20. temp.innerText = arrData[0].main.temp;
  21. temp_status.innerText = arrData[0].weather[0].main;
  22. } catch {
  23. city_output.innerText = `please write city name properly`;
  24. }
  25. }
  26. };
  27. submit.addEventListener('click', getInfo);
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <!-- Required meta tags -->
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <!-- Bootstrap CSS -->
  8. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  9. <link rel="stylesheet" href="css/style.css">
  10. <title>Hello, world!</title>
  11. </head>
  12. <body>
  13. <div class="container" id="main">
  14. <form>
  15. <div class="mb-3">
  16. <label " class="form-label">Eneter City Name</label>
  17. <input type="text" class="form-control" id="cityname" aria-describedby="emailHelp">
  18. </div>
  19. <button type="submit" class="btn btn-primary" id="btnsubmit" >Submit</button>
  20. </form>
  21. <div id="cityoutput">
  22. cityname
  23. </div>
  24. <div id="temp_status">cloudy</div>
  25. <div id="temp">0 &deg; C</div>
  26. </div>
  27. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  28. <script src="js/main.js"></script>
  29. </body>
  30. </html>

样本数据:

  1. {
  2. "coord": {
  3. "lon": 75.8333,
  4. "lat": 22.7179
  5. },
  6. "weather": [{
  7. "id": 801,
  8. "main": "Clouds",
  9. "description": "few clouds",
  10. "icon": "02d"
  11. }],
  12. "base": "stations",
  13. "main": {
  14. "temp": 30.1,
  15. "feels_like": 33.44,
  16. "temp_min": 30.1,
  17. "temp_max": 30.1,
  18. "pressure": 1000,
  19. "humidity": 62
  20. },
  21. "visibility": 6000,
  22. "wind": {
  23. "speed": 5.14,
  24. "deg": 140
  25. },
  26. "clouds": {
  27. "all": 20
  28. },
  29. "dt": 1626090800,
  30. "sys": {
  31. "type": 1,
  32. "id": 9067,
  33. "country": "IN",
  34. "sunrise": 1626049154,
  35. "sunset": 1626097494
  36. },
  37. "timezone": 19800,
  38. "id": 1269743,
  39. "name": "Indore",
  40. "cod": 200
  41. } {
  42. "mode": "full",
  43. "isActive": false
  44. }
xmakbtuz

xmakbtuz1#

对我来说,它应该能正常工作。我在示例数据中发现的唯一一件事是在最后第三行缺少一个逗号

  1. "cod": 200
  2. }, {
  3. "mode": "full",
  4. "isActive": false
  5. }

这是plnkr的链接
https://plnkr.co/edit/tkmpa6a17opxewzx?open=lib%2fscript.js&preview
非常感谢。
巴拉特

相关问题