How to fix [Object, Object]

Question

Hi I'm newbie about json and javascript.
I found the way to use json data to be table in this site.
My Curious why i getting [Object,Object] when i try to use json data to be a table
in my json has a multidimensional and it's not always look like this. And maybe It's look very simple maybe it's look more and more multidimensional.

function json2table(json, classes) {
          var cols = Object.keys(json[0]);

          var headerRow = '';
          var bodyRows = '';

          classes = classes || '';

          function capitalizeFirstLetter(string) {
            return string.charAt(0).toUpperCase() + string.slice(1);
          }

          cols.map(function(col) {
            headerRow += '<th>' + capitalizeFirstLetter(col) + '</th>';
          });

          json.map(function(row) {
            bodyRows += '<tr>';

            cols.map(function(colName) {
              bodyRows += '<td>' + row[colName] + '</td>';
            })

            bodyRows += '</tr>';
          });

          return '<table class="' +
                 classes +
                 '"><thead><tr>' +
                 headerRow +
                 '</tr></thead><tbody>' +
                 bodyRows +
                 '</tbody></table>';
        }




var defaultData = [
  {
    "scan01": "asd",
    "scan02": "female",
    "scan04": 2,
    "scan03": "asd",
    "Q1": {
      "Q1_Quality": "Neutral",
      "Q2_Quality": "Somewhat Agree",
      "Q3_Quality": "Neutral",
      "Q4_Quality": "Neutral"
    },
    "Q2": {
      "Row 1": "item2",
      "Row 2": "item3",
      "Row 4": "item2",
      "Row 5": "item3",
      "Row 7": "item2",
      "Row 8": "item3"
    },
    "Q3": {
      "Row 1": "item3",
      "Row 2": "item4"
    },
    "Q4": "yyyyyyyyyy"
  },
  {
    "scan01": "sad",
    "Q1": {
      "Q1_Quality": "Neutral",
      "Q2_Quality": "Neutral",
      "Q3_Quality": "Somewhat Disagree",
      "Q4_Quality": "Somewhat Disagree"
    },
    "Q2": {
      "Row 1": "item2",
      "Row 2": "item2",
      "Row 4": "item2",
      "Row 5": "item2"
    },
    "Q3": {
      "Row 2": "item3"
    },
    "scan02": null,
    "scan03": null,
    "scan04": null,
    "Q4": null
  }
];

        document.getElementById('tableGoesHere').innerHTML = json2table(defaultData, 'table');

but if my json just simeple like this

var defaultData = [{"Q1":"Male","Q5":"Thailand","Q2":"P1","Q3":11,"Q4":"P1@hotmail.com","Q6":"P1","Q7":"p1"},]

It's return a great table.
and this is my table look like

<div class="table table-responsive">
    <div id="tableGoesHere" class="table-bordered col-md-12">

    </div>   
</div>

Please learn [the difference between JSON and Object Literal Notation](https://stackoverflow.com/questions/2904131/what-is-the-difference-between-json-and-object-literal-notation). — str, Feb 04 '19 at 07:40
`cols.map(function(colName) { bodyRows += '' + row[colName] + ''; })` this code is causing problem. since `"Q1", "Q2"...` are have object as values — Vasu Kuncham, Feb 04 '19 at 07:44
Had you Googled '[Object, Object]' the first result would have led you to this.https://www.reddit.com/r/learnjavascript/comments/5zvypa/what_does_object_object_mean/ - there is a quote within... "[object Object] is simply the default return value when converting an object to a string. You can see the the content of your object when converting to string by using JSON.stringify()." — JGFMK, Feb 04 '19 at 07:50

Maheer Ali · Accepted Answer · 2019-02-04T07:57:33.260

4

When an Object is tried to convert to String it return [Object Object]. You should use JSON.stringify() for this. Change the following part of your code

json.map(function(row) {
     bodyRows += '<tr>';
     cols.map(function(colName) {
          //this line is edited
          bodyRows += '<td>' + JSON.stringify(row[colName]) + '</td>';
     })

     bodyRows += '</tr>';
});

edited Feb 04 '19 at 07:57

answered Feb 04 '19 at 07:48

Maheer Ali

35,834
5
42
73

score 0 · Answer 2 · answered Feb 04 '19 at 07:54

You should use JSON.stringify() because if row[colName] is and object and you try this object convert to the string using concatentation string + object = string but every object is implicitly convert to the string object.toString() == [object Object]. Just use:

cols.map(function(colName) {
  bodyRows += '<td>' + JSON.stringify(row[colName]) + '</td>';
})

How to fix [Object, Object]

2 Answers2