{"id":1272,"date":"2017-08-14T13:41:03","date_gmt":"2017-08-14T11:41:03","guid":{"rendered":"https:\/\/blog.thecodecampus.de\/?p=1272"},"modified":"2023-12-20T20:11:43","modified_gmt":"2023-12-20T19:11:43","slug":"angular-http-testing-syntaxerror-unexpected-token-o-json-position-1","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/angular-http-testing-syntaxerror-unexpected-token-o-json-position-1\/","title":{"rendered":"Angular HTTP Testing &#8220;SyntaxError: Unexpected token o in JSON at position 1&#8221;"},"content":{"rendered":"<p><strong>tl:dr; Solve this Issue:<\/strong><\/p>\n<p>Add the following line to your imports:<\/p>\n<pre class=\"lang:default decode:true\">import { Response } from '@angular\/http';\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Full version:<\/strong><\/p>\n<p>A common problem affecting many developers when writing tests for the Angular 4 HTTP service is the following stack trace. It occurs if you assemble an response using a the wrong class. The call of <code>.json()<\/code>will throw the error.<\/p>\n<pre class=\"lang:default decode:true \">\"Unexpected token o in JSON at position 1\"\r\n<\/pre>\n<pre class=\"lang:default decode:true\">\"SyntaxError: Unexpected token o in JSON at position 1 at SafeSubscriber._next (http:\/\/localhost:9876\/_karma_webpack_\/webpack: [...]<\/pre>\n<p>It throws because the response is of a false type and the body of the response is of type\u00a0<code>ReadableStream<\/code>\u00a0instead of \u00a0a string value that contains your JSON.<\/p>\n<p>Your source code might look like this:<\/p>\n<pre class=\"lang:default decode:true \">...\r\nconst mockResponse = {\r\n  data: [\r\n    { id: 2313, value: 'Value for 2313' },\r\n    { id: 1231, value: 'Value for 1231' },\r\n  ]\r\n};\r\n\r\nmockBackend.connections.subscribe((connection) =&gt; {\r\n  connection.mockRespond(new Response(new ResponseOptions({\r\n    body: JSON.stringify(mockResponse)\r\n  })));\r\n});\r\n...<\/pre>\n<p>The actual problem is not in the code but in the class imported for <code>Response<\/code>. By default the import will point to lib.es6.d.ts file. Since it is usually available as global ambient there is no explicit import necessary. Therefore we have to overwrite it to import response correctly from\u00a0<code>@angular\/http<\/code>.<\/p>\n<pre class=\"lang:default decode:true \">import { Response } from '@angular\/http';\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>tl:dr; Solve this Issue: Add the following line to your imports: import { Response } from &#8216;@angular\/http&#8217;; &nbsp; Full version: A common problem affecting many developers when writing tests for the Angular 4 HTTP service is the following stack trace. It occurs if you assemble an response using a the wrong class. The call of [&#8230;]<br \/><a class=\"meta-big\" href=\"https:\/\/www.thecodecampus.de\/blog\/angular-http-testing-syntaxerror-unexpected-token-o-json-position-1\/\"> READ MORE<\/a><\/p>\n","protected":false},"author":29,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73,2,78,60],"tags":[],"class_list":["post-1272","post","type-post","status-publish","format-standard","hentry","category-angular","category-javascript","category-testing","category-typescript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Angular HTTP Testing &quot;SyntaxError: Unexpected token o in JSON at position 1&quot; - Web Development Blog<\/title>\n<meta name=\"description\" content=\"Tackle Angular HTTP testing. Resolve SyntaxError\u2014Unexpected token &#039;o&#039; in JSON. Elevate error handling, optimize testing. Dive into solutions now!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.thecodecampus.de\/blog\/angular-http-testing-syntaxerror-unexpected-token-o-json-position-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular HTTP Testing &quot;SyntaxError: Unexpected token o in JSON at position 1&quot; - Web Development Blog\" \/>\n<meta property=\"og:description\" content=\"Tackle Angular HTTP testing. Resolve SyntaxError\u2014Unexpected token &#039;o&#039; in JSON. Elevate error handling, optimize testing. Dive into solutions now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thecodecampus.de\/blog\/angular-http-testing-syntaxerror-unexpected-token-o-json-position-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development tips and tricks - theCodeCampus Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-14T11:41:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-20T19:11:43+00:00\" \/>\n<meta name=\"author\" content=\"theCodeCampus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"theCodeCampus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-http-testing-syntaxerror-unexpected-token-o-json-position-1\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-http-testing-syntaxerror-unexpected-token-o-json-position-1\\\/\"},\"author\":{\"name\":\"theCodeCampus\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/276bbda2f8da73154f22fb652201cfbc\"},\"headline\":\"Angular HTTP Testing &#8220;SyntaxError: Unexpected token o in JSON at position 1&#8221;\",\"datePublished\":\"2017-08-14T11:41:03+00:00\",\"dateModified\":\"2023-12-20T19:11:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-http-testing-syntaxerror-unexpected-token-o-json-position-1\\\/\"},\"wordCount\":151,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"articleSection\":[\"Angular\",\"JavaScript\",\"Testing\",\"TypeScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-http-testing-syntaxerror-unexpected-token-o-json-position-1\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-http-testing-syntaxerror-unexpected-token-o-json-position-1\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-http-testing-syntaxerror-unexpected-token-o-json-position-1\\\/\",\"name\":\"Angular HTTP Testing \\\"SyntaxError: Unexpected token o in JSON at position 1\\\" - Web Development Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\"},\"datePublished\":\"2017-08-14T11:41:03+00:00\",\"dateModified\":\"2023-12-20T19:11:43+00:00\",\"description\":\"Tackle Angular HTTP testing. Resolve SyntaxError\u2014Unexpected token 'o' in JSON. Elevate error handling, optimize testing. Dive into solutions now!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-http-testing-syntaxerror-unexpected-token-o-json-position-1\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-http-testing-syntaxerror-unexpected-token-o-json-position-1\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-http-testing-syntaxerror-unexpected-token-o-json-position-1\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular HTTP Testing &#8220;SyntaxError: Unexpected token o in JSON at position 1&#8221;\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"name\":\"Web Development tips and tricks - theCodeCampus Blog\",\"description\":\"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\",\"name\":\"theCodeCampus\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"width\":156,\"height\":156,\"caption\":\"theCodeCampus\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/276bbda2f8da73154f22fb652201cfbc\",\"name\":\"theCodeCampus\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg\",\"caption\":\"theCodeCampus\"},\"description\":\"Our knowledge is not simply gained through reading - it is trained, tested and constantly being expanded. Because first and foremost, we are all developers at W11K. The know-how that we acquire here as developers, consultants and information architects flows immediately into our training courses and articles for theCodeCampus.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/showcase\\\/thecodecampus\\\/\"],\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular HTTP Testing \"SyntaxError: Unexpected token o in JSON at position 1\" - Web Development Blog","description":"Tackle Angular HTTP testing. Resolve SyntaxError\u2014Unexpected token 'o' in JSON. Elevate error handling, optimize testing. Dive into solutions now!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.thecodecampus.de\/blog\/angular-http-testing-syntaxerror-unexpected-token-o-json-position-1\/","og_locale":"en_US","og_type":"article","og_title":"Angular HTTP Testing \"SyntaxError: Unexpected token o in JSON at position 1\" - Web Development Blog","og_description":"Tackle Angular HTTP testing. Resolve SyntaxError\u2014Unexpected token 'o' in JSON. Elevate error handling, optimize testing. Dive into solutions now!","og_url":"https:\/\/www.thecodecampus.de\/blog\/angular-http-testing-syntaxerror-unexpected-token-o-json-position-1\/","og_site_name":"Web Development tips and tricks - theCodeCampus Blog","article_published_time":"2017-08-14T11:41:03+00:00","article_modified_time":"2023-12-20T19:11:43+00:00","author":"theCodeCampus","twitter_card":"summary_large_image","twitter_misc":{"Written by":"theCodeCampus","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-http-testing-syntaxerror-unexpected-token-o-json-position-1\/#article","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-http-testing-syntaxerror-unexpected-token-o-json-position-1\/"},"author":{"name":"theCodeCampus","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/276bbda2f8da73154f22fb652201cfbc"},"headline":"Angular HTTP Testing &#8220;SyntaxError: Unexpected token o in JSON at position 1&#8221;","datePublished":"2017-08-14T11:41:03+00:00","dateModified":"2023-12-20T19:11:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-http-testing-syntaxerror-unexpected-token-o-json-position-1\/"},"wordCount":151,"commentCount":2,"publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"articleSection":["Angular","JavaScript","Testing","TypeScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.thecodecampus.de\/blog\/angular-http-testing-syntaxerror-unexpected-token-o-json-position-1\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-http-testing-syntaxerror-unexpected-token-o-json-position-1\/","url":"https:\/\/www.thecodecampus.de\/blog\/angular-http-testing-syntaxerror-unexpected-token-o-json-position-1\/","name":"Angular HTTP Testing \"SyntaxError: Unexpected token o in JSON at position 1\" - Web Development Blog","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#website"},"datePublished":"2017-08-14T11:41:03+00:00","dateModified":"2023-12-20T19:11:43+00:00","description":"Tackle Angular HTTP testing. Resolve SyntaxError\u2014Unexpected token 'o' in JSON. Elevate error handling, optimize testing. Dive into solutions now!","breadcrumb":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-http-testing-syntaxerror-unexpected-token-o-json-position-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thecodecampus.de\/blog\/angular-http-testing-syntaxerror-unexpected-token-o-json-position-1\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-http-testing-syntaxerror-unexpected-token-o-json-position-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thecodecampus.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular HTTP Testing &#8220;SyntaxError: Unexpected token o in JSON at position 1&#8221;"}]},{"@type":"WebSite","@id":"https:\/\/www.thecodecampus.de\/blog\/#website","url":"https:\/\/www.thecodecampus.de\/blog\/","name":"Web Development tips and tricks - theCodeCampus Blog","description":"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.","publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.thecodecampus.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.thecodecampus.de\/blog\/#organization","name":"theCodeCampus","url":"https:\/\/www.thecodecampus.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","width":156,"height":156,"caption":"theCodeCampus"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/276bbda2f8da73154f22fb652201cfbc","name":"theCodeCampus","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg","caption":"theCodeCampus"},"description":"Our knowledge is not simply gained through reading - it is trained, tested and constantly being expanded. Because first and foremost, we are all developers at W11K. The know-how that we acquire here as developers, consultants and information architects flows immediately into our training courses and articles for theCodeCampus.","sameAs":["https:\/\/www.linkedin.com\/showcase\/thecodecampus\/"],"url":"https:\/\/www.thecodecampus.de\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/1272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/comments?post=1272"}],"version-history":[{"count":4,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/1272\/revisions"}],"predecessor-version":[{"id":1276,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/1272\/revisions\/1276"}],"wp:attachment":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/media?parent=1272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/categories?post=1272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/tags?post=1272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}