I get this error when im trying to display my json data in html it says undefined. i thinks it's because it cant find my goods.varer and goods.pris and goods.billede. How can i solve it. Please help, its for an exam project.

this is my code

varer.js

document.getElementById("clickMe").addEventListener('click', async() => {
  let table = document.getElementById('varerTable');
  
  let result = await fetch("http://localhost:8200/varer/getproducts", {method: 'GET', headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
})
  .then(res => res.json())
  .catch(console.log("error"));

  let tableHtml = `<tr>
  <th>varer</th>
  <th>pris</th>
  <th>billede</th>
  </tr>
  `;
  for(const goods in result){
    tableHtml  = `
    <tr>
    <td>${goods.varer}</td>
    <td>${goods.pris}</td>
    <td><img src="${goods.billede}" style="height:50px;width:50px;"</td>
    </tr>
    `;

  }
  table.innerHTML = tableHtml;
});

varer-controller.js

router.delete("/delete:id", (req, res) => {
res.status(200).send(true);

});

router.get("/getproducts", (req, res) =>{
    res.status(200).json(products)
    console.log(products)
   })


//vis varer for en kategori
router.get("/getproductsforenkategori/:varer", (req, res)=>{
let category = req.params.varer;

if(products[category]){
  
  res.status(200).json({[category]:products[category]});
}
else{
  res.sendStatus(404)
}
});

varer.json

[{"varer":"ss","pris":"sss","billede":""},{"varer":"ss","pris":"sss","billede":""}]

varer-controller.js

router.post("/delete", (req, res) => {
    const varer = new varerModel(req.body.varer, req.body.pris, req.body.billede);
    vb.deleteGoods(varer);
    res.status(200).send(true);
  });

router.get("/getproducts", (req, res) =>{
    res.status(200).json(products)
    console.log(products)
   })

Models

class Goods {
    constructor(varer, pris, billede) {
      this.varer = varer;
      this.pris = pris;
      this.billede = billede;
    }
  }
  module.exports = Goods;

dbvarer.js

class VB {
    constructor() {
      this.salg = this.openFile(VARER_FILE);
    }
    /* CORE */
    // Save file
    saveFile(fileName, contentString) {
      fs.writeFileSync(ABSOLUTE_PATH   fileName, contentString);
    }
  
    // Open file
    //ændrer filename til userfile
    openFile(fileName) {
      const file = fs.readFileSync(ABSOLUTE_PATH   fileName);
      return JSON.parse(file);
    }
  
    /* LOGIN DB */
    saveGoods(varer) {
      this.salg.push(varer);
      this.saveFile(VARER_FILE, JSON.stringify(this.salg));
    }
    deleteGoods(varerne) {
        this.salg = this.salg.filter((x) => x.varer != varerne.varer);
        this.saveFile(VARER_FILE, JSON.stringify(this.salg));
      }
    
     
}
 

CodePudding user response：

Looks like you are mixing async await and .then .catch, I suggest you use only async await is more readable.

document.getElementById("clickMe").addEventListener('click', async () => {
  try {
    const table = document.getElementById('varerTable');
    const result = await fetch("http://localhost:8200/varer/getproducts", {
      method: 'GET', 
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
    })
    const json = await result.json()
    let tableHtml = `<tr>
    <th>varer</th>
    <th>pris</th>
    <th>billede</th>
    </tr>
    `;
    for (const goods of json){
      tableHtml  = `
      <tr>
      <td>${goods.varer}</td>
      <td>${goods.pris}</td>
      <td><img src="${goods.billede}" style="height:50px;width:50px;"</td>
      </tr>
      `;
    }
    table.innerHTML = tableHtml;

  } catch(err) {
    console.log('Oh no