javascript - How to fix [Object, Object] - Stack Overflow

admin管理员组

文章数量:1307428

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":"[email protected]","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>

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":"[email protected]","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>

• javascript

Share Improve this question Follow edited Feb 4, 2019 at 7:40 str 45k1818 gold badges114114 silver badges134134 bronze badges asked Feb 4, 2019 at 7:37 BBBBelovedBBBBeloved 8511 gold badge11 silver badge77 bronze badges 3

• 1 Please learn the difference between JSON and Object Literal Notation. – str Commented Feb 4, 2019 at 7:40
• cols.map(function(colName) { bodyRows += '<td>' + row[colName] + '</td>'; }) this code is causing problem. since "Q1", "Q2"... are have object as values – Vasu Kuncham Commented Feb 4, 2019 at 7:44
• 1 Had you Googled '[Object, Object]' the first result would have led you to this.reddit./r/learnjavascript/ments/5zvypa/… - 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 Commented Feb 4, 2019 at 7:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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>';
});

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>';
})

本文标签： javascriptHow to fix ObjectobjectStack Overflow