Я хотел бы проанализировать данные JSON и опубликовать их на своем локальном веб-сайте из API.

Я хотел бы проанализировать данные JSON и опубликовать их на своем локальном веб-сайте с помощью API.

В настоящее время я загружаю api zomato restaurant, и у меня есть ключ api. Я пытаюсь отправить данные через поисковый запрос после того, как кто-то вводит данные в форме. Я сталкиваюсь с различными вопросами, касающимися этого проекта. Первая проблема заключается в том, что я хочу сделать это полностью локально, но я использую API, который, насколько я понимаю, требует от меня какой-то внутренней части, где хранятся данные.

Могу ли я временно сохранить данные в локальном хранилище без проблем? или моя единственная надежда — сделать что-то без серверной части, в первую очередь используя https://jsonplaceholder.typicode.com/

В настоящее время это мой код, и у меня есть несколько div, которые я хочу добавить после завершения запроса seach и получения данных. Посмотрел несколько видео на эту тему, хочу использовать fetch для получения данных, но я думаю, что мой код — беспорядочный беспорядок. Извиняюсь, так как мне очень сложно найти краткую информацию по этому вопросу.

 `` 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) ={amp}gt; res.json()) .then((data) ={amp}gt; { let output = '{amp}lt;h2{amp}gt;Get Posts{amp}lt;/h2{amp}gt;'; data.forEach(function(post){ output =` {amp}lt;div{amp}gt; {amp}lt;h2{amp}gt;${post.title}{amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt;${post.body}{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; `; }); document.getElementById('restaurant_results').innerHTML = output; }) } 

«

«

  {amp}lt;body{amp}gt; {amp}lt;h1{amp}gt; Restaurant Finder{amp}lt;/h1{amp}gt; {amp}lt;div class="wrapper"{amp}gt; {amp}lt;form action=""{amp}gt; {amp}lt;div class="form-wrapper"{amp}gt; {amp}lt;label for="restaurant-name"{amp}gt;Search{amp}lt;/label{amp}gt; {amp}lt;input type="restaurant-name" type="text" id="restaurant-name" placeholder="Search for a restaurant"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-wrapper"{amp}gt; {amp}lt;label for="city-name"{amp}gt;City{amp}lt;/label{amp}gt; {amp}lt;input type="city-name" type="text" id="city-name" value="Bethesda" value="New York" disabled{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;input type="submit" class="submit-btn"{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;hr{amp}gt; {amp}lt;section id="restaurant_results"{amp}gt; {amp}lt;div class="result_card"{amp}gt; {amp}lt;div class="result_header"{amp}gt; {amp}lt;h2 class="result_title"{amp}gt;${title}{amp}lt;/h2{amp}gt; {amp}lt;h3 class="result_location result_neighborhood"{amp}gt;${neighborhood}{amp}lt;/h3{amp}gt; {amp}lt;h3 class="result_location result_address"{amp}gt;${address}{amp}lt;/h3{amp}gt; {amp}lt;p class="result_price"{amp}gt;${price}{amp}lt;/p{amp}gt; {amp}lt;!--{amp}lt;p{amp}gt;${cuisine type}{amp}lt;/p{amp}gt;--{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="result_body"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="result_footer"{amp}gt; {amp}lt;button class="result_footer_button"{amp}gt;Call{amp}lt;/button{amp}gt; {amp}lt;button class="result_footer_button"{amp}gt;{amp}lt;a href="" target="_blank" class="result_website"{amp}gt;Visit website{amp}lt;/a{amp}gt;{amp}lt;/button{amp}gt; {amp}lt;button class="result_footer_button"{amp}gt;Make reservation{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/section{amp}gt; `` 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector