如何使用jQuery將json數據的每個id從一個ajax調用傳遞到另一個

Question

我想從food2fork api獲取數據，在這兩個api中可以獲取數據。 一個用於配方搜索，另一個用於成分詳細信息。我試圖獲取每個ID，並將其傳遞給另一個Ajax調用。 到目前為止，我的代碼如下所示：

http://food2fork.com/api/search?key=7508d614a766c7768131b60ef99a3f52&q=pizza
http://food2fork.com/api/get?key=7508d614a766c7768131b60ef99a3f52&rId=35128

JavaScript的：

$(document).ready(function() {
    var id, b, c, temp;
    $("#button1").click(function() {
        var food = $("#food").val();
        $.ajax({
            type: 'POST',
            url: "https://mindapp-pulpy.rhcloud.com/AuthXmlPulpy",
            data: {
                appid: 'MPAPP_1060',
                p1: food
            },
            //global:false,
            //async:false,
            dataType: "xml",
            success: function(data) {
                $("#display1").hide();
                $(data).find("root").each(function() {
                    id = $(this).find("rid").text(); //recipe-id
                    b = $(this).find("img").text(); //image-url
                    c = $(this).find("title").text(); //title
                    console.log(id);
                    $("#disimg").append('<div class="col-md-4"><div class="panel panel-info"><div class="panel-heading myshow"><strong>' + c + '</strong></div><div class="panel-body"><img class= "img-responsive thumbnail" src="' + b + '" style="height:150px;width:200px;"><button type="button" class="btn btn-primary btn-sm mine"><span class="glyphicon glyphicon-arrow-right"></span> Details..</button></div></div></div>');

                    $('.myshow').on('click', +c, function(event) {
                        if (event.handled !== true) {
                            listObject.itemID = id;
                            var currentID = listObject.itemID;
                            window.sessionStorage.setItem('parentId', currentID);
                            console.log(currentID + 'recipeid');
                            event.handled = true;
                            return false;
                        }
                    });
                });
            }, //success
            beforeSend: function() {
                // Code to display spinner
                $("#disimg").empty();
                $(".loader").show();
            },
            complete: function() {
                // Code to hide spinner.
                $(".loader").hide();
            },
            error: function(request, error) {
                $("#display1").hide();
                $("#mydisplay").html('<center><h1> OOPS! </strong> Network error, Data not found..</center></h1>');
            }
        }); //ajax ends
        var parentId = sessionStorage.getItem('parentId');
        $.ajax({
            type: "POST",
            url: "https://mindapp-pulpy.rhcloud.com/AuthXmlPulpy",
            data: {
                appid: 'MPAPP_1065',
                p1: parentId
            },
            dataType: "xml",
            success: function(xml) {
                xmlParser(xml);
            }
        });

        function xmlParser(xml) {
            //var parentId=sessionStorage.getItem('parentId');
            $(xml).find("root").each(function() {
                var d = $(this).find("recid").text();
                var desc = $(this).find("indg").text();
                console.log(desc);
                //$("#details").append('desc:'+ desc +'<br>');
            });
        }
    });
}); //document

它只需要最后一個recipe_id ，我哪里出錯了？ 你能幫我么

Answer 1

由於關閉行為，這是可以預期的，

將內部處理程序包裝到另一個閉包中，這樣可以解決問題

(function (id) {
    $('.myshow').on('click', +c, function (event) {
        if (event.handled !== true) {
            listObject.itemID = id;
            var currentID = listObject.itemID;
            window.sessionStorage.setItem('parentId', currentID);
            console.log(currentID + 'recipeid');
            event.handled = true;
            return false;
        }
    });
})(id);

看看常見的錯誤

在您的情況下，單擊處理程序將在以后的某個時間點執行，屆時id的值將成為each循環的最后一個元素。

soulutin之所以能夠工作，是因為它創建了另一個私有的clousure，並且每個私有的id值都不同。