{"id":1496,"date":"2022-08-30T15:17:01","date_gmt":"2022-08-30T15:17:01","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/23\/ember-object-has-no-method-map-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:17:01","modified_gmt":"2022-08-30T15:17:01","slug":"ember-object-has-no-method-map-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/ember-object-has-no-method-map-collection-of-common-programming-errors\/","title":{"rendered":"Ember &#8211; Object has no method &#39;map&#39;-Collection of common programming errors"},"content":{"rendered":"<p>I am going through the ember.js guides to learn Ember, and I am using the latest builds of ember.js, ember-data.js, and handlebars.js. I am able to successfully set up a basic nav that switches between views. However, upon trying to integrate a model with a <code>{{#each model}}<\/code>, I get an error message: Uncaught TypeError: Object # has no method &#8216;map&#8217;<\/p>\n<p>Many people seem to have asked a related question, but the solution has always been to update the version of ember, which I have already done.<\/p>\n<p>I believe have followed the tutorial precisely and my code so far is as follows.<\/p>\n<pre><code>App = Ember.Application.create();\n\nApp.Store = DS.Store.extend({\n    revision: 12,\n    \/\/ Says we are specifying all models in js\n    adapter: 'DS.FixtureAdapter'\n});\n\nApp.Router.map(function() {\n    this.resource('posts');\n    this.resource('about');\n});\n\nApp.PostsRoute = Ember.Route.extend({\n    model: function() {\n        return App.Post.find();\n    }\n});\n\nApp.Post = DS.Model.extend({\n    title: DS.attr('string'),\n    author: DS.attr('string'),\n    intro: DS.attr('string'),\n    extended: DS.attr('string'),\n    publishedAt: DS.attr('date')\n});\n\nApp.Post.FIXTURES = ({\n    id: 1,\n    title: 'Book Title',\n    author: 'Dave',\n    publishedAt: new Date('12-27-2012'),\n    intro: 'This is an introduction to the book',\n    extended: 'This is an even longer introduction to the book'\n}, {\n    id: 2,\n    title: 'Book Title 2',\n    author: 'James',\n    publishedAt: new Date('08-13-2012'),\n    intro: 'This is an introduction to another book',\n    extended: 'This is an even longer introduction to another book'\n});\n<\/code><\/pre>\n<p>And the relevant markup:<\/p>\n<pre><code>\n\n    \n        {{#linkTo 'index' classNames='brand'}}Brand{{\/linkTo}}\n        <\/code><\/pre>\n<ul class=\"nav\">\n<li><code>{{#linkTo 'about'}}About{{\/linkTo}}<\/code><\/li>\n<li><code>{{#linkTo 'posts'}}Posts{{\/linkTo}}<\/code><\/li>\n<\/ul>\n<pre>\n    \n\n{{outlet}}\n\n\n\n\n<br \/>Here is some text about the page\n\n\n\n\n\n    \n        \n            <\/pre>\n<p>{{#each model}} {{\/each}}<\/p>\n<table class='table'>\n<tr>\n<th>Recent Posts<\/th>\n<\/tr>\n<tr>\n<td>{{title}} <small class='muted'>by {{author}}<\/small><\/td>\n<\/tr>\n<\/table>\n<p>All help is much appreciated, and sorry if the formatting of this question is awful &#8211; it&#8217;s my first question! Cheers!<\/p>\n<ol>\n<li>\n<p>The main issue here is that your <code>{{#each}}<\/code> statement is a little malformed, you should be iterating over the <code>controller<\/code> object like so:<\/p>\n<pre><code>{{#each controller}}\n  <\/code><\/pre>\n<p>{{\/each}}<\/p>\n<p>This is because Ember controllers act a a proxy to their object or-in the case of <code>Ember.ArrayController<\/code>-to their array.<\/p>\n<table>\n<tr>\n<td>{{title}} <small class='muted'>by {{author}}<\/small><\/td>\n<\/tr>\n<\/table>\n<\/li>\n<li>\n<p>Try using controller instead of model to iterate over the models in an array controller.<\/p>\n<pre><code>        {{#each controller}}\n           <\/code><\/pre>\n<p>{{\/each}}<\/p>\n<table>\n<tr>\n<td>{{title}} <small class='muted'>by {{author}}<\/small><\/td>\n<\/tr>\n<\/table>\n<\/li>\n<\/ol>\n<p id=\"rop\"><small>Originally posted 2013-11-23 09:51:25. <\/small><\/p>","protected":false},"excerpt":{"rendered":"<p>I am going through the ember.js guides to learn Ember, and I am using the latest builds of ember.js, ember-data.js, and handlebars.js. I am able to successfully set up a basic nav that switches between views. However, upon trying to integrate a model with a {{#each model}}, I get an error message: Uncaught TypeError: Object [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1496","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1496"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1496\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}