StackOverflow FTW - Angular.js Course Correction (for CodeSchool)
Continuing the discussion from Shaping Up with Angular.js Level 5 Challenge 3 [FIXED] - re: ngRepeat/dupes error:
paulajbastos said:
Nevermind... my mistake with json written
In the previous thread, the author reported that it was his mistake re: the issue with the JSON, but I wanted to clarify this a bit further, as I ran into this problem not because of a small error.
The issue here is, we wrote our code in the HTML file originally, using a very basic array. When we pulled that code out of the HTML file into a JSON file all its own, it wasn't properly formatted to hold its own as a legitimate JSON file.
Seems simple, but it took a few tries before I was sure that the formatting had to be the problem. After a couple of different attempts at debugging my issue myself I turned to google because I was determined to get through the final challenge and finish the course.
It turns out that copying our gem array from the app.html file into a JSON file, doesn't quite get us where we need to go. As was explained by joakimbl on Stack Overflow:
It seems like data is a string and not an array. This is probably because the response body from the server is not properly formatted JSON. Instead of traversing objects in an array, ng-repeat traverses characters in a string and throws an error on the second tab character (encoded as %0D) it detects.
Here's a link to the full explanation (question posed by a fellow codeschooler):
stackoverflow.com
$http dependency injection throwing error
asked by mtpultz on 08:01AM - 07 Jun 14
javascript, json, angularjs, dependency-injection
The author of the solution (our buddy joakimbl) even goes so far as to provide a plunker with properly formatted JSON to prove the case: http://plnkr.co/edit/XbPuXkykzv36NyH3sSeu?p=preview
In lieu of reformatting my own code (which differed marginally) I swapped in his and my app got back to working.
But I just found a JSON formatter/validator and went back in, cleaned my code and swapped it back.
It worked!
You just need to clean up your array before expecting it to work in a standalone JSON file. Then (and ONLY then) will you stop getting that unhelpful "ngRepeat/dupes" error -- offering no data about where the dupes are. The reason that happened is because it's basically reading a duplication of an empty file, since it can't read the array correctly.
Another piece of sage wisdom that he offers:
You shouldn't use the minified version of Angular while developing. You'll get better error messages when using the non-minified version.
I totally feel you joa!
But of course, we were following the course directions, and well... the course directed us to go minified. That said, in the same vein... following the course line by line ALSO got us into this little bit of a pickle to begin with. In any case, if you were hitting a wall, I hope this helps.