{"id":6196,"date":"2020-04-29T16:32:49","date_gmt":"2020-04-29T16:32:49","guid":{"rendered":"https:\/\/max-drake.cc\/?p=6196"},"modified":"2020-04-29T16:32:55","modified_gmt":"2020-04-29T16:32:55","slug":"build-test-an-api-using-json-server","status":"publish","type":"post","link":"https:\/\/max-drake.cc\/?p=6196","title":{"rendered":"Build &#038; test an API using JSON-Server"},"content":{"rendered":"\n<p>This is really interesting. Brad Traversy&#8217;s  <strong>Create a Fake REST API with JSON-Server<\/strong> video follows on from my learning post about Node.js with The Coding Train&#8217;s tutorials. <\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Create a Fake REST API with JSON-Server\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/1zkgdLZEdwM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>I&#8217;m being pulled in 2 directions at this time, 1\/ Trying to get my head around using APIs and building them &amp; 2\/ Creating a Node.js server somewhere where I can run a site using it. <\/p>\n\n\n\n<p>At this point I&#8217;ll go back to exploring the API and building one, I want to get an understanding of their structure and how to call and manage them, so this is useful. <\/p>\n\n\n\n<p>I just found this web scraper tutorial by Brad Traversy which is what i want to do after this post:<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Intro To Web Scraping With Node.js &amp; Cheerio\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/LoziivfAAjE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Fake API for testing<\/p>\n\n\n\n<p>So there is a github repository where you can use their remote connection to test using that API, but you can only use GET, you can&#8217;t alter the data, whereas if you build your own you can test your front end with data structured as you want it to consume, also you can test other requests like POST. In the video he uses Postman to update fields, so can test to see if structure correct. Go here for github page <a href=\"https:\/\/github.com\/typicode\">typicode<\/a> \/ <strong><a href=\"https:\/\/github.com\/typicode\/json-server\" target=\"_blank\" rel=\"noreferrer noopener\">json-server<\/a><\/strong><\/p>\n\n\n\n<p>So, followed along with the first video tutorial up to starting the server <\/p>\n\n\n\n<p class=\"has-background has-luminous-vivid-amber-background-color\"><strong>>npm run json:server<\/strong><\/p>\n\n\n\n<p>I had some trouble as my JSON file was not formatted properly, so server wouldn&#8217;t start and got lots of <span style=\"color:#cf2e2e\" class=\"color\">ERRORS<\/span>. So searched for an <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/duckduckgo.com\/?t=ffab&amp;q=json+format&amp;ia=answer\" target=\"_blank\">online JSON formatter<\/a><\/strong> to check my JSON file, you need &#8220;&#8221; double quotes around all key pairs (apart form numbers).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"881\" height=\"968\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-15_59_13-json-format-at-DuckDuckGo.jpg\" alt=\"\" class=\"wp-image-6199 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-15_59_13-json-format-at-DuckDuckGo.jpg 881w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-15_59_13-json-format-at-DuckDuckGo-273x300.jpg 273w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-15_59_13-json-format-at-DuckDuckGo-768x844.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-15_59_13-json-format-at-DuckDuckGo-50x55.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-15_59_13-json-format-at-DuckDuckGo-46x50.jpg 46w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-15_59_13-json-format-at-DuckDuckGo-100x110.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-15_59_13-json-format-at-DuckDuckGo-91x100.jpg 91w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-15_59_13-json-format-at-DuckDuckGo-582x640.jpg 582w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-15_59_13-json-format-at-DuckDuckGo-640x703.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-15_59_13-json-format-at-DuckDuckGo-699x768.jpg 699w\" data-sizes=\"(max-width: 881px) 100vw, 881px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 881px; --smush-placeholder-aspect-ratio: 881\/968;\" \/><\/figure>\n\n\n\n<p>So once the JSON file was corrected I had no problem starting the server. <\/p>\n\n\n\n<p>In Brad&#8217;s video he then uses POSTMAN to update the data, this is something that I want to test, to see how to alter, add to or delete from the file. <\/p>\n\n\n\n<p>So , in the browser can use queries such as below you can use to query the json file:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>http:\/\/localhost:3000\/companies\/?<\/li><li>http:\/\/localhost:3000\/companies\/1\/users<\/li><li>http:\/\/localhost:3000\/users\/1<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">postman<\/h4>\n\n\n\n<p>In postman you need to set to a Post request, in <strong><span style=\"color:#cf2e2e\" class=\"color\">Headers<\/span><\/strong> tab you need to put <strong>content type<\/strong> as <strong>application\/json<\/strong> and in <strong>Body<\/strong> set to <strong>RAW <\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"563\" height=\"506\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_11_06-Postman.jpg\" alt=\"\" class=\"wp-image-6200 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_11_06-Postman.jpg 563w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_11_06-Postman-300x270.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_11_06-Postman-50x45.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_11_06-Postman-56x50.jpg 56w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_11_06-Postman-100x90.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_11_06-Postman-111x100.jpg 111w\" data-sizes=\"(max-width: 563px) 100vw, 563px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 563px; --smush-placeholder-aspect-ratio: 563\/506;\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"534\" height=\"422\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_12_26-Postman.jpg\" alt=\"\" class=\"wp-image-6201 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_12_26-Postman.jpg 534w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_12_26-Postman-300x237.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_12_26-Postman-50x40.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_12_26-Postman-63x50.jpg 63w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_12_26-Postman-100x79.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_12_26-Postman-127x100.jpg 127w\" data-sizes=\"(max-width: 534px) 100vw, 534px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 534px; --smush-placeholder-aspect-ratio: 534\/422;\" \/><\/figure>\n\n\n\n<p>And then run the post request. On checking with a GET request there are 3users, so that worked fine<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"684\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_16_22-Postman-1024x684.jpg\" alt=\"\" class=\"wp-image-6202 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_16_22-Postman-1024x684.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_16_22-Postman-300x200.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_16_22-Postman-768x513.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_16_22-Postman-600x400.jpg 600w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_16_22-Postman-50x33.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_16_22-Postman-75x50.jpg 75w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_16_22-Postman-100x67.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_16_22-Postman-150x100.jpg 150w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_16_22-Postman-959x640.jpg 959w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_16_22-Postman-640x427.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_16_22-Postman.jpg 1050w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/684;\" \/><\/figure>\n\n\n\n<p>so with patch I just gave Zoe a middle name , I&#8217;d left the comma at the end and it didn&#8217;t like that, also I identified it as  <strong><span style=\"background-color:#fcb900\" class=\"background-color\">http:\/\/localhost:3000\/users\/2<\/span><\/strong> in the URL, and it all worked. Cool<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"368\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_22_28-http___localhost_3000_users-1024x368.jpg\" alt=\"\" class=\"wp-image-6203 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_22_28-http___localhost_3000_users-1024x368.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_22_28-http___localhost_3000_users-300x108.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_22_28-http___localhost_3000_users-768x276.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_22_28-http___localhost_3000_users-50x18.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_22_28-http___localhost_3000_users-139x50.jpg 139w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_22_28-http___localhost_3000_users-100x36.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_22_28-http___localhost_3000_users-278x100.jpg 278w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_22_28-http___localhost_3000_users-640x230.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-16_22_28-http___localhost_3000_users.jpg 1512w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/368;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">End comment<\/h3>\n\n\n\n<p>This is a good exercise, and using postman with it allows me to see about getting, posting, patching and deleting,and I&#8217;ve built a JSON file. I need to think of things I want to put into a JSON file for consuming. I could store it on Github and call the raw data. <\/p>\n\n\n\n<p>One interesting point that I did hit, that CodeTrain man talked about was CORS error where API could only be used from a Server request, not a client request. I think it was series 3 about 2nd or 3rd video in. I had that issue I think with Stats NZ or else the Sharemarket one. <\/p>\n\n\n\n<p>I&#8217;m glad I&#8217;ve done this exercise, a good bit of learning on JSON structure. Now i have this method of talknig with an API structure with Postman &amp; JSON server I can start to extend the complexity of the JSON format. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is really interesting. Brad Traversy&#8217;s Create a Fake REST API with JSON-Server video follows on from my learning post about Node.js with The Coding Train&#8217;s tutorials. I&#8217;m being pulled in 2 directions at this time, 1\/ Trying to get my head around using APIs and building them &amp; 2\/ Creating a Node.js server somewhere [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6204,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35,43,29],"tags":[],"class_list":["post-6196","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-api_json","category-javascript","category-web"],"featured_image_src":"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-15_58_54-json-format-at-DuckDuckGo.jpg","featured_image_src_square":"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-30-15_58_54-json-format-at-DuckDuckGo.jpg","author_info":{"display_name":"Max Drake","author_link":"https:\/\/max-drake.cc\/?author=1"},"_links":{"self":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/6196","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6196"}],"version-history":[{"count":0,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/6196\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/media\/6204"}],"wp:attachment":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}