Невозможно получить информацию из массива - PullRequest
Новая
       21

Невозможно получить информацию из массива

0 голосов
/ 21 ноября 2019 

```
function displayResults(responseJson) {
const gamedata = responseJson.results.map(game => {
	return {
		name: game.name,
		consoles: game.platforms,
		metacritc: game.metacritic,
		genre: game.genres
	};
});
console.log(gamedata);
inputData(gamedata);
}

function platformdata(consoles) {
return consoles.map(system => {
	return system.platform.name;
});
}

function inputData(gamedata) {
gamedata.map(input => {
	$(`#home-list`).html(`
	<h1>${input.name}</h1>
	<h5>${input.metacritc}</h5>
	<span>${input.system}</span>
	`);
});
}
```

Я пытался получить информацию из массива, но не смог получить информацию. Информация для игровых платформ несколько вложена, и я пытался ее выкопать, но безрезультатно.

https://api.rawg.io/api/games?page_size=1

Лучший способ показать информацию более подробно - просто посоветовать кинуть ссылку выше в почтальона, и вы увидите, что я пытаюсь работатьс. В основном это под результатами> платформы> платформа> имя. Когда я добавляю эту информацию в функцию карты, она появляется неопределенно. Запустив его сейчас, они придумали сказать объект запятыми. Я хотел бы, чтобы он просто выдумывал информацию, оставляя запятые. Я не могу понять, как заставить join () перейти в html (). Большое спасибо!

Редактировать: 1) Результаты, которые я хотел бы получить, - это возможность поднять их внутри дерева платформ, но они похоронены. Если я просто использую game.platforms, он производит [объект, объект]. Если я попытаюсь добавить больше строки в gamedata, то получится неопределенное значение.

2) В "gamedata.map (input => {"?

3) Да, я попытался сделать помощникафункция основана на коде, который я нашел в Интернете. Код, который я нашел в Интернете, использовал чрезмерный li и ul 

```
function platformnames(platforms) {
return platforms.map(system => {
	return '<li>'  system.platform.name + '</li>';
});
}

function pullArray(gamedata) {
gamedata.map(function(input) {
	let platformNames = input.platforms.map(
		system => `<li>${system.platform.name}</li>`
	);
	$(`#home-container`)
		.append(`<li><ul><li>${platformNames}</li></ul></li>`)
		.join(' ');
});
}
```

Это сработало, но дало действительно странные результаты.

4) Нет, я добавляю все это к тому же идентификатору, что и одно нажатие.

5) Это я пытаюсь добывать информацию с платформ по API. Он похоронен там, и я не нашел хорошего решения. 

function formatParams(params) {
    const queryItems = Object.keys(params).map(
        key => `${key}=${params[key]}`
    );
    console.log(queryItems);
    return queryItems.join('&');
}

const opts = {
    headers: {
        'User-Agent': `<ClassProject> / <VER 0.01> <Currently in Alpha testing>`
    }
};

function fetchAPI() {
    const params = {
        ...($('.search-param').val() && {
            search: $('.search-param').val()
        }),
        ...($('.genre-param').val() && {
            genres: $('.genre-param').val()
        }),
        ...($('.platforms-param').val() && {
            platforms: $('.platforms-param').val()
        }),
        ...($('.publishers-param').val() && {
            publishers: $('.publishers-param').val()
        }),
        page_size: '1'
    };

    console.log(params);

    const baseURL = 'https://api.rawg.io/api/games';
    const queryString = formatParams(params);
    let url = `${baseURL}?${queryString}`;

    console.log(url);

    fetch(`${url}`, opts)
        .then(response => response.json())
        .then(responseJson => displayResults(responseJson))
        .catch(error => {
            console.log(`Something went wrong: ${error.message}`);
        });
}

function displayResults(responseJson) {
    const gamedata = responseJson.results.map(game => {
        return {
            name: game.name,
            consoles: game.platforms,
            metacritc: game.metacritic,
            genre: game.genres
        };
    });
    console.log(gamedata);
    inputData(gamedata);
}

function inputData(gamedata) {
    let html = '';
    gamedata.forEach(input => {
        html += `<h1>${input.name}</h1>`;
        html += `<h5>Metacritic: ${input.metacritic ||
            'No metacritic rating'}</h5>`;
        html += 'Platforms:<br />';
        input.consoles.forEach(e => {
            html += `<span>${e.platform.name}</span><br />`;
        });
        html += `<br /><span>System: ${input.system}</span>`;
    });
    document.getElementById('home-list').innerHTML = html;
}

function pageLoad() {
    $(document).ready(function() {
        fetchAPI();
    });
}

pageLoad();

Так что я близок, благодаря помощи всех здесь. Теперь я возвращаю «Метакритик: метакритический рейтинг отсутствует», или если я удалю его или оставлю неопределенным. Чего мне не хватает?

1 Ответ

1 голос
/ 21 ноября 2019

Ниже приведен фрагмент названия платформы. Я изменил / создал

  • функцию displayResults(), чтобы вернуть только значение (а также исправил опечатку в metacritic (metacritc -> metacritic))

  • функция inputData() для создания правильного HTML и добавления его в контейнер

  • a fetchData() функция для фактического извлечения данных

  • безымянная функция для запуска извлечения и отображения данных

Вы должны посмотреть на свои данные - вы не используете game.genres (хотя вы отображаетеэто), и вы хотели бы отобразить input.system, который не отображается. 

function displayResults(responseJson) {
  return responseJson.results.map(game => {
    return {
      name: game.name,
      consoles: game.platforms,
      metacritic: game.metacritic,
      genre: game.genres
    };
  });
}

function platformdata(consoles) {
  return consoles.map(system => {
    return system.platform.name;
  });
}

function inputData(gamedata) {
  let html = ''
  gamedata.forEach(input => {
    html += `<h1>${input.name}</h1>`
    html += `<h5>Metacritic: ${input.metacritic || 'No metacritic rating'}</h5>`
    html += 'Platforms:<br />'
    input.consoles.forEach(e => {
      html += `<span>${e.platform.name}</span><br />`
    })
    html += `<br /><span>System: ${input.system}</span>`
  });
  document.getElementById('home-list').innerHTML = html

}

async function fetchData() {
  const data = await fetch('https://api.rawg.io/api/games?page_size=5')
  const json = await data.json()
  return json
}

(async function() {
  const json = await fetchData()
  inputData(displayResults(json))
})();
<div id="home-list"></div>

И хотя это работает - вы не должны использовать более одного тега h1 на сайте - это будет предупреждение проверки HTML (SEO!). Если вы будете отображать только одну игру на странице, то забудьте мое замечание:)

...