Storing Javascript console.log output to variable and then accessing that variable in html?

Question

Below is my code. First section is JS code and second is HTML.

$('#table').on('check.bs.table', function (e, row) {
    checkedRows.push({First: row.fname, Second: row.sname});
    var test = console.log(checkedRows);
    document.getElementById("xyz").innerHTML=test;
});


<p id="xyz"></p>

I want to basically output first and last name from table to my html page but somehow it's not working. The console.log prints just fine when selecting rows from table. Again I want to access the selected data from console.log to view on my html page.

I mean, sure, but, i don't think it'd be that useful to store undefined in a variable. (console.log doesn't return anything) — user400654
– user400654, Commented Feb 5, 2018 at 20:19
console.log(checkedRows) returns undefined, so you need to assign the value before you print it. — Slava Eremenko
– Slava Eremenko, Commented Feb 5, 2018 at 20:19

Roko C. Buljan · Accepted Answer · 2018-02-05 21:53:07Z

1

Use JSON Stringify if you just want to test your Array with Objects:

// Say, after several .push() our array looks like:

var checkedRows = [
  {First:"John", Second: "Doe"},
  {First:"Mary", Second: "Jane"},
];

// console.log(checkedRows);

document.getElementById("xyz").innerHTML = JSON.stringify(checkedRows, null, 4);

<pre id="xyz"></pre>

If you want to print only a string like "John Doe" or "Mary Jane" than use

$('#table').on('check.bs.table', function (e, row) {

    var person = {First: row.fname, Second: row.sname}; // Store data into variable

    checkedRows.push( person ); // Push person Object to checkedRows Array

    console.log( checkedRows );
    console.log( person );

    document.getElementById("xyz").innerHTML = person.First +" "+ person.Second ;
    // or use:
    document.getElementById("xyz").innerHTML = row.fname +" "+ row.sname ;
});

edited Feb 5, 2018 at 21:53

answered Feb 5, 2018 at 20:27

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

connexo Over a year ago

document.getElementById("xyz").innerHTML can be shortened to xyz.innerHTML.

IrkenInvader Over a year ago

^ true...I also think the syntax he used is fine, I can see people looking around for your xyz variable not understanding it's an element.

Roko C. Buljan Over a year ago

@connexo yes, but we should stop learning from w3schools finally ;) - You should not break your code if you introduce suddenly an xyz variable. Also, can you say with 100% certainty it's not a name (instead of id)? No. :)

Hari Over a year ago

@Roko C. Buljan it worked. Although the output is like [ {First:"John", Second: "Doe"}, {First:"Mary", Second: "Jane"}, ] anyway I can just get the values. For example I just want to print "John" "Doe" when selecting the row and not the [ {First:"John", Second: "Doe"}, ] ?

Roko C. Buljan Over a year ago

@Hari notice that I used the <pre> tag to get a nicely formatted output. And see my edit.

Collectives™ on Stack Overflow

Storing Javascript console.log output to variable and then accessing that variable in html?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related