Error when bringing values inside an object with an array inside

Asked

Viewed 31 times

0

I need to bring the object values from my Json API to the fields within a div of products that I want to create, it was all working out until I needed to put the values that are inside the objects inside the div. What happens is that it does not find the path inside the object when the function starts. I think the problem is the arrays inside the object. I think the way should be Object.NomeDoArray.Namedadddentrodoarray But it always returns error on first reading path line that appears.

Follows the code: 

window.onload = async()=>{ 

    console.log('AQUI DEVE APARECER UM OBJETO JSON')

    const criaDiv = document.createElement('div')
    criaDiv.classList.add('produto')

    const areaDiv = document.querySelector('secaoProdutos')

    try{
        const produto = await fetch('https://frontend-intern-challenge-api.iurykrieger.now.sh/products?page=1')
        const resultado = await produto.json()
        console.log(resultado)
    }
    catch{
        conole.log("Não foi possivel excutar essa ação!")
    }
    
    const imagem = resultado.products.image //O ERRO ACONTECE AQUI <----------
    const nome = resultado.products.name
    const descricao = resultado.products.description
    const oldPrice = resultado.products.oldPrice
    const count= resultado.products.installments.count
    const value = resultado.products.installments.value

    console.log(imagem)
    console.log(nome)
    console.log(descricao)
    console.log(oldPrice)
    console.log(count)
    console.log(value)


    areaDiv.innerHTML =
    `
    <img src="${resultado.products.image}">
    <br>
    <h3 >${resultado.products.name}</h3>
    <br>
    <p>${resultado.products.description}</p>
    <br>
    <p>De: ${resultado.products.oldPrice}</p>
    <br>
    <h2>Por: ${resultado.products.price}</h2>
    <br>
    <p>ou ${resultado.products.installments.count}x ${resultado.products.installments.value}</p>
    `
    }
<!DOCTYPE html>
<html lang="PT-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ProjetoPhToco</title>

    <!--Reset.CSS-->
    <link rel="stylesheet" href="style.css/reset.css">
    <!------------->
    <!--Cabeçalho-->
    <link rel="stylesheet" href="style.css/cabecalho.css">
    <!------------->
    <!--Corpo do Site-->
    <link rel="stylesheet" href="style.css/corpo.css">
    <!-------------->

</head>
<header>
    <div class="cabecalhoCorpo">

        <div class="textosCabecalho">
            <h1 class="h1Cabecalho">uma seleção de produtos</h1>
            <h2 class="h2Cabecalho">especial para você</h2>
            <h3 class="h3Cabecalho">Todos os produtos desta lista foram selecionados a partir da sua navegação.
                Aproveite!</h3>
        </div>
        <nav class="navMenu">
            <input class="botaoMenu" type="button" value="Coneça a Lix">
            <input class="botaoMenu" type="button" value="Ajude o algoritimo">
            <input class="botaoMenu" type="button" value="Seus Produtos">
            <input class="botaoMenu" type="button" value="Compartilhe">
        </nav>

    </div>
</header>

<body>

</body>

<h2 class="h2Corpo">Sua seleção especial</h2>
<div class="secaoProdutos">
    <div class="produto">
        <img class="imgProduto" src="img/cocacola.jpg" alt="imagem de uma cocacola" >
        <br>
        <h3 class="nomeProduto">Nome do produto</h3>
        <br>
        <p class="descricaoProduto">Descrição do produto um pouco maior, com duas linhas ou três que explica melhor do que se trata.</p>
        <br>
        <p class="deProduto">De: R$23,99</p>
        <br>
        <h2 class="porProduto">Por: R$19,99</h2>
        <br>
        <p class="ouProduto">ou 2x de R$9,99</p>
    </div>
        <div class="produto">
            <img class="imgProduto" src="img/cocacola.jpg" alt="imagem de uma cocacola" >
            <br>
            <h3 class="nomeProduto">Nome do produto</h3>
            <br>
            <p class="descricaoProduto">Descrição do produto um pouco maior, com duas linhas ou três que explica melhor do que se trata.</p>
            <br>
            <p class="deProduto">De: R$23,99</p>
            <br>
            <h2 class="porProduto">Por: R$19,99</h2>
            <br>
            <p class="ouProduto">ou 2x de R$9,99</p>
        </div>

        <div class="produto">
            <img class="imgProduto" src="img/cocacola.jpg" alt="imagem de uma cocacola" >
            <br>
            <h3 class="nomeProduto">Nome do produto</h3>
            <br>
            <p class="descricaoProduto">Descrição do produto um pouco maior, com duas linhas ou três que explica melhor do que se trata.</p>
            <br>
            <p class="deProduto">De: R$23,99</p>
            <br>
            <h2 class="porProduto">Por: R$19,99</h2>
            <br>
            <p class="ouProduto">ou 2x de R$9,99</p>
        </div>

        <div class="produto">
            <img class="imgProduto" src="img/cocacola.jpg" alt="imagem de uma cocacola" >
            <br>
            <h3 class="nomeProduto">Nome do produto</h3>
            <br>
            <p class="descricaoProduto">Descrição do produto um pouco maior, com duas linhas ou três que explica melhor do que se trata.</p>
            <br>
            <p class="deProduto">De: R$23,99</p>
            <br>
            <h2 class="porProduto">Por: R$19,99</h2>
            <br>
            <p class="ouProduto">ou 2x de R$9,99</p>
        </div>
    </div>

    <footer>

    </footer>

    <script src="javaScript/sync.js"></script>
    
