title: get list of items, which were passed from python file (Django) to html, from html to Javascript, which is on the same page
body: <p>my python code:</p>
  <pre><code>def index(request):
      body=list(Body.objects.all())
      loads=list(Load.objects.all().order_by('length'))
      badLoads=[]
      goodLoads=[]
      for load in loads:
          if load.length&gt;body[0].length or load.width&gt;body[0].width or load.mass&gt;body[0].mass:
              badLoads.append(load)
          else:
              goodLoads.append(load)
  
      goodLoadsLength=len(goodLoads)
      context={
          'body':body[0],
          'loads':loads,
          'badLoads':badLoads,
          'goodLoads':goodLoads,
          'goodLoadsLength':goodLoadsLength,
      }
      return render(request,'index.html',context)
  </code></pre>
  <p>html code:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
          {% if body %}
              &lt;p&gt;body length: {{ body.length }}, body width: {{ body.width }}, body height: {{ body.height }}, body max mass, which can be taken: {{ body.mass }}&lt;/p&gt;
          {% else %}
              &lt;p&gt;No parameters found&lt;/p&gt;
          {% endif %}
      &lt;/div&gt;
      &lt;div&gt;
          {% if loads %}
              &lt;ul&gt;
              {% for load in loads %}
                  &lt;li&gt;load id: {{ load.id }}, load length:{{ load.length }}, load width: {{load.width}}, load height: {{load.height}}, load mass: {{load.mass}}&lt;/li&gt;
              {% endfor %}
              &lt;/ul&gt;
          {% else %}
              &lt;p&gt;No loads are available.&lt;/p&gt;
          {% endif %}
      &lt;/div&gt;
      &lt;div&gt;
          {% if goodLoads %}
              &lt;ul&gt;
              {% for goodLoad in goodLoads %}
                  &lt;li&gt;load id: {{ goodLoad.id }}, load length:{{ goodLoad.length }}, load width: {{goodLoad.width}}, load height: {{goodLoad.height}}, load mass: {{goodLoad.mass}}&lt;/li&gt;
              {% endfor %}
              &lt;/ul&gt;
          {% else %}
              &lt;p&gt;No loads are available.&lt;/p&gt;
          {% endif %}
      &lt;/div&gt;
      &lt;div&gt;
          {% if loads %}
          &lt;ul&gt;
          {% for badLoad in badLoads %}
              &lt;li&gt;load id: {{ badLoad.id }}, load length:{{ badLoad.length }}, load width: {{badLoad.width}}, load height: {{badLoad.height}}, load mass: {{badLoad.mass}}&lt;/li&gt;
          {% endfor %}
          &lt;/ul&gt;
          {% else %}
              &lt;p&gt;No loads are available.&lt;/p&gt;
          {% endif %}
      &lt;/div&gt;
      &lt;script&gt;
          const loadsLength=&quot;{{goodLoadsLength}}&quot;;
          const goodLoads=&quot;{{goodLoads}}&quot;
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I would like to do a simple table with the help of javascript on the same page. I know I can do a table through html, but  I would like to do it through Javascript, on the same page. But somehow I can see in script simple variables, like this one:</p>
  <pre><code>const loadsLength=&quot;{{goodLoadsLength}}&quot;;
  </code></pre>
  <p>But I cannot do list of items. The number of items can be different. So it should be going through for or forEach loop, but script does not give me any chance to get the members of a list in case of python(or array in case of javascript) into javascript block. If I try:</p>
  <pre><code>const goodLoads=&quot;{{goodLoads}}&quot;;
   console.log(goodLoads);
  </code></pre>
  <p>It gives me:</p>
  <pre><code>[&amp;lt;Load: Load object (1)&amp;gt;]
  </code></pre>
  <p>Which seems like it sees the object in array. But when I try:</p>
  <pre><code> console.log(goodLoads[0].length);
  </code></pre>
  <p>or</p>
  <pre><code>foodLoads.forEach(item=&gt;{
      console.log(item.length)
  })
  </code></pre>
  <p>It gives me: the object is undefined. I tried couple of more approaches like with for loop with for object in objects, or normal for loops with the step++ way. But the object is undefined.</p>
  <p>I guess I don't understand how to get the list/array from html to script block. It should be seen as normal array of items. But I cannot get them. Can somebody pinpoint me to the answer? Thank you.</p>