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

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

• javascript
• jquery

• 3 document.write(JSON.stringify(students)); – brso05 Commented Jan 4, 2017 at 20:29
• 1 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-promising) bugs. Consider something like document.body.textContent += "your text" instead. – Jeremy Banks Commented Jan 4, 2017 at 20:31

4 Answers 4

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 ments 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 ma
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 ments 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] + '"'); 
  }
 
});

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>

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

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>"));