Проблема с Fetch API, отображающим результат JSON - PullRequest
Новая
       78

Проблема с Fetch API, отображающим результат JSON

1 голос
/ 03 октября 2019

У меня проблемы с Fetch API и отображением результатов в формате html из ответа JSON. У меня нет большого опыта работы с этим.

Мне нужна форма, в которой пользователь вводит свой адрес, и при нажатии кнопки отправки он запрашивает API. Затем API получит (насколько я понимаю) результаты и сохранит их в файле response.json. Тогда сопровождающий код должен будет отображать результаты в HTML.

Я попытался собрать воедино фрагменты со всего Интернета и не могу заставить его работать правильно. Каждый раз, когда я воссоздаю посты, подобные тем, которые приведены здесь: https://dev.to/dev_amaz/using-fetch-api-to-get-and-post--1g7d

Все они работают, поэтому не проблема хостинга блокирует ответ. Когда я пытаюсь отредактировать его для своих нужд, он не работает.

Вот пример ответа от API при запросе Superdome в Новом Орлеане: 

input   
address_components  
number  "1500"
street  "Sugar Bowl"
suffix  "Dr"
formatted_street    "Sugar Bowl Dr"
city    "New Orleans"
state   "LA"
country "US"
formatted_address   "1500 Sugar Bowl Dr, New Orleans, LA"
results 
0   
address_components  
number  "1500"
street  "Sugar Bowl"
suffix  "Dr"
formatted_street    "Sugar Bowl Dr"
city    "New Orleans"
county  "Orleans Parish"
state   "LA"
zip "70112"
country "US"
formatted_address   "1500 Sugar Bowl Dr, New Orleans, LA 70112"
location    
lat 29.951137
lng -90.081016
accuracy    1
accuracy_type   "rooftop"
source  "Orleans Parish"
fields  
state_legislative_districts 
house   
name    "State House District 93"
district_number "93"
senate  
name    "State Senate District 5"
district_number "5"

Код япытаясь отработать от 

<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>Pulse</title>
    <link rel="stylesheet" href="style/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
    <style>
        .w3-allerta {
            font-family: "Allerta Stencil", Sans-serif;
        }
    </style>


</head>

<body>
    <div class="w3-container">
        <h1 class="w3-center w3-allerta w3-xxlarge">Sample get district info</h1>
        <p>

            <input type="submit" value="GET DATA FROM LOCAL" id="getJSON" class="w3-btn w3-white w3-border w3-border-blue w3-margin">
            <input type="submit" value="GET DATA FROM API" id="getAPI" class="w3-btn w3-blue w3-margin">
        </p>
        <hr>

        <div id="result" class="w3-container"></div>

        <hr>

        <div class="w3-container w3-blue">
            <h2>Input Form</h2>
        </div>
        <form id="postData" class="w3-container w3-margin">
            <p>
                <input type="text" name="" placeholder="Post title ..." 
    class="w3-input" id="title">
            </p>
            <p>
                <textarea name="" placeholder="Body ..." id="body" cols="20" 
    rows="5" class="w3-input"></textarea>
            </p>
            <input type="submit" value="SEND POST" class="w3-btn w3-blue">
        </form>

    </div>




    <script>

        function getAPI() {

            /*********************************************
           *          Using jsonplaceholder API         *
           * ********************************************/

            fetch('https://api.geocod.io/v1.4/geocode? 
   q=1500+Sugar+Bowl+Dr%2c+New+Orleans+LA&fields=stateleg&api_key='API-KEY- 
   GOES-HERE')
                .then((res) => { return res.json() })
                .then((data) => {
                    let result = `<h2 class="w3-center w3-allerta w3-xxlarge"> After user submits address to sign up</h2>`;

                    data ((fields)) => {
                        const {id, name, name2, location:{lat,lng}} = fields
                        result +=
                            `<div class="w3-panel w3-leftbar w3-border w3- 
   round-small w3-border-blue w3-margin">
                                <h5> User ID: ${id} </h5>
                                <ul class="w3-ul">
                                    <li> House : 
    ${state_legislative_districts.house.name}</li>
                                    <li> Senate : 
    ${state_legislative_districts.senate.name} </li>
                                    <li> location : ${lat}, ${lng} </li>
                                </ul>
                             </div>`;
                        document.getElementById('result').innerHTML = result;
                    });
                }

        }

        function postData(event) {
            event.preventDefault();

            let title = document.getElementById('title').value;
            let body = document.getElementById('body').value;

            title || body === "" ?
            alert('Please Enter all details') :
            fetch('https://jsonplaceholder.typicode.com/posts', {
                method: 'POST',
                headers: new Headers(),
                body: JSON.stringify({ title, body })
            }).then((res) => res.json())
                .then((data) => alert('Data Sent'))
                .catch((err) => console.log(err))
        }
    </script>

</body>

</html>

Единственная информация, которую мне нужно сохранить из этого ответа, - это информация о округе: 

state_legislative_districts 
house   
name    "State House District 93"
district_number "93"
senate  
name    "State Senate District 5"
district_number "5"

Ценю любую помощь по этому вопросу. материи.

...