在JavaScript對象中查找屬性

Question

我有一個JavaScript對象，我從JSONP文件收到。

該對象包含多個「選項」和「結果」，用於在用戶單擊時調整頁面上的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", 
)} 

等等，等等

甚至模糊的想法/因爲我完全被卡住的方向，將不勝感激。

Answer 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); 
    } 
    }); 

}); 

Answer 2

如果您重新構建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]); 
     } 
     } 
    } 
    }) 
    } 
}); 

Answer 3

你訪問一個對象的屬性，如：Object.property或Object['some property']。您可以使用for in循環遍歷對象，最陣列，如：

var property, value; 
for(var i in Object){ 
    property = i; 
    value = Object[i]; 
} 

Answer 4

我建議通過思考和前進更遠之前組織你的JSON結構。有組織和合理的JSON將使Javascript更容易。對於這種狀況 - 就像我可以從說明書，例如蒐集 - 我認爲一個JSON結構，將邏輯意義，並在以後的Javascript證明是有用的可能是這個樣子：

{ 
    '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) */ } 
    ] 
} 

我知道這並不是你問題的完整答案，但我認爲這將是一個開始重新思考你的方法的好地方。