Как отобразить значения словаря python в Javascript Fetch API (forEach)?

Я пытаюсь отобразить значения словаря python внутри Javascript Fetch API. Я пробовал различные способы сделать это, такие как сериализация значений и использование ключей словаря для доступа к значениям словаря. Я не получил сообщения об ошибке, но все значения, которые я отобразил, "неопределены" на моей веб-странице.

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}`;
      });
  })
}

This is the dictionary with values from console log