My html not displaying the local json file after fetching it using javascript

Question

How can i edit the following cord to display the total number of impression and conversion. when i console.log(data) i get array(100000) your assistance will be highly appreciated.

<script>
    
//pulling data from local json file
fetch('./logs.json')
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    // console.log(data);
    let data1 = "";

    data.forEach((values) => {
      data1 += ` 
            <div class="card">
            <p class="impression">${values.impression}</p>
            <p class="conversion">${values.conversion}</p>
            </div> `;
    });

    document.querySelector("#card").innerHTML = data1;

  })
  .catch((error) => {
    console.log(error);
  })
    
</script>

I showed how to do it an hour ago. If you have an issue with it, you should comment on the answer, not the question. — Barmar
– Barmar, Commented Sep 9, 2022 at 19:20

Barmar · Accepted Answer · 2022-09-09 19:18:45Z

1

Add total variables to the code, and increment them in the forEach loop.

fetch('./logs.json')
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    // console.log(data);
    let data1 = "";
    let totalImpressions = 0;
    let totalConversions = 0;
    data.forEach((values) => {
      totalImpressions += values.impression;
      totalConversions += values.conversion;
      data1 += ` 
            <div class="card">
            <p class="impression">${values.impression}</p>
            <p class="conversion">${values.conversion}</p>
            </div> `;
    });
    data1 += `<div>Total impressions = ${totalImpressions} Total conversions = ${totalConversions}</div>`;
    document.querySelector("#card").innerHTML = data1;

  })
  .catch((error) => {
    console.log(error);
  })

edited Sep 9, 2022 at 19:18

answered Sep 9, 2022 at 17:17

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rick Derick Over a year ago

I have tried running the code you suggested but still no information is being displayed on my html card yet there is no error message in my console

Barmar Over a year ago

You might need to display the totals in another div instead of #card. But the basic logic should still work.

Collectives™ on Stack Overflow

My html not displaying the local json file after fetching it using javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related