Hearthstone APIからJSONデータを引き出す

Question

ランダムなHearthstoneカードジェネレータを作成しようとしていますが、JSONデータをAPIから取得してJSオブジェクトに変換する際に問題があり、HTMLにテキストを入力できます。リクエストメーカーでリクエストをテストしたので、APIリクエストはうまく動作しますが、明らかに欠点がいくつかあります。 JSONデータをJSオブジェクトに変換するためのさまざまな構文を試しましたが、うまく機能しません。私は成功キー/値のペアに入れたコールバック関数に何か問題があると考えています。それにもかかわらず、私は解決策のためにかなり見てきましたが、私はいくつかの事柄を変更しましたが、機能しません。どんな助けもありがとう！

私は、次のボタンをクリックすると、データを取得して、画面上の指定された要素に入力するときに何が起こりたいのですか。私が取得しようとしているデータは、唯一のパラメータImを使用しているすべてのカードが回収可能なカードなので、矢印をクリックするたびにランダムなカードを引っ張りたい。

また、API自体へのリンク：https://market.mashape.com/omgvamp/hearthstoneです。

var cardImage = '', cardName = '', cardType = '', cardFaction = '', 
cardRarity = '', playerClass = '', artistName = ''; 
function cardInfo() { 

    $.ajax({ 
     type: "POST", 
     url: "https://omgvamp-hearthstone-v1.p.mashape.com/cards? collectible=1", 
     headers: { 
      "x-mashape-key": "mXtnPm3ltOmshc9dQJjtVdKzfnhbp14UZncjsnfzwvp6uLiMwH", 
      Accept: "application/json", 
      "Content-Type": "application/x-www-form-urlencoded" 
     }, 
     success: function (response) { 
      var obj = jQuery.parseJSON(response); 
      cardImage = obj.image; 
      cardName = obj.name; 
      cardType = obj.type; 
      cardFaction = obj.faction; 
      cardRarity = obj.rarity; 
      playerClass = obj.playerClass; 
      artistName = obj.artist; 

      $("#card-image").attr(src, obj.image); 
      $("#card-name").html(obj.name); 
      $("#card-type").text(obj.type); 
      $("#card-faction").text(obj.faction); 
      $("#card-rarity").text(obj.rarity); 
      $("#player-class").text(obj.playerClass); 
      $("#artist-name").text(obj.artist); 
     }, 
     dataType: "json" 
    }) 
} 

$(document).ready(function() { 
    $('#nextCard').click(cardInfo()) 
}); 

$(document).ready(function() { 
    $('#nextCard').click(cardInfo()) 
}); 

Answer 1

あなたはかなり多かったのですが、要求を少し微調整するだけで、ドキュメントがその特定のエンドポイントに対してGETリクエストを指定しました。あなたのリクエストは、HTTPステータスコード400の{"error":400,"message":"Token mismatch exception."}で応答していました。

また、カードはセット（classic/naxx/etc）で返されるので、ランダムなカードを簡単に選択できるようにオブジェクトを少し平らにしました。また、mashapeのドキュメントhttp://docs.mashape.com/javascriptをよりよく反映するようにリクエストを調整しました。

画像を設定しようとするときにも、「SRC」の前後に引用符を逃しsrc属性とobj.image最後に、私はいくつかの余分な変数を削除未定義で、obj.img

されている必要があります。

リクエストを実行するには、次のボタンをクリックします（1つは最初にトリガーされません）。また、私の応答が少し遅かったので、数秒間お待ちください。

var cards; 
 
var dataPromise; 
 

 
function getCardData() { 
 
    if(!dataPromise){ 
 
    dataPromise = $.ajax({ // Store jQuery promise so that we can return it for subsequent calls ensuring only one AJAX request is made 
 
     url: 'https://omgvamp-hearthstone-v1.p.mashape.com/cards?collectible=1', 
 
     type: 'GET', 
 
     dataType: 'json', 
 
     beforeSend: function(xhr) { 
 
     xhr.setRequestHeader("X-Mashape-Authorization", "mXtnPm3ltOmshc9dQJjtVdKzfnhbp14UZncjsnfzwvp6uLiMwH"); 
 
     } 
 
    }); 
 
    } 
 
    return dataPromise; 
 
} 
 

 
function showCardRandom(){ 
 
    var cardNo = Math.floor(Math.random() * cards.length); // Select a random card number 
 
    showCard(cardNo) 
 
} 
 

 
function showCard(cardNo){ 
 
    var obj = cards[cardNo]; 
 
    $("#card-image").attr('src', obj.img); 
 
    $("#card-name").html(obj.name); 
 
    $("#card-type").text(obj.type); 
 
    $("#card-faction").text(obj.faction); 
 
    $("#card-rarity").text(obj.rarity); 
 
    $("#player-class").text(obj.playerClass); 
 
    $("#artist-name").text(obj.artist); 
 
} 
 

 
function flattenCards(data){ 
 
    // Flatten the object as cards are stored in sets 
 
    var result = []; 
 
    for (var set in data) { 
 
     for (var i = 0; i < data[set].length; i++) { 
 
     result.push(data[set][i]); 
 
     } 
 
    } 
 
    return result; 
 
} 
 

 
getCardData(); // Start loading card data ASAP - subsequent calls will return the same promise anyway 
 

 
$(document).ready(function() { 
 
    getCardData() 
 
    .done(function(data){ 
 
     $("#nextCard").text("Next"); 
 
     cards = flattenCards(data); 
 
     showCardRandom(); 
 
    }); 
 
    $('#nextCard').click(showCardRandom); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<img id="card-image"> 
 
<div id="card-name"></div> 
 
<div id="card-type"></div> 
 
<div id="card-faction"></div> 
 
<div id="card-rarity"></div> 
 
<div id="player-class"></div> 
 
<div id="artist-name"></div> 
 
<button id="nextCard">Loading Data...</button>

Answer 2

応答がjsonタイプの場合は、このようにしてください。

var cardImage = JObject.Parse(response.Result).GetValue("image"); 

私はこれがあなたを助け願っています。