1

JSONP ファイルから受け取った JavaScript オブジェクトがあります。

オブジェクトには複数の「オプション」と「結果」が含まれており、ユーザーがクリックしたときにページ上の html を調整するために使用されます。

現在、json ファイルに HTML 文字列 (json 参照を介して挿入) が存在するかどうかを確認できます。私がしたいのは、その文字列を取得し、json ファイルで次の「結果」または「オプション」を見つけてから、その「オプション」または「結果」の値を返して、それを使用して html を変更できるようにすることです...

それ、どうやったら出来るの？.indexOf メソッドを使用して現在のインデックスを見つけようとしましたが、「オプション」のような特定のプロパティを見つけるのに実際には役立ちません。

これは、JSONP ファイルを反復処理し、現在の文字列が存在するかどうかを確認するために使用しているコードです。

$.ajax({
    url: "http://www.myurl.com/jsonp.php",
    type: "GET",
    dataType: "jsonp",
    jsonpCallback: "otmjsonp",
    async: false,
    success: function (JSON) {
        $(".result").on("click", function () {
            var currentResult = $(this).text(); //.result is the line of HTML the user has clicked
            for (var playerSelection in JSON) {
                if (JSON.hasOwnProperty(playerSelection)) {
                    if (JSON[playerSelection] === currentResult) {
                        alert("this selection exists in the JSON");
                    }
                }
            }
        })
    }
});

そして、これは大きな JSONP ファイルの非常に単純なバージョンです。

otmjsonp({
"situation1" : "Your opponent is trying to tackle you", "playerPrompt1" : "What will you do first?", 

"option1" : "avoid him",

    "result1" : "he tackles you",

        "situation2" : "you were tackled", "playerPrompt2" : "Your opponent begins to slow down",

        "option2" : "chase after him",
            "result2" : "you caught up",
)}

などなど

私は完全に立ち往生しているので、漠然としたアイデア/方向性でもありがたいです。

4

4 に答える 4

1

JSON を再構築してオプション/結果をそれぞれの親内にネストすると、可能なすべてのオプションを簡単に取得できます。コードを次のように変更する必要があります。

$.ajax({
url: "http://www.myurl.com/jsonp.php",
type: "GET",
dataType: "jsonp",
jsonpCallback: "otmjsonp",
async: false,
success: function (JSON) {
    $(".result").on("click", function () {
        var currentResult = $(this).text(); //.result is the line of HTML the user has clicked

     if (JSON.hasOwnProperty(playerSelection)) {
      for (var outcome in JSON[playerSelection]) {
       if (JSON[playerselection].hasOwnProperty(outcome)) {
        alert("This is the next outcome " + JSON[playerSelection][outcome]);
       }
      }
     }
   })
  }
});
于 2013-06-22T23:12:40.783 に答える
1

ここでの問題の一部は、UI とデータの初期化をどのように結合したかということです。あなたが本当にやりたいことは、クリックの処理からデータを取得する JSON 要求を分離することです。

$(function() {

  var setupHTML, 
      handleClick,
      updateHTML,
      originalData,
      resultData;

  updateHTML = function(JSON) {
    // Add or activate the html the person is clicking
    $('.result').text()
  };

  handleClick = function(e) {
    var currChoice = $(e.target).text();

    if (resultData === undefined) {
      e.stopPropagation();
      e.preventDefault();
      return;
    }

    for (var ps in resultData) {
      if (resultData.hasOwnProperty(ps) && resultData[ps] === currChoice) {
        resultData = resultData[ps];
        updateHTML(resultData);
      }
    }
  }

  $('.result').on('click', handleClick)


  $.ajax({
    url: "http://www.myurl.com/jsonp.php",
    type: "GET",
    dataType: "jsonp",
    jsonpCallback: "otmjsonp",
    async: false,
    success: function(data) {
      resultData = origData = data;

      // make the UI visible
      setupHTML(JSON);
    }
    });

});
于 2013-06-23T00:30:49.973 に答える
1

さらに先に進む前に、JSON 構造をよく考えて整理することをお勧めします。整理された論理的な JSON は、Javascript をより簡単にします。この状況では、説明と例から収集できる限り、論理的に意味があり、後の Javascript で役立つことが証明される JSON 構造は次のようになると思います。

{
  'situations': [
    {
      'description': 'Your opponent is trying to tackle you.',
      'prompt': 'What will you do?',
      'options': [
        {
          'action': 'Avoid him.',
          'result': 'He tackles you.'
        },
        { /* another option (an action plus a result) */ }
      ]
    },
    { /* another situation (a description, a prompt, and an array of options) */ }
  ]
}

これがあなたの問題に対する完全な答えではないことはわかっていますが、アプローチを再考するのに良い場所だと思います.

于 2013-06-23T00:13:14.960 に答える
0

Object.propertyまたはのようなオブジェクト プロパティにアクセスしますObject['some property']。for in次のように、ループを使用して、オブジェクトとほとんどの配列をループできます。

var property, value;
for(var i in Object){
  property = i;
  value = Object[i];
}
于 2013-06-22T23:19:53.057 に答える