0

I'm using AngularJS to download json data from my API and I display them like this

    <div class="school" data-ng-repeat="s in szkola">
    <div class="city">{{s.typSzkoly}},   szkoła {{s.rodzajSzkoly}} 
<span class="dist"></span></div> //DISTANCE
    </div>
    <div class="tags">
       <div class="subject"><span>{{s.kodpocztowy}}</span></div>
       <div class="subject"><span>{{s.miasto}}</span><span> ul. {{s.adres}}</span></div>
    </div>
    </div>

Next my jQuery code calculate distance between two points.

 function callback(response, status) {
        console.log(response);
        console.log(status);
        if (status == google.maps.DistanceMatrixStatus.OK) {
            var origins = response.originAddresses;
            var destinations = response.destinationAddresses;
            for (var i = 0; i < origins.length; i++) {
                var results = response.rows[i].elements;
                for (var j = 0; j < results.length; j++) {
                    var element = results[j];
                    var distance = element.distance.text;
                    console.log("Distance: ", dystans);
                    //$(".dystans").append(dystans);
                    $(".widget.searching-result .school > .info > .city > .dist").html(distance);
                }
            }
        }
    }

console.log display data correctly but result in browser display only last result in all rows. How to add value from jQuery to each row from ng-repeat?

function codeAddress(dane, nazwy) {

        console.log("Jestem w codeAddress: " + nazwy[i]);
        for (var i = 0; i < dane.length; i++) {
            console.log("Kod pocztowy : " + kod[i]);
            console.log("pokaz1: " + nazwy[i]);
            {
                geocoder.geocode({'componentRestrictions':
                            {country: 'PL'}, address: dane[i]}, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        adresSLatLng = results[0].geometry.location;
                        service.getDistanceMatrix(
                                {
                                    origins: [adresULatLng], //adres Ucznia
                                    destinations: [adresSLatLng], //adres Szkoły
                                    travelMode: google.maps.TravelMode.WALKING,
                                }, callback);
                        console.log("Adres Ucznia: " + adresULatLng);
                        console.log("Adres Szkoły: " + adresSLatLng);
                        console.log("Wynik: " + results[0].geometry.location);
                    } else {
                        alert("Nie można wyliczyć dystansu: " + status);
                    }
                });
            }
        }

2 Answers 2

1

You can use index of iteration i along with :eq selector to only target that row:

  $(".widget.searching-result .school > .info > .city > .dist:eq("+ i +")").html(distance);
Sign up to request clarification or add additional context in comments.

8 Comments

Ok, but this display only last result in first row.
@lukassz: use i instead of j
@lukassz: can you reproduce the issue in fiddle.
I do not like, downloading data locally. Too much code.
I display iteration var in console log but is always equal 0.
|
0

use this-

(".widget.searching-result .school > .info > .city > .dist").append(distance);

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.