我想解析 JSON 数据并将其公开发布在我的本地网站上，来自 API

Question

Currently, I am loading zomato restaurant api, and i have an api key.目前，我正在加载 zomato 餐厅 api，并且我有一个 api 密钥。 I am trying to POST the data through a search query after someone types an input in a form.在有人在表单中输入输入后，我试图通过搜索查询发布数据。 I am running into a variety of issues regarding this project.我遇到了关于这个项目的各种问题。 The first issue is that I want to do this entirely locally, but im using an API, which from my understanding requires I have some backend part where the data is stored.第一个问题是我想完全在本地执行此操作，但我使用的是 API，据我了解，这需要我有一些存储数据的后端部分。

Is there a way for me to store the data temporarily into local storage without issues?有没有办法让我将数据临时存储到本地存储中而不会出现问题？ or is my only hope with doing something without backend primarily using https://jsonplaceholder.typicode.com/ .或者我唯一的希望是主要使用https://jsonplaceholder.typicode.com/做一些没有后端的事情。

Currently this is my code, and I have some divs that I want appended once the seach query is complete and the data is retrieved.目前这是我的代码，一旦 seach 查询完成并检索到数据，我想要附加一些 div。 Watched several videos on this subject, want to use fetch to obtain the data, but i think my code is a jumbled mess.看了几个关于这个主题的视频，想使用 fetch 来获取数据，但我认为我的代码是一团糟。 Apologies, as its very difficult for me to find concise information about this subject.抱歉，因为我很难找到关于这个主题的简明信息。

``
const searchForm = document.querySelector('form');
const resultsArea = document.getElementById('#restaurant_results');


var api = 'https://developers.zomato.com/api/v2.1/restaurant?res_id=16774318';
var city = Bethesda;
var APIkey = 'd40175980577c1cb4df25d608886594b';
var url = 

document.querySelector('.submit-btn').addEventListener('click', GetPosts);


function GetPosts (){
    fetch('https://jsonplaceholder.typicode.com/posts')
    .then((res) => res.json())
    .then((data) => {
        let output = '<h2>Get Posts</h2>';
        data.forEach(function(post){
            output+=`
            <div>
                <h2>${post.title}</h2>
                <p>${post.body}</p>

            </div>
            `;
        });
        document.getElementById('restaurant_results').innerHTML = output;

    })
}

`` ``

  <body>
    <h1> Restaurant Finder</h1>
<div class="wrapper">
   <form action="">
   <div class="form-wrapper">
       <label for="restaurant-name">Search</label>
       <input type="restaurant-name" type="text" id="restaurant-name" placeholder="Search for a restaurant">
   </div>
   <div class="form-wrapper">
       <label for="city-name">City</label>
       <input type="city-name" type="text" id="city-name" value="Bethesda" value="New York" disabled>
   </div>
   <input type="submit" class="submit-btn">
</form>
<hr>
<section id="restaurant_results">

<div class="result_card">
    <div class="result_header">
        <h2 class="result_title">${title}</h2>
        <h3 class="result_location result_neighborhood">${neighborhood}</h3>
        <h3 class="result_location result_address">${address}</h3>
        <p class="result_price">${price}</p>
        <!--<p>${cuisine type}</p>-->
    </div>

    <div class="result_body">
    </div>
    <div class="result_footer">
        <button class="result_footer_button">Call</button>
        <button class="result_footer_button"><a href="" target="_blank" class="result_website">Visit website</a></button>
        <button class="result_footer_button">Make reservation</button>
    </div>
</div>

</section>
``

Answer 1

No you do not need a web server for a simple JS app that runs locally.不，对于在本地运行的简单 JS 应用程序，您不需要 web 服务器。 Your code has a lot of mistakes, but main issue you are experiencing is that you defined GetPost after you registered event listener ( .addEventListener('click', GetPosts); ).您的代码有很多错误，但您遇到的主要问题是您在注册事件侦听器后定义GetPost （ .addEventListener('click', GetPosts); ）。 Place document.querySelector('.submit-btn').addEventListener('click', GetPosts);放置document.querySelector('.submit-btn').addEventListener('click', GetPosts); after GetPost function.在GetPost function 之后。 Also you need to prevent form from submitting (since you have no backend server to go to).您还需要防止表单提交（因为您没有 go 的后端服务器）。 You can do this by using preventDefault() method.您可以使用preventDefault()方法来做到这一点。

function GetPosts(e) {
  e.preventDefault();
...
}

For your simple project I suggest looking into jquery对于您的简单项目，我建议您查看jquery

Remember to use console.log for debugging and good luck on your journey of learning JS and HTML basics.请记住使用console.log进行调试，并祝您在学习 JS 和 HTML 基础知识的过程中好运。

PS After you get the basics, look into a proper JS framework like react , vue or angular PS 掌握基础知识后，请查看合适的 JS 框架，例如react 、 vue或angular

我想解析 JSON 数据并将其公开发布在我的本地网站上，来自 API

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-10-17 21:51:31

我想解析 JSON 数据并将其公开发布在我的本地网站上，来自 API

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-10-17 21:51:31

解决方案1
0 已采纳 2019-10-17 21:51:31