</html>

javascript

1 answer

1


Several errors in your code...

1- const areaDiv = document.querySelector('secaoProdutos') lacks the . to indicate the class selector

2- Use const, or let within a try{} will close this variable inside that block, not allowing you to access it outside it. You must use let outside the try and then overwrite the variable.

3-your json has an array inside produtos, which means you have to iterate that array to access each product

4- to add this HTML to the DOM you have to create <div class="produto"> for each of the elements of that array and after having its HTML you have to add (appendChild) the parent element, i.e.: .secaoProdutos.

5- in yours catch you have an error in the word console...

Corrections made, I believe this is what you want:

window.onload = async() => {

  console.log('AQUI DEVE APARECER UM OBJETO JSON')

  const criaDiv = document.createElement('div')
  criaDiv.classList.add('produto')

  const areaDiv = document.querySelector('.secaoProdutos')
  let products = [];
  try {
    const produto = await fetch('https://frontend-intern-challenge-api.iurykrieger.now.sh/products?page=1')
    const resultado = await produto.json();
    products = resultado.products
  } catch {
    console.log("Não foi possivel excutar essa ação!")
  }
  
  products.forEach(produto => {
    const divProduto = document.createElement('div');
    divProduto.className = 'produto';
    divProduto.innerHTML =
      `
    <img src="http:${produto.image}">
    <br>
    <h3 >${produto.name}</h3>
    <br>
    <p>${produto.description}</p>
    <br>
    <p>De: ${produto.oldPrice}</p>
    <br>
    <h2>Por: ${produto.price}</h2>
    <br>
    <p>ou 
    ${produto.installments.count}x 
    ${produto.installments.value}
    </p>
    `;
    areaDiv.appendChild(divProduto);
  });



}
<!DOCTYPE html>
<html lang="PT-BR">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ProjetoPhToco</title>

  <!--Reset.CSS-->
  <link rel="stylesheet" href="style.css/reset.css">
  <!------------->
  <!--Cabeçalho-->
  <link rel="stylesheet" href="style.css/cabecalho.css">
  <!------------->
  <!--Corpo do Site-->
  <link rel="stylesheet" href="style.css/corpo.css">
  <!-------------->

</head>
<header>
  <div class="cabecalhoCorpo">

    <div class="textosCabecalho">
      <h1 class="h1Cabecalho">uma seleção de produtos</h1>
      <h2 class="h2Cabecalho">especial para você</h2>
      <h3 class="h3Cabecalho">Todos os produtos desta lista foram selecionados a partir da sua navegação. Aproveite!
      </h3>
    </div>
    <nav class="navMenu">
      <input class="botaoMenu" type="button" value="Coneça a Lix">
      <input class="botaoMenu" type="button" value="Ajude o algoritimo">
      <input class="botaoMenu" type="button" value="Seus Produtos">
      <input class="botaoMenu" type="button" value="Compartilhe">
    </nav>

  </div>
</header>

<body>

</body>

<h2 class="h2Corpo">Sua seleção especial</h2>
<div class="secaoProdutos">
 </div>

<footer>
</footer>

<script src="javaScript/sync.js"></script>

</html>

  • Thank you, it worked very well, really, I did not remember creating Let or forEch. Without wanting to abuse your help, but I was left with one more question. Almost all the information was pulled and inserted on the page, only the images that were not brought were broken. Can the Lord tell me the reason? Then click the path inside the object, it redirects smoothly to the image in navigating.

  • 1

    @Brunomartins data in this array is missing http(s) image url... comes only with //. I added http in the code, switch to https if applicable.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.