title: Cannot use 'in' operator to search for 'length' in... Need to change string?
body: <p>I have been reading some of the other questions here but I can't find one that fully explains how I should fix it. I am new to JSON and don't fully understand it all. I am creating a dynamic table where people can input injuries to different body parts. I want to be able to manipulate this data using JSON. I am using an alert to check I can get each individual bodypart/injury. When I click on the usejson button I get the following error:</p>
  
  <p>Uncaught TypeError: Cannot use 'in' operator to search for 'length' in - [then json code]</p>
  
  <p>From my understanding it seems that it doesn't recognise the JSON as an object but as a string. Being new I don't fully understand that. Is anybody able to fix my code so that it alerts each bodypart?</p>
  
  <p>Thanks in advance for your help</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;!--all 4 below need for bootstrap 4 - including poppers--&gt;
  &lt;link rel="stylesheet" 
   href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;html&gt;
     &lt;body&gt;
          &lt;style&gt;
              table {
          font-family: arial, sans-serif;
          border-collapse: collapse;
          width: 100%;
      }
  
      td,
      th {
          border: 1px solid #dddddd;
          text-align: left;
          padding: 8px;
      }
  
      tr:nth-child(even) {
          background-color: #dddddd;
      }
     &lt;/style&gt;
  
  
  
      &lt;table id="injuriestable"&gt;
      &lt;tbody&gt;
          &lt;tr id="heading"&gt;
              &lt;th id="bodypart"&gt;Body Part&lt;/th&gt;
              &lt;th id="injuries"&gt;Injuries&lt;/th&gt;
              &lt;th id="edit"&gt;Edit&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  Test input: &lt;input id="injuryinput" type="text"&gt;&lt;br&gt;
  &lt;button data-bodypart="head" class="addinj"&gt;Head&lt;/button&gt;&amp;nbsp&amp;nbsp&lt;button data-bodypart="shoulder" class="addinj"&gt;shoulder&lt;/button&gt;&amp;nbsp&amp;nbsp&lt;button data-bodypart="knee" class="addinj"&gt;knee&lt;/button&gt;&amp;nbsp&amp;nbsp&lt;button data-bodypart="foot" class="addinj"&gt;foot&lt;/button&gt;&lt;br/&gt;
  &lt;button id="arraytest" &gt;Get Json Array&lt;/button&gt;
  &lt;button id="usejson" &gt;Use Json&lt;/button&gt;
  
  
  &lt;div id="jsonarray"&gt;&lt;/div&gt;
  
  &lt;script&gt;
      //adding a new row
      $(document).ready(function() {
  
          //adding a new row   
          $(".addinj").click(function() {
              var bodpart = $(this).data("bodypart");
              var datas = $("#injuryinput").val();
              //checks if row exists and if does updates/if not creates one
              if ($("#part" + bodpart).length &gt; 0) {
                  $("#injuries" + bodpart).html(datas);
              } else {
                  $('#injuriestable').append('&lt;tr id="part' + bodpart + '"&gt;&lt;td&gt;' + bodpart + '&lt;/td&gt;&lt;td id="injuries' + bodpart + '"&gt;' + datas + '&lt;/td&gt;&lt;td&gt;&lt;button data-bodparts="' + bodpart + '" class="injurybutton"&gt;' + bodpart + '&lt;/td&gt;&lt;/tr&gt;')
              }
          });
  
         //get json
          $('body').on('click', '#arraytest', function() {
              var table = document.getElementById("injuriestable");
              var tableArr = [];
              for (var i = 1; i &lt; table.rows.length; i++) {
                  tableArr.push({
                      bodypart: table.rows[i].cells[0].innerHTML,
                      injuries: table.rows[i].cells[1].innerHTML,
                  });
              }
              var jsonstring = (JSON.stringify(tableArr));
              $("#jsonarray").html(jsonstring);
          });
  
          $('body').on('click', '#usejson', function() {
              var data = $("#jsonarray").html();
  
              $.each(data, function(i, item) {
                  alert(data[i].bodypart);
              });
          });
      });
  &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>