0

I'm using angular2 in my project, and i came across some problems to use it,I have an API which returns this JSON Object:

items={"departure":"New York","arrival":"California","stations":[{"station":"toto"},{"station":"titi"},{"station":"tata"},...]}

what i want to achieve from this JSON object is (look at this image): thats what i want to achieve

I tried this code, but it doesnt work as expected :

<div class="panel-body panelcolor">
     <div *ngFor="let item of items.stations; let i=index, let last = last">

        <div  *ngIf="!last"><span>{{item.station}}</span> --> <span *ngIf="items.stations[i+1]">{{items.stations[i+1].station}}</span>
                              <div class="input-group spinner">
                                        <input type="text" formControlName="price" class="form-control" >
                                        <div class="input-group-btn-vertical">
                                        <button (click)="spinnerPriceUp()" class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
                                        <button (click)="spinnerPriceDown()" class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
                                        </div>
                              </div>
                                      </div>

                        </div>
                                    <button style="margin-left: 479px;"> Submit </button>
                    </div>

this code its gave this result in this picture :thats what i tried

but when i tried to change the price in one generated textbox, all the textboxes are chenged too,i dont know why, i want also when i click the submit button i want to generate this JSON object:

{"departure":"New York","arrival":"California","stations":[{"station":"toto"},{"station":"titi"},{"station":"tata"}], "prices":[{"etape":"New York-->toto","price":"20"},{"etape":"toto-->>titi","price":"10"}, {"etape":"titi-->tata","price":"40"},"etape":"tata-->California","price":"65"}]}

can anyone help please to achieve this result ?

Improve this question

1 Answer 1

Reset to default
1

Here you go :

All you need to do is code outside of for loop for your departure to first station and last station to departure

<div class="panel-body panelcolor">

    <div *ngIf="items?.departure">
        <span>{{items.departure}}</span> --> 
        <span *ngIf="items.stations.length > 0">
            {{items.stations[0].station}}
        </span>
        <span *ngIf="items.stations.length === 0">
            {{items.arrival}}
        </span>

        <div class="input-group spinner">
            <input type="text" formControlName="price" class="form-control">
            <div class="input-group-btn-vertical">
                <button (click)="spinnerPriceUp()" class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
                <button (click)="spinnerPriceDown()" class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
            </div>
        </div>
    </div>    

    <div *ngFor="let item of items.stations; let i=index, let last = last">

        <div *ngIf="!last">
            <span>{{item.station}}</span> --> <span *ngIf="items.stations[i+1]">{{items.stations[i+1].station}}</span>
            <div class="input-group spinner">
                <input type="text" formControlName="price" class="form-control">
                <div class="input-group-btn-vertical">
                    <button (click)="spinnerPriceUp()" class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
                    <button (click)="spinnerPriceDown()" class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
                </div>
            </div>
        </div>

    </div>

    <div *ngIf="items?.arrival && items?.stations.length > 0">
        <span>{{items.stations[items.stations.length-1].station}}</span> --> <span>{{items.arrival}}</span>
        <div class="input-group spinner">
            <input type="text" formControlName="price" class="form-control">
            <div class="input-group-btn-vertical">
                <button (click)="spinnerPriceUp()" class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
                <button (click)="spinnerPriceDown()" class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
            </div>
        </div>
    </div>

    <button style="margin-left: 479px;"> Submit </button>
</div>

For the output result, you have to read about reactive form in angular, by using this you'll be able to achieve the desired result.

Improve this answer
Sign up to request clarification or add additional context in comments.

14 Comments

thanks for answer ser, please can u add it to plunker project please?
@yoyo1236areezd, please create the plunker with your code first, I will make the required changes over there
i tried your code but it gives me this error:ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'departure' of undefined
any suggestions please? there was an error in my code i replaces the city by the word station because theres no such thing in the json object anyway, your doesnt work as expected.
the same error:ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'departure' of undefined, just to remind you heres the json object :items={"departure":"New York","arrival":"California","stations":[{"station":"toto"},{"station":"titi"},{"station":"tata"}]};
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.