javascript [object Object] to string

Question

I'll start with a little background.

So what I'm trying to do is grabbing the "style" attribute from an element, and the eventual plan is to output it to a text box (the styling is dynamic). With this I'm creating some css prefixing, due to the fact that I'm only grabing computed styles.

With that, I have a variable with a bunch of css properties as seen here:

compcss = {
                'font-size': fsize,
                'padding': tpadd,

                '-webkit-border-radius': brad,
                '-moz-border-radius': brad,
                '-o-border-radius': brad,
                '-ms-border-radius': brad,
                'border-radius': brad,

                'background': bground,
                'background-m': bgmoz,
                'background-o': bgop,
                'background-i': bgie,
                'color': 'white',
                'text-shadow': '0 -1px 0 rgba(0, 0, 0, 0.25)',
                'text-decoration': 'none',
                'border': '1px solid rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)',

            };

Normally fsize, tpadd, brad, and bground are filled with

document.defaultView.getComputedStyle(cssStr[0], "")[style]

but for the following jsbin I put in static numbers.

This returns as [object Object] when logged or put into the text box, which is to be expected. However, I wish to get this object outputting as a string in the form:

font-size: Xpx;
padding: Ypx;
-webkit-border-radius: Zpx;

and so on, I've tried JSON.stringify(compcss), but that returns as:

"font-fize":"Xpx","padding":"Ypx","-webkit-border-radius":"Zpx"

all the way down the line.

What is the best way to get this to output the way I want? Let me know if anything needs clarifying. Is there a better way of going about this?

here's a jsbin for example: http://jsbin.com/opiwuy/2/edit

Both Vanilla Javascript and JQuery are fine.

Thanks!

Does it matter if were putting object properties in quotations or not?? Or can we define them with or without? — Sethen
– Sethen, Commented Jun 1, 2012 at 18:06
@SethenMaleno Not necessary to have any of the properties in quotations, this is to be used in a stylesheet. I've accepted a solution already, but thank you for your interest. — MoDFoX
– MoDFoX, Commented Jun 1, 2012 at 18:10
@MoDoFox I am really asking for my own sake. I've never seen properties listed in an object with quotations. — Sethen
– Sethen, Commented Jun 1, 2012 at 18:13
@SethenMaleno You know what... I'm not sure why some of them are returning in "'s — MoDFoX
– MoDFoX, Commented Jun 1, 2012 at 19:24
@MoDoFox You are saying that the properties are returning in ''s? — Sethen
– Sethen, Commented Jun 4, 2012 at 18:31

thecodeparadox · Accepted Answer · 2012-06-01 18:04:37Z

6

  var value = '';
  $.each(compcss, function(key, val) {
    value += key + ' : ' + val + ';' +'\n';
  });
  $('#css').val(value);

DEMO

You can also do

$('#css').val(function() {
    var value = '';
    $.each(compcss, function(key, val) {
      value += key + ' : ' + val + ';' + '\n';
    });
    return value;
});

DEMO

edited Jun 1, 2012 at 18:04

answered Jun 1, 2012 at 17:59

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

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

2 Comments

Selvakumar Arumugam Over a year ago

I was trying to do similar stuff but this breaks the color: "white" as color: white. +1 for the effort.

MoDFoX Over a year ago

Thanks! Works great. It seems I have fallen trap to thinking too hard about something that has a fairly simple solution.

robbymurphy · Accepted Answer · 2012-06-01 18:04:35Z

2

something like this would probably suit your needs:

function cssStringify(myObject) {
    var result = "";
    var stringObjs = JSON.stringify(myObject).split(",");
    $.each(stringObjs, function(val) {
        var pair = val.split(":");
        result = result + pair[0] + ":" + pair[1] + ";\n";
    });
    return result;
}

answered Jun 1, 2012 at 18:04

robbymurphy

7412 gold badges5 silver badges16 bronze badges

Comments

Selvakumar Arumugam · Accepted Answer · 2012-06-01 18:12:57Z

2

Just throwing out my version with .replace

var xx = JSON.stringify(compcss); 
$('#csjson').val(
    xx.replace(/":"|":/g, ":")
      .replace(/,"/g, "\n")
      .replace(/"/g, ""));

DEMO: http://jsbin.com/opiwuy/4

answered Jun 1, 2012 at 18:12

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

Collectives™ on Stack Overflow

javascript [object Object] to string

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related