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.

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.

• javascript
• json

• 1 The response text was already "stringified". Just parse the response text instead of str and your code should work. – Travis J Commented Jul 7, 2016 at 21:36

2 Answers 2

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>

You don't need to call JSON.stringify(), your response is already a JSON string.

Instead, do the following:

var obj = JSON.parse(http_request.responseText);