Question

我正在尝试创建一个随机的Hearthstone卡生成器，我无法从API中提取JSON数据并将其转换为JS对象，因此我可以将文本输入到我的HTML中。我已经在请求制定者上测试了请求，因此API请求工作正常，但显然我还缺少一些其他问题。我已经尝试了将JSON数据转换为JS对象的各种语法，但它只是不起作用。我想可能我在成功键/值对中放置的回调函数有问题。尽管如此，我已经看了很多解决方案而且我已经改变了一些东西，但它没有用。任何帮助将不胜感激！

所以我想要发生的是当点击下一个按钮时，它将检索数据并将其输入到屏幕上的指定元素中。我试图抓取的数据是所有卡片，我使用的唯一参数是可收集的，所以我想在每次点击箭头时拉一张随机卡片。

此外，这是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请求。您的请求正在使用{"error":400,"message":"Token mismatch exception."}回复，其中包含400个HTTP状态代码。

卡片也会在它们的套装中返回（经典/ naxx /等），所以我稍微将对象展平，以便更容易选择随机卡片。我还调整了请求以更好地反映mashape文档http://docs.mashape.com/javascript。

在尝试设置图片src属性并obj.image未定义且应该是obj.img

时，您还错过了'src'周围的引号

最后我删除了一些多余的变量。

单击下一个按钮来执行请求（一个不是最初触发的）也对我做出响应有点慢，所以给它几秒钟。

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");

我希望这会对你有所帮助。

Answer 3

尝试使用wget。 W10批次可以帮助您：

wget --no-check-certificat --header "X-Mashape-Key: Xif91aru03mshCEYjRubsWyyaI8gp1AV79RjsntjSNoNcgcyZj" "https://omgvamp-hearthstone-v1.p.mashape.com/cards" --output-document=cards%datetime%.js

顺便说一句：mashape看起来像是封闭的，请使用https://rapidapi.com/omgvamp/api/hearthstone代替它。使用此脚本，您可以将完整的卡片清单保存到cards [date] .js文件中。您必须将自己的密钥写入脚本！

var unirest   = require("unirest");
var fs        = require('fs');
var strftime  = require('strftime');

const fil="cards" + strftime('%y.%m.%d');

var req = unirest("GET", "https://omgvamp-hearthstone-v1.p.rapidapi.com/cards");

req.query({
    "region": "us",
    "locale": "enUS"
});

req.headers({
    "x-rapidapi-host": "omgvamp-hearthstone-v1.p.rapidapi.com",
    "x-rapidapi-key": "your registered keystring",
    "useQueryString": true
});


req.end(function (res) {
    if (res.error) throw new Error(res.error);
    else {
        //console.log(res.body);
        fs.writeFileSync(
        './' + fil + '.js', 
        JSON.stringify( res.body, 0, 1), 
     function(err) {
        if(err) {
            return console.log(file, err);
        }           
    });
    }
});

从Hearthstone API中提取JSON数据

3 个答案: