title: question about django rendering , jsonresponse
body: <p>I'm working on an employee view. with this view I have 2 containers. 1 is for employe names, and the other should show the info as soon as I press a name. I'm trying to figure it out for 3 days but can't figure it out can someone please help me</p>
  <p>index view where it will render</p>
  <pre><code>def index(request):
  employe = Employe.objects.all()
  
  context = {
      'employe': employe,
  
  }
  
  return render(request, 'managements/index.html', context)
      
  </code></pre>
  <p>the jsonresponse view is here</p>
  <pre><code>def employeInfo(request):
  data = json.loads(request.body)
  employeId = data['id_s']
  action = data['action']
  print(employeId)
  print(action)
  if action == 'get':
      check = Employe.objects.get(id=employeId)
      checkinfo, create = Employe.objects.get_or_create(object, id=employeId)
      print('check:', check, 'checkinfo', checkinfo)
  
  
  
  return JsonResponse('context', safe=False)
  </code></pre>
  <p>the template is here, I tried few combinations nvm for that.</p>
  <pre><code>    &lt;div class=&quot;flex-container&quot;&gt;
       &lt;div class=&quot;flex-child magenta&quot; &gt;
       &lt;div data-method=&quot;POST&quot;   id=&quot;label1&quot;&gt; Medewerker info&lt;/div&gt;
              {% csrf_token %}
  
              {% if action %}
              &lt;ul&gt;{{name.employe_info}}&lt;/ul&gt;
              &lt;ul&gt;{{surname.checkinfo}}&lt;/ul&gt;
              &lt;ul&gt;{{checkinfo.id}}&lt;/ul&gt;
              &lt;ul&gt;{{rank.id}}&lt;/ul&gt;
              &lt;ul&gt;{{employeInfo.name}}&lt;/ul&gt;
              &lt;ul&gt;{{email.id}}&lt;/ul&gt;
              &lt;ul&gt;{{phone.id}}&lt;/ul&gt;
              &lt;ul&gt;{{name.id}}&lt;/ul&gt;
  
              {% endif %}
  </code></pre>
    
  <pre><code>&lt;tr&gt;
        &lt;div class=&quot;flex-child green&quot;&gt;
            &lt;div id=&quot;label2&quot;&gt; Medewerke&lt;/div&gt;
            {% for profile in employe %}
                  &lt;button id=&quot;hehe&quot; data-id_s={{profile.id}} data-action=&quot;get&quot; class=&quot; btn-sm btn-outline-secondary info-employe&quot;&gt;
                  &lt;a&gt;{{ profile.name}}&lt;/a&gt;&lt;/button&gt;
  
  
             {% endfor %}
        &lt;/div&gt;
  
  &lt;/tr&gt;
  </code></pre>
  
              var updateBtns = document.getElementsByClassName('info- 
         employe')
  <pre><code>   for( var i = 0; i &lt; updateBtns.length; i++) {
     updateBtns[i].addEventListener('click', function(){
     var id_s = this.dataset.id_s
     var action = this.dataset.action
     console.log('id_s:', id_s, 'action:', action)
  
    if (user === 'AnonymousUser'){
        console.log('User is not authenticated')
    }else{
       infoUser(id_s, action)
       console.log('user is authenticated')
       }
     })
    }
  
    function infoUser(id_s, action){
    var url = '/employe_info/'
  
   fetch(url, {
         method: 'POST',
         headers:{
         'Content-Type':'application/json',
         'X-CSRFToken': csrftoken,
    },
         body:JSON.stringify({'id_s': id_s, 'action': action})
    })
    .then((response)=&gt;{
       return response.json()
    })
    .then((data)=&gt;{
      console.log('data:', data)
      location.reload()
    })
    }
  </code></pre>
  <p>srry forgot the js it's here</p>
  <p>I've been trying for 3 days and no progress. thank you in advance</p>