Consumir objeto em javaScript

Front-end
#1

Bom dia pessoal, estou com dificuldade de consumir um objeto que criei no html.

criei este objeto:

const listaGame = {
    games: [
        {
            nome: "dark souls",
            img: "https://sm.ign.com/t/ign_br/news/g/gamescom-2/gamescom-2015-prepare-for-dark-souls-3-with-this-g_9qgr.1280.jpg",
            anoLancamento: "2009",
            tipo: "RPG",
            nota: "9"
        },
           
        {
            nome: "CS",
            img: "https://images.uncyc.org/pt/thumb/a/a0/Csgraphicnovel.jpg/300px-Csgraphicnovel.jpg",
            anoLancamento: "2012",
            tipo: "acão",
            nota: "9"
        },
    
        {
            nome: "battlefield 5",
            img: "https://thumbs.gfycat.com/FittingFarCommongonolek-size_restricted.gif",
            anoLancamento: "2018",
            tipo: "cão",
            nota: "9"
        },
          
        {
            nome: "call of duty",
            img: "https://dropsdejogos.uai.com.br/wp-content/uploads/sites/10/2019/11/call-of-duty-mobile-950x606.jpg",
            anoLancamento: "2003",
            tipo: "acão",
            nota: "7"
        },
    
        {
            nome: "Assassin's Creed",
            img: "https://s2.glbimg.com/x5dqQybuuq4-kwc-wNuHTeH-r64=/695x0/s.glbimg.com/po/tt2/f/original/2016/11/30/assassins-creed-3-gratis-uplay-ubisoft-30-anos.jpg",
            anoLancamento: "20012",
            tipo: "acão e aventura",
            nota: "7"
        },
    
        {
            nome: "call of duty",
            img: "https://cdn.awsli.com.br/239/239279/produto/7052446/painel-para-decoracao-de-festa-infantil-watch-dogs-bc2d73dd.jpg",
            anoLancamento: "20014",
            tipo: "ação e aventura",
            nota: "8"
        },
    ]

queria consumir ele neste html card:

<div className="row row-cols-1 row-cols-md-3">
                <div className="col mb-4">
                    <div className="card h-100">
                        <img src=" "className="card-img-top" alt="..." />
                        <div className="card-body">
                            <h5 className="card-title">
                            </h5>
                            <p className="card-text">.</p>
                        </div>
                    </div>
                </div>

quem puder me ajudar eu agradeço.

#2

Está usando alguma biblioteca (ex: jQuery) ou javascript puro? Pois, para criar elementos, isso pode variar.

Em javascript puro, você pode fazer algo como:

const divParent = document.getElementById("conteudo"); // divParent precisa ser a div que vai conter o texto  do jogo
var total = listaGame.games.length;

function exibirJogo(parent, game){
  var texto = document.createTextNode(game.nome + ' : ' + game.anoLancamento);
  var elemento = document.createElement("div");
  
  elemento.appendChild(texto);
  parent.appendChild(elemento);
}

for(let i = 0; i < total; i++){
  exibirJogo(divParent, listaGame.games[i]);
}

Veja um exemplo em: https://jsfiddle.net/wk0tfy39/

Abraço.

#3

boa tarde, estou utilizando o jQuery, no caso esse exemplo que você fez, ele ira criar elementos de texto nos cards?

#4

O exemplo é de como criar elementos div simples dentro de outra div com javascript puro. Usando jQuery, o código muda, mas a ideia é a mesma. Para criar elementos com estilos específicos, basta
criar as strings necessárias. Seria algo como:

const bodyDoConteudo =$("#conteudo > .card-body"); // aqui, bodyDoConteudo é um card onde você vai inserir outros cards

function exibirJogo(game){
  var novo_card = 
  '<div class="card">' +
  '<div class="card-body">' +
  '<span class="">' + game.nome + '</span>' +
  '<span class="">' + game.anoLancamento+ '</span>' +
  '</div>' +
  '</div>';

  bodyDoConteudo.append(novo_card);
}

Abraço.

#5

Assim não funcionou, ai fiz assim:
function addCard(item){

let divAll = document.querySelector('.cards');

    divAll.appendChild(montaDivCard(item));

}

function montaDivCard(item){

let divcard = document.createElement(‘div’);

divcard.appendChild(recebeImagem(item.tela,‘card-img-top’));

divcard.classList.add(‘card’);

divcard.appendChild(montaDivInterna(item));

return divcard;

}

function recebeImagem(item, classe){

console.log(item);

let imagem = document.createElement('img');  

imagem.src = item;

imagem.classList.add(classe);

return imagem;

}

function montaDivInterna(item){

let divInt = document.createElement('div')

divInt.classList.add('card-body')



divInt.appendChild(montaP("Titulo: "+item.nome,'card-nome'));

divInt.appendChild(montaP("Ano de Lançamento: "+item.anoLancamento, 'card-anoLancamento'));

divInt.appendChild(montaP("Gênero: "+item.tipo, 'card-tipo'));

divInt.appendChild(montaP("Nota: "+item.nota, 'card-nota'));

return divInt;

}

function montaP(item,classe){

var p = document.createElement('p')

p.textContent = item;

p.classList.add(classe)

return p

}