使用push in jquery时循环不能正常工作

Question

我有一个包含pickUpLatitidute＆amp;的JSON回复pickUpLongitude，我想将这些值推送到数组waypts中，因此我尝试了for循环。

在for循环内我推动pickUpLatitidute＆amp; pickUpLongitude，但它无法正常工作。

点击提交按钮，您将看到我作为回复获得的内容。

我收到的是pickUpLatitidute＆amp; pickUpLongitude值。

＆＃13;

＆＃13;

$('#btn-submit').click(function(e){
    e.preventDefault();
    var res={
        "status": "success",
        "count": 3,
        "data":
            [
                {
                    "tripId": "1",
                    "pickUpLatitidute": "12.9565226",
                    "pickUpLongitude": "77.70730989999993"
                },
                {
                    "tripId": "1",
                    "pickUpLatitidute": "12.9550587",
                    "pickUpLongitude": "77.68279819999998"
                },
                {
                    "tripId": "1",
                    "pickUpLatitidute": "12.9824",
                    "pickUpLongitude": "77.6927990"
                }
            ]
        };
    $.each( res['data'], function( key, value ) {
        if(res['status']=='success'){
            calculateAndDisplayRoute(1, 1);
            // calculateAndDisplayRoute() START HERE 
            function calculateAndDisplayRoute(directionsService, directionsDisplay) {
                var latitdute = JSON.parse(value.pickUpLatitidute);
                var longitude = JSON.parse(value.pickUpLongitude);
                var waypts = [];
                for (i = 0; i < 3; i++) { 
                    waypts.push(
                        {
                            location: {
                                lat: latitdute,
                                lng: longitude
                            },
                            stopover: true
                        }
                    );
                }
                console.log(waypts);
            }
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form id="testForm">
    <select name="tripId">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <button type="button" id="btn-submit">submit</button>
</form>

＆＃13;

＆＃13;

＆＃13;

我的预期结果：

[
    {
        "location": {
            "lat": 12.9565226,
            "lng": 77.70730989999993
        },
        "stopover": true
    },
    {
        "location": {
            "lat": 12.9550587,
            "lng": 77.68279819999998
        },
        "stopover": true
    },
    {
        "location": {
            "lat": 12.9824,
            "lng": 77.692799
        },
        "stopover": true
    }
]
[
    {
        "location": {
            "lat": 12.9565226,
            "lng": 77.70730989999993
        },
        "stopover": true
    },
    {
        "location": {
            "lat": 12.9550587,
            "lng": 77.68279819999998
        },
        "stopover": true
    },
    {
        "location": {
            "lat": 12.9824,
            "lng": 77.692799
        },
        "stopover": true
    }
]
[
    {
        "location": {
            "lat": 12.9565226,
            "lng": 77.70730989999993
        },
        "stopover": true
    },
    {
        "location": {
            "lat": 12.9550587,
            "lng": 77.68279819999998
        },
        "stopover": true
    },
    {
        "location": {
            "lat": 12.9824,
            "lng": 77.692799
        },
        "stopover": true
    }
]

Answer 1

您的for循环嵌套在each循环中，并且每次迭代都会将waypts重新声明为空数组。

我已将您的var waypts=[];声明移至each()之外，并完全删除了内部for循环。

＆＃13;

＆＃13;

$('#btn-submit').click(function(e){
    e.preventDefault();
    var res={
        "status": "success",
        "count": 3,
        "data":
            [
                {
                    "tripId": "1",
                    "pickUpLatitidute": "12.9565226",
                    "pickUpLongitude": "77.70730989999993"
                },
                {
                    "tripId": "1",
                    "pickUpLatitidute": "12.9550587",
                    "pickUpLongitude": "77.68279819999998"
                },
                {
                    "tripId": "1",
                    "pickUpLatitidute": "12.9824",
                    "pickUpLongitude": "77.6927990"
                }
            ]
        };
    if(res['status']=='success'){
        var waypts=[];
        for (i=0; i<res['count']; ++i) {
            var temp=[];
            $.each( res['data'], function( key, value ) {
                calculateAndDisplayRoute(1, 1);
                // calculateAndDisplayRoute() START HERE 
                function calculateAndDisplayRoute(directionsService, directionsDisplay) {
                    var latitdute = JSON.parse(value.pickUpLatitidute);
                    var longitude = JSON.parse(value.pickUpLongitude);
                    temp.push(
                        {
                            location: {
                                lat: latitdute,
                                lng: longitude
                            },
                            stopover: true
                        }
                    );
                }
            });
            waypts.push(temp);
        }
        console.log(waypts);
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form id="testForm">
    <select name="tripId">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <button type="button" id="btn-submit">submit</button>
</form>

＆＃13;

＆＃13;

＆＃13;