return json 通过 fetch 函数获取的值

Question

我正在尝试使用 fetch 从 JSON 数组中输出玩家姓名，然后 return 在我调用它的地方对其进行 return，我可以将 return 插入 html个元素。

控制台完美记录了我想要的结果，但 return、return 在元素中未定义。

JSON api 示例：

{
    "PlayerID": 10000439,
    "Jersey": 8,
    "Position": "RF",
    "FirstName": "Nick",
    "LastName": "Castellanos"
}

HTML

<div id="scoreboard">
        <div class="home">TEAM1<span class="runs"></span>0</div>
        <div class="away">TEAM2<span class="runs"></span>0</div>
    </div>
    <div class="batting">
        Batting:
        <span id="batterPlayerName">
        Player Name
    </span>
    </div>
    <div class="pitching">
        Pitching:
        <span id="pitcherPlayerName">
        Player Name
    </span>
    </div>

JS

function PlayerName(id) {
     var url = `https://apiurl/Player/${id}`;
     fetch(url)
     .then(response => response.json())
     .then(data => {
         console.log(`${data.FirstName} ${data.LastName}`)
         return data.FirstName + ' ' + data.LastName;
     })
}



var curBatter = document.querySelector('#batterPlayerName');
var curPitcher = document.querySelector('#pitcherPlayerName');

curBatter.innerHTML = PlayerName('10000439');
curPitcher.innerHTML = PlayerName('10000526');

控制台：Nick Castellanos 球员姓名 div：击球：未定义

Answer 1

您必须声明 HTML 选择器到 JSON

Answer 2

您正试图在获取解析之前设置 PlayerName 的值。

如果您 return 来自您的 PlayerName 函数的承诺，那么您可以在承诺得到解决后设置 innerHtml。

function PlayerName(id) {
    var url = `https://apiurl/Player/${id}`;
    return fetch(url)
        .then(response => response.json())
        .then(data => {
            console.log(`${data.FirstName} ${data.LastName}`)
            return data.FirstName + ' ' + data.LastName;
        })
}

PlayerName('10000439').then(player => {
    var nameDiv = document.querySelector('#PlayerName')
    nameDiv.innerHTML = `Batting: ${player}`;
})

或者您可以包装整个函数以异步执行

async function PlayerName(id) {
    var url = `https://apiurl/Player/${id}`;
    return fetch(url)
        .then(response => response.json())
        .then(data => {
            console.log(`${data.FirstName} ${data.LastName}`)
            return data.FirstName + ' ' + data.LastName;
        })
}



var curBatter = document.querySelector('#batterPlayerName');
var curPitcher = document.querySelector('#pitcherPlayerName');


(async () => {
    curBatter.innerHTML = await PlayerName('10000439');
    curPitcher.innerHTML = await PlayerName('10000526');
})();

return json 通过 fetch 函数获取的值

return json value through fetch function

javascript

json

api

fetch