How to document.write javascript object

Question

here is my javascript object

var students = [
    {
        name: "Pavel Ravel",
        track: "CSS, HTML5, jQUery",
        achievements: "145",
        points: "353"
    },
    {
        name: "Steve Jobs",
        track: "MacOS, iOS",
        achievements: "3958735",
        points: "09854"
    },
    {
        name: "Bill Gates",
        track: "Windows",
        achievements: "358798",
        points: "37593"
    },
    {
        name: "Gabe Newel",
        track: "Steam",
        achievements: "5302",
        points: "3052"
    },
    {
        name: "Steve Wozniak",
        track: "Apple 1 and 2",
        achievements: "23562",
        points: "3525632"
    }
];

What I should do for document.write variable students? I have created for in loop but it writes only undefined.

for ( var studentsList in students ) {
    document.write(studentsList[students]);
}

The goal is to write to document this

name: "Pavel Ravel", track: "CSS, HTML5, jQUery", achievements: "145", points: "353"

and so on

You should never be using document.write() with plain text (if you use it at all, which generally you should not). It's meant for use with HTML; if you have other forms of text you need to HTML encode them first or you're asking for (possibly-security-compromising) bugs. Consider something like document.body.textContent += "your text" instead. — user1114
– user1114, Commented Jan 4, 2017 at 20:31

Scott Marcus · Accepted Answer · 2017-01-04 21:12:31Z

Don't use for/in loops with arrays as they use strings as the enumerator and will enumerate all properties of the array (beyond just the indexed elements). Use a traditional counting for loop or forEach().

Also, unless you are dynamically building new page content into a new window, don't use document.write() as it requires the page to be built sequentially. Use console.log() for testing and DOM injection otherwise.

Solution 1 (gets the exact output you said you wanted - see comments inline for details):

var students = [
    {
        name: "Pavel Ravel",
        track: "CSS, HTML5, jQUery",
        achievements: "145",
        points: "353"
    },
    {
        name: "Steve Jobs",
        track: "MacOS, iOS",
        achievements: "3958735",
        points: "09854"
    },
    {
        name: "Bill Gates",
        track: "Windows",
        achievements: "358798",
        points: "37593"
    },
    {
        name: "Gabe Newel",
        track: "Steam",
        achievements: "5302",
        points: "3052"
    },
    {
        name: "Steve Wozniak",
        track: "Apple 1 and 2",
        achievements: "23562",
        points: "3525632"
    }
];

var output = []; // Used to hold extracted data

// Loop through the array of objects
for ( var i = 0; i < students.length; ++i ) {
  
  // Loop over the current object use for/in for this
  for(var student in students[i]){
    // In this loop, student will be the property names we enumerate over
    
    // To get the property name, just use the enumerator (student)
    // To get the value of the property, pass that property name to the object
    // which, in this case, is the array element we are already looping over.   
    // Note: This string is put together exactly as your question asked:
    output.push(student + ":" + '"' + students[i][student] + '"');
  }
 
}

// To join all the new array values with a comma
console.log(output.join(","));

Solution 2 (shows how to extract the object property names and the values so you can do whatever you want with them using Array.forEach() - see comments inline for details):

var students = [
    {
        name: "Pavel Ravel",
        track: "CSS, HTML5, jQUery",
        achievements: "145",
        points: "353"
    },
    {
        name: "Steve Jobs",
        track: "MacOS, iOS",
        achievements: "3958735",
        points: "09854"
    },
    {
        name: "Bill Gates",
        track: "Windows",
        achievements: "358798",
        points: "37593"
    },
    {
        name: "Gabe Newel",
        track: "Steam",
        achievements: "5302",
        points: "3052"
    },
    {
        name: "Steve Wozniak",
        track: "Apple 1 and 2",
        achievements: "23562",
        points: "3525632"
    }
];

// Loop through the array of objects executing the supplied 
// function for each one encountered (the "student" argument
// of the supplied function will refer to each element in the 
// array that is enumerated - individual student objects in
// this case, hence the name "student")
students.forEach(function(student) {
  
  // Loop over the current object. Use for/in or Object.keys() for this
  for(var prop in student){
    // In this loop, student will be the property names we enumerate over
    
    // To get the property name, just use the enumerator (prop)
    // To get the value of the property, pass that property name to the object
    // which, in this case, is the array element we are already looping over.
    console.log(prop + ":" + '"' + student[prop] + '"'); 
  }
 
});

I'm not sure why people are down voting correct answers...it is annoying though.
Still down voting the correct answer. Check your egos people.

Nina Scholz · Accepted Answer · 2017-01-04 22:11:35Z

You could use a <div> for the output and append the text and the line break tag <br>.

var students = [{ name: "Pavel Ravel", track: "CSS, HTML5, jQUery", achievements: "145", points: "353" }, { name: "Steve Jobs", track: "MacOS, iOS", achievements: "3958735", points: "09854" }, { name: "Bill Gates", track: "Windows", achievements: "358798", points: "37593" }, { name: "Gabe Newel", track: "Steam", achievements: "5302", points: "3052" }, { name: "Steve Wozniak", track: "Apple 1 and 2", achievements: "23562", points: "3525632" }];

students.forEach(function (o) {
    this.appendChild(document.createTextNode(Object.keys(o).map(function (k) {
        return k + ': ' + JSON.stringify(o[k]);
    }).join(', ')));
    this.appendChild(document.createElement('br'));
}, document.getElementById('out'));

<div id="out"></div>

brso05 · Accepted Answer · 2020-02-05 13:03:42Z

1

You can use JSON.stringify():

var students = [
    {
        name: "Pavel Ravel",
        track: "CSS, HTML5, jQUery",
        achievements: "145",
        points: "353"
    },
    {
        name: "Steve Jobs",
        track: "MacOS, iOS",
        achievements: "3958735",
        points: "09854"
    },
    {
        name: "Bill Gates",
        track: "Windows",
        achievements: "358798",
        points: "37593"
    },
    {
        name: "Gabe Newel",
        track: "Steam",
        achievements: "5302",
        points: "3052"
    },
    {
        name: "Steve Wozniak",
        track: "Apple 1 and 2",
        achievements: "23562",
        points: "3525632"
    }
];

document.write(JSON.stringify(students));

edited Feb 5, 2020 at 13:03

answered Jan 4, 2017 at 20:30

brso05

13.3k2 gold badges25 silver badges41 bronze badges

7 Comments

Scott Marcus Over a year ago

Your solution doesn't output what the OP asked for.

Scott Marcus Over a year ago

I didn't down vote you, but you asked why you got down voted. Your solution just outputs the entire array. As for mine, it gets the property names and the property values only and will write it any way you like.

brso05 Over a year ago

@ScottMarcus read the title of his question: "How to document.write javascript object"...sometimes you have to read between the lines as to what the OP wants. This is how I interpreted his question...

brso05 Over a year ago

@ScottMarcus yours still isn't in his exact format he asked for: name: "Pavel Ravel", track: "CSS, HTML5, jQUery", achievements: "145", points: "353"...

Scott Marcus Over a year ago

The OP showed what he wanted. I don't think your answer addresses that, which is probably why it got down voted. I don't see why you are arguing this point with me. I'm just telling you. Also, check my answer again as it now shows both a generic way to extract the data (which is my reading between the lines as to what I thought the OP wanted) and how to get exactly the output the OP asked for.

|

Kamil Kiełczewski · Accepted Answer · 2019-01-21 20:35:49Z

Try

students.map(x=>document.write(Object.keys(x).map(y=>` ${y}: "${x[y]}"`)+"<br>"));

var students = [
    {
        name: "Pavel Ravel",
        track: "CSS, HTML5, jQUery",
        achievements: "145",
        points: "353"
    },
    {
        name: "Steve Jobs",
        track: "MacOS, iOS",
        achievements: "3958735",
        points: "09854"
    },
    {
        name: "Bill Gates",
        track: "Windows",
        achievements: "358798",
        points: "37593"
    },
    {
        name: "Gabe Newel",
        track: "Steam",
        achievements: "5302",
        points: "3052"
    },
    {
        name: "Steve Wozniak",
        track: "Apple 1 and 2",
        achievements: "23562",
        points: "3525632"
    }
];

students.map(x=>document.write(Object.keys(x).map(y=>` ${y}: "${x[y]}"`)+"<br>"));

Collectives™ on Stack Overflow

How to document.write javascript object

4 Answers 4

3 Comments

Comments

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related