Display js object in html

How to Display JavaScript Objects?

Displaying a JavaScript object will output [object Object].

Example

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

document.getElementById["demo"].innerHTML = person;

Try it Yourself »

Some common solutions to display JavaScript objects are:

• Displaying the Object Properties by name
• Displaying the Object Properties in a Loop
• Displaying the Object using Object.values[]
• Displaying the Object using JSON.stringify[]

Displaying Object Properties

The properties of an object can be displayed as a string:

Example

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

document.getElementById["demo"].innerHTML =
person.name + "," + person.age + "," + person.city;

Try it Yourself »

Displaying the Object in a Loop

The properties of an object can be collected in a loop:

Example

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

let txt = "";
for [let x in person] {
txt += person[x] + " ";
};

document.getElementById["demo"].innerHTML = txt;

Try it Yourself »

You must use person[x] in the loop.

person.x will not work [Because x is a variable].

Using Object.values[]

Any JavaScript object can be converted to an array using Object.values[]:

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

const myArray = Object.values[person];

myArray is now a JavaScript array, ready to be displayed:

Example

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

const myArray = Object.values[person];
document.getElementById["demo"].innerHTML = myArray;

Try it Yourself »

Object.values[] is supported in all major browsers since 2016.

Using JSON.stringify[]

Any JavaScript object can be stringified [converted to a string] with the JavaScript function JSON.stringify[]:

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

let myString = JSON.stringify[person];

myString is now a JavaScript string, ready to be displayed:

Example

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

let myString = JSON.stringify[person];
document.getElementById["demo"].innerHTML = myString;

Try it Yourself »

The result will be a string following the JSON notation:

{"name":"John","age":50,"city":"New York"}

JSON.stringify[] is included in JavaScript and supported in all major browsers.

Stringify Dates

JSON.stringify converts dates into strings:

Example

const person = {
  name: "John",
  today: new Date[]
};

let myString = JSON.stringify[person];
document.getElementById["demo"].innerHTML = myString;

Try it Yourself »

Stringify Functions

JSON.stringify will not stringify functions:

Example

const person = {
  name: "John",
  age: function [] {return 30;}
};

let myString = JSON.stringify[person];
document.getElementById["demo"].innerHTML = myString;

Try it Yourself »

This can be "fixed" if you convert the functions into strings before stringifying.

Example

const person = {
  name: "John",
  age: function [] {return 30;}
};
person.age = person.age.toString[];

let myString = JSON.stringify[person];
document.getElementById["demo"].innerHTML = myString;

Try it Yourself »

Stringify Arrays

It is also possible to stringify JavaScript arrays:

Example

const arr = ["John", "Peter", "Sally", "Jane"];

let myString = JSON.stringify[arr];
document.getElementById["demo"].innerHTML = myString;

Try it Yourself »

The result will be a string following the JSON notation:

["John","Peter","Sally","Jane"]

You can Display JavaScript object in HTML using innerHTML and getElementById, but this will show output as [object Object].

document.getElementById["demo"].innerHTML = data;

Using dot in properties of an object to display as a string.

const person = {
  name: "John",
  age: 30,
  city: "New York"
};
var name = person.name;

Simple example code.

  

  
   const person = {
    name: "John",
    age: 30,
    city: "New York"
  };

  var text = person.name + "," + person.age + "," + person.city;
  document.getElementById["demo"].innerHTML = text;

Output:

Displaying the Object in a Loop

You can use for loop to collect the properties of an object.

  

  
   const person = {
    name: "John",
    age: 30,
    city: "New York"
  };

  let txt = "";
  for [let x in person] {
    txt += person[x] + " ";
  };

  document.getElementById["demo"].innerHTML = txt;

Output: John 30 New York

Using JSON.stringify[]

If you want to show an object show as a string then use this method.

  

  
   const person = {
    name: "John",
    age: 30,
    city: "New York"
  };

  let myString = JSON.stringify[person]; 
  document.getElementById["demo"].innerHTML = myString;

Output: {“name”:”John”,”age”:30,”city”:”New York”}

Do comment if you have any doubts or suggestions on this JS object topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Degree in Computer Science and Engineer: App Developer and has multiple Programming languages experience. Enthusiasm for technology & like learning technical.

How do you show an object object in HTML?

How do you print an object object?

How do you display items in JavaScript?

How do I print an object in console?