Updating HTML Text From JQuery Object

Question

I have a simple object created through JQuery:

var userSettings = {
    firstName: "John",
    lastName: "Smith",
    username: "Jsmith"
};

The HTML is quite simple as well:

<p>First Name <span id="firstName"></span></p>
<p>Last Name <span id="lastName"></span></p>
<p>Username <span id="username"></span></p>

My question is, how do I write a simple function that will support adding more key/values to the object. For this example, the function would simply update the text of the corresponding span with the proper ID.

Additionally

Parts of the object will not necessarily going to be handled through .text - is there a way to filter/define what method to use based off of something defined in the object? For example adding in userColor: red would use .css rather than .text.

JS Fiddle Link

Edit: Updated Fiddle with Function

Answer 1

Could be:

for (var key in userSettings) {
  if (userSettings.hasOwnProperty(key)) {
    $('#' + key).text(userSettings[key]);
  }
}

FIDDLE: https://jsfiddle.net/lmgonzalves/bce7ubqx/1/

EDIT:

A possible solution (include your styles in object):

var userSettings = {
    firstName: "John",
    lastName: "Smith",
    username: "Jsmith",
    styles: {
        color: "red",
        backgroundColor: "gray"
    }
};

for (var key in userSettings) {
    if (userSettings.hasOwnProperty(key)) {
        if(key !== 'styles'){
            $('#' + key).text(userSettings[key]);
            if (userSettings.hasOwnProperty('styles')) {
                var styles = userSettings['styles'];
                for (var k in styles) {
                    if (styles.hasOwnProperty(k)) {
                        $('#' + key).css(k, styles[k]);
                    }
                }            
            }
        }
    }
}

FIDDLE: https://jsfiddle.net/lmgonzalves/bce7ubqx/5/

Answer 2

This will upadate the span text according to your userSettings

$(document).ready(function(){
    $.each(userSettings,function(k,v){
        if($('#'+k).length)
            $('#'+k).text(v);
    })
});

Edit:

If you want to differentiate between id and style, add flags in loop

var userSettings = {
    firstName: "John",
    lastName: "Smith",
    username: "Jsmith",
    styles: {
        color: "red"
    }
};

$(document).ready(function(){
    $.each(userSettings,function(k,v){
        if($('#'+k).length)
        {
            $('#'+k).text(v);
        }
        else if(k=='styles')
        {
            $('any_selector_here').css(userSettings.styles);
        }
    })
});

See working Fiddle here

Answer 3

Try this

function update(){
    $("#firstName").text(userSettings.firstName);
    $("#lastName").text(userSettings.lastName);
    $("#username").text(userSettings.username);
}

Answer 4

This is simple enough to achieve without jQuery at all:

var userSettings = {
    firstName: "John",
    lastName: "Smith",
    username: "Jsmith"
};

function setElementText(id, text) {
    document.getElementById(id).innerHTML = text;
}

window.addEventListener('load', function() {
    Object.keys(userSettings).forEach(function(key) {
        setElementText(key, userSettings[key]);
    });
});

<p><strong>First Name</strong> <span id="firstName"></span></p>
<p><strong>Last Name</strong> <span id="lastName"></span></p>
<p><strong>Username</strong> <span id="username"></span></p>

Also on JSFiddle

Of course, if you're trying to learn jQuery, the other answers are valid.

Answer 5

Add this to your script

var count = 0;
   $.each(userSettings, function(i, value) {
   //alert(count);
      $("p span:eq("+count+")").attr("id", value)
      count++;    
});

You can also add css attributes in this technique.

http://jsfiddle.net/bce7ubqx/7/