ajaxのdone内の関数に親の変数を渡したい

Question

ajaxのdone内の関数に親の変数を渡したいです。

for (key in object) {
    var category = object[key].category;
    var url = '/json/' + object[key].id + '/data.json'
    (function(category) {
        $.ajax({
            url: url,
            dataType: 'json'
        })
        .done(
            hogehoge
        );
    })(category);
}

function hogehoge (data) {
    console.log(data, category)
}

上記のhogehogeの中にcategoryを渡すことはできないでしょうか？

いろいろ検索して、クロージャーでラップするところまでいったのですが、その後が詰まってしまいました。
doneの中で引数(category)を書いてしまうとdataがcategoryになってしまいます。

ご存じの方がいれば、ご教示いただけると幸いです。

Answer 1

        .done(
            function(data){hogehoge(data, category);}
        );

はいかがでしょうか

Comments

[mocchimochi]

ありがとうございます。

みなさんに回答をいただけてよかったです。

[mocchimochi]

一番はやく回答をいただけたので、こちらの方をベストアンサーとさせていただきます。ありがとうございました！

Answer 2

function hogehoge (data) {
    console.log(data, category)
}

綺麗なJSを作るコツとして、
記述していないものには頼らない事が重要です。
この例ですとcategoryってなんやねんって話ですよ。

つまり、このcategoryには外から持ち込むという事を記述してやる必要があります。
使うものは全て持ち込みましょう。
候補は以下の2つです。

• クロージャーの引数を利用して2段階実行するするやり方
• Function.prototype.bindを使うやり方
• 関数ラッピング作戦

// 2段階実行
function hogehoge (category) {
  return function (data) {
    console.log(data, category);
  }
}

// bindを使う作戦・ラッピング作戦
function hogehoge (category, data) {
  console.log(data, category);
}

---

2段階実行のやり方から見ていきましょうか。

function hogehoge (category) {
    return function (data) {
      console.log(data, category);
    }
}

for (key in object) {
    var category = object[key];
    var url = '/json/data.json'
    $.ajax({
        url: url,
        dataType: 'json'
    })
    .done(hogehoge(category));
}

これだけで上手く動くはずです。
hogehoge関数はcategory引数を待ち受ける関数です。
これにcategoryを突っ込んで実行すると？

本命ロジックの関数が払い出されます。
次はdata引数を待ち受けてconsole.logを実行する関数です。
この時、実行するのに使ったcategory引数はバインドしっぱなしなのでちゃんとあるものとして使えるのです。

まぁ、hogehoge関数が汚れるのがダサいですね。
次いきましょ。

---

続いてbindを使うやり方

JavaScriptはオブジェクト指向言語なので関数もオブジェクトです。
その証拠として様々なプロパティやメソッドを所持しています。

その中で今回の役に立つのがFunction.prototype.bindメソッドです。

デモンストレーションとして、
2つ引数を取って合計値を返すadd関数を作ってみます。
この関数の引数1個目だけを先に束縛して、値を1個入れるだけで実行される関数も作っていきます。

function add (a, b) { return a + b; }

console.log(add(3, 5));
// 8

var add5 = add.bind(null, 5);

console.log(add5(10));
// 15

bindメソッドの第一引数は関数を宣言する度にthisがコロコロ切り替わる、
thisの束縛&固定になっています。
不要な時はとりあえずnull値をセット。

そして第二引数以降に値を記述することで、
見事に第一引数のみを先に束縛した関数を返す事に成功しました。

つまり、こうすれば解決。
hogehogeは非常に簡素になりましたね。

function hogehoge (category, data) {
    console.log(data, category);
}

for (key in object) {
    var category = object[key];
    var url = '/json/data.json'
    $.ajax({
        url: url,
        dataType: 'json'
    })
    .done(hogehoge.bind(null, category));
}

---

関数ラッピング作戦

関数は宣言したスコープより上に探しに行きます。
なのでdoneの時点で無名関数を生成すれば、
その配下では普通にcategory変数が利用可能です。

こうしてラッピングした関数を手渡せば解決。
世のアプリは大抵コレでやっているので中々情報が出てこないんだと思います。

function hogehoge (category, data) {
    console.log(data, category);
}

for (key in object) {
    var category = object[key];
    var url = '/json/data.json'
    $.ajax({
        url: url,
        dataType: 'json'
    })
    .done(function(data){
        hogehoge(category, data);
    });
}

Answer 3

categoryも追加の引数で渡すようにしましょう。

    (function(category) {
        $.ajax({
            url: url,
            dataType: 'json'
        })
        .done(
           data => hogehoge(data, category)
        );
    })(category);

function hogehoge (data, category) {
    console.log(data, category)
}

Comments

[mocchimochi]

ありがとうございます。アロー関数が使えない環境なので、やはり即時関数のなかで関数を呼び出す形になりそうですね！

Answer 4

スタティックなjsonデータに複数回データを飛ばす？
ちょっと何やりたいか不明ですが
「let category」とかでいけませんかね？

Comments

[yambejp]

ちなみに
var object={a:1,b:2,c:3}
var url="/json/data.json";
for (key in object) {
let category = object[key];
$.ajax({
url: url,
dataType: 'json',
}).done(function(data){
hogehoge(data,category);
});
}

function hogehoge (data,category) {
console.log(data, category)
}

[mocchimochi]

わかりづらくてすみません。修正しました。
やっぱり即時関数のなかで関数を呼び出す形でしょうか。