Как декодировать многомерный JSON из внешнего URL в JS?

Question

Я использую этот API:

http://api.steampowered.com/ISteamApps/GetAppList/v0002/?format=json

Я хочу найти в этом API имя по его идентификатору.

В PHP это будет выглядеть так:

$id = 730; // input ID

$url = 'http://api.steampowered.com/ISteamApps/GetAppList/v0002/?format=json';

$content = file_get_contents($url) ;
$data = json_decode($content, true);

$key = array_search($id, array_column($data['applist']['apps'], 'appid'));

echo $data['applist']['apps'][$key]['name'] // returns Counter-Strike: Global Offensive

Возможно ли воспроизвести этот процесс в JS? Или мне лучше создать второй PHP файл и получить доступ это с AJAX?

Answer 1

Конечно, вы можете увидеть ответ на этот вопрос: Получить JavaScript объект из массива объектов по значению свойства

Но я думаю, у вас возникнут проблемы с несколькими источниками если вы делаете это в браузере:

Access to XMLHttpRequest at 'http://api.steampowered.com/ISteamApps/GetAppList/v0002/?format=json' 
has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

Этот Steam API блокирует доступ из js в браузере.

Answer 2

Пьер прав, что вы не можете сделать это из браузера из-за проблем с несколькими источниками. Чтобы получить данные, вам придется проксировать запрос через прокси.

Вы можете использовать PHP, чтобы получить данные из Steam, а затем получить доступ к ним на стороне клиента. Со структурой данных из steam вы можете получить элемент с вашим идентификатором, используя метод find для массива .

const data = {
  applist: {
    apps: [
      { appid: 1},
      { appid: 730, name: 'Needle' }
    ],
  }
};

const id = 730;

const row = data.applist.apps.find(item => item.appid === id);

console.log(row); // { appid: 730, name: 'Needle' }