Вернуть значение json через функцию выборки

Я пытаюсь вывести имя игрока из массива JSON, используя выборку, и просто возвращаю его туда, где я его вызываю, я могу вставить возврат в элементы html.

Консоль регистрирует результаты, которые я хочу, отлично, но возврат возвращает undefined в элементе.

Пример API JSON:

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

консоль: Ник Кастельянос PlayerName div: Ватин: не определено

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
0
38
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы должны объявить селектор HTML принадлежащему JSON

Я не понимаю

Tony Wierdman 10.04.2022 06:03

Ваш ответ может быть улучшен с помощью дополнительной вспомогательной информации. Пожалуйста, редактировать добавьте дополнительную информацию, например цитаты или документацию, чтобы другие могли подтвердить правильность вашего ответа. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.

Community 10.04.2022 06:33
Ответ принят как подходящий

Вы пытаетесь установить значение PlayerName до разрешения выборки.

Если вы вернете обещание из своей функции 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');
})();

Другие вопросы по теме