Angular Js ng repeat showing wrong value on a div

Question

I built an Angular app and I am using ng-repeat to show data from the model in to an html view. But i am getting wrong values:

Model looks like this:

[{
   id : 1,
   name : 'jijo'
   address : 'addressone',
 },
 {
   id : 2,
   name : 'albert'
   address : 'addressone',
 },

{
   id : 3,
   name : 'moana'
   address : 'addressone',
 },
{
   id : 4,
   name : 'card'
   address : 'addressone',
 }
]

Html code looks like this:

    <section id="main" ng-repeat="(id, name) in data.repo track by id"
    <div id="sub_main_one">
       {{id}} //prints one
     </div>

    <div id="sub_main_two">
       {{id}} //prints one
     </div>

     <div id="sub_main_three">
       {{id}} //prints one
     </div>

     <div id="sub_main_four">
       {{id}} //prints one
     </div>    


     <div id="sub_main_five">
       {{id}} //suppose to be one but prints 4 on the first repeat
     </div>

   </section>

The id is printing 1 in most of the divs, but in the last div it's giving me a wrong value (4), which is the id from the last object in the array. How can I fix this issue ?..

@JijoJohn, is your section tag well written?, a `>` is missing in your opening tag — Javier Gonzalez, Feb 01 '18 at 19:38
Your I's in your post were not capitalized. English proper noun. Needs capitalized. Makes it a whole lot easier to read. Gets you answers faster. @JojoJohn\ — , Feb 01 '18 at 19:38
Why are they all supposed to be 1, when your model shows 1, 2, 3, 4? And, while your comment says "prints 4 on the first repeat", your question says "it's giving me a wrong value (9)" — Mawg says reinstate Monica, Feb 01 '18 at 19:39
@Mawg edited the post, the section repeats 4 times, each contains it's own data from the object in the array.. — Jijo John, Feb 01 '18 at 19:41
@TheOneWhoMade sorry , clicked the wrong button , sorry for that. — Jijo John, Feb 01 '18 at 19:41
Having `
` twice is not legal HTML. An `id` should be unique in the DOM. Than may not be your problem, but it is worth fixing, as one of them is displaying the wrong value. — Mawg says reinstate Monica, Feb 01 '18 at 19:47
also, your JSON is not valid - all of those `name` lines need a terminating comma. Could you please post your actual code? Chrome won't display anything at all for me , suing what you have posted. Maybe you should post a CodePen or Plunk — Mawg says reinstate Monica, Feb 01 '18 at 19:57

score 1 · Answer 1 · answered Feb 01 '18 at 19:59

1

There is a lot of missing > in your code, then your ng-repeat sentence is wrong, the (key, value) in obj sintax is to iterate on properties of an object, not to iterate items on an array (check the angularjs documentation):

Fixing that:

<section id="main" ng-repeat="item in data">
  <div id="sub_main_one">
     {{item.id}}
     hey
   </div>
  <div id="sub_main_two">
     {{id}}
   </div>
   <div id="sub_main_three">
     {{id}}
   </div>
   <div id="sub_main_four">
     {{id}}
   </div>
   <div id="sub_main_five">
     {{id}}
   </div>
 </section>

here is the plunker

answered Feb 01 '18 at 19:59

Javier Gonzalez

915
6
14

Good Plunk ! (what the OP should have done in the first place) Btw, does he even need the `track by`? And, if so, why not `track by $index`? – Mawg says reinstate Monica Feb 01 '18 at 20:02
he doesn't need the `track by`, that's only to deal with duplicated items, check https://stackoverflow.com/questions/39640160/what-is-track-by-in-angularjs-and-how-does-it-work – Javier Gonzalez Feb 01 '18 at 20:06

Angular Js ng repeat showing wrong value on a div

1 Answers1