I am trying to render python dictionary values inside a Javascript Fetch API. I tried various ways to do so such as serializing values and using dictionary keys to access the dictionary values. I got no error message but the values I rendered are all "undefined" on my webpage.

Python

def portfolio_position(request):
positions = Portfolio.objects.filter(owner=request.user, off_portfolio=False).order_by('-symbol').values()
return JsonResponse([position for position in positions], safe=False)

Javascript

function load_portfolio_position() {
  fetch('/portfolio_position')
  .then(response => response.json())
  .then(positions => {
      console.log(positions);
      var table = document.getElementById("portfolio-table");
      positions.forEach(position => {
        var row = table.insertRow(1);
        row.id = `row_${position.symbol}`;
        var symbol = row.insertCell(0);
        var price = row.insertCell(1);
        var change = row.insertCell(2);
        var average_cost = row.insertCell(3);
        var position = row.insertCell(4);
        var pnl = row.insertCell(5);
        var pnl_percent = row.insertCell(6);
        symbol.innerHTML = `${position.symbol}`; 
        price.innerHTML = `${position.price}`; 
        change.innerHTML = `${position.change}`; 
        var avc = parseFloat(position.cost).toFixed(3);
        average_cost.innerHTML = `${avc}`; 
        position.innerHTML = `${position.position}`;
        pnl.innerHTML = `${position.pnl}`;
        pnl_percent.innerHTML = `${position.pnl_percent}`;
      });
  })
}

Appreciate your help!