Q:

Output JSON key, value in JavaScript

I have a json file with content in this format:
{
  "Florida":{
   "4079823456" : "Text message content 1 here",
   "4079323457" : "Text message content 2 here",
   "4079823458" : "Text message content 3 here"
},

"Texas":{
   "2149823456" : "Text message content 1 here",
   "2149323457" : "Text message content 2 here",
   "2149823458" : "Text message content 3 here"
}

}

I am using javascript (no libraries) to output the key/value pairs in the json file to an html table to get an output like this:
Phone Number | Text Message
4079823456   | Text message content 1 here
4079323457   | Text message content 2 here

But instead, I get something like this:
  Phone Number | Text Message
      0            {
      1            "

The following is a code snippet from my javascript:
var str = JSON.stringify(http_request.responseText);
var obj = JSON.parse(str);
var rowContent;

var tablerows = document.getElementById("tablerow");

for(var key in obj){
   rowContent = "<tr><td>" + key + "</td><td>" + obj[key] + "</td></tr>";

   tablerows.innerHTML += rowContent;
}

How can I get the key value pairs to output to the desired output instead of getting each individual character in my JSON file?  Ideally, I would like to loop through both the key and the value (in my case, the phone numbers and text messages) as there are actually hundreds of them. 
Thanks in advance. 

A:

For your data you can use two for...in loops and add to table.  Also its better to create string with table content and add it after loop is finished. 

var data = {
  "Florida": {
    "4079823456": "Text message content 1 here",
    "4079323457": "Text message content 2 here",
    "4079823458": "Text message content 3 here"
  },
  "Texas": {
    "2149823456": "Text message content 1 here",
    "2149323457": "Text message content 2 here",
    "2149823458": "Text message content 3 here"
  }
}

var table = document.querySelector('table');
var rows = '';
for (var p in data) {
  for (var k in data[p]) {
    rows += '<tr><td>' + k + '</td><td>' + data[p][k] + '</td></tr>'
  }
}
table.innerHTML = rows;
<table></table>

