user3774781 user3774781 - 24 days ago 8
AngularJS Question

Onclick data repeating issue when fetching from JSON

I have included the code in http://codepen.io/sajoambattu/pen/MbezNa


I have 3 divs in which each div includes color selection, Memory and stock availability. The stock availability data is there just after the mobile device name.

All the data are coming from two JSON. The color selection and Memory data is coming from devices JSON and stock availability data is coming from stock JSON. Both JSON's I have included in the JS file

My requirement is based on the user selection of color and memory, the content of stock availability should change. Now the content is changing, but the problem I'm facing is it's changing the content of all three stock availability sections.

Issue Example:

Click iPhone 7 tab from the apple section and click on any color, now "OutOfStock" will display. The problem is the same "OutOfStock" message is getting replaced in all other sections as well.

Any help would be appreciated.

Answer
I have updated your code in http://codepen.io/anon/pen/gLwmLQ

I hope it helps you :)

Updated lines

HTML:

<p>{{x.result}}</p>

JS:

$scope.showStock = function(x,scode){
                   for (var j in stocks) {
        if(scode == stocks[j].handsetScode) {
                                                x.result = stocks[j].stockState;                                       
        }
      } 
 }

This is due to same scope.result is passed among all the stock.... So I have updating result value in your current running scope value of ng-repeat....