How to include array content in HTML?

Question

I have this code

var users = result.users; // array

$("#dialog:ui-dialog").dialog("destroy");

$("#dialog-confirm").dialog({
    resizable: false,
    height: 140,
    modal: true,
    open: function() {
    $(this).children('div.dialog-text').replaceWith("<b>New text goes here</b>");
    },

    buttons: {
    "Okay": function() {
        $(this).dialog("close");
    },
    Cancel: function() {
        is_okay = 0;
        $(this).dialog("close");
    }
    }
});

where the array contain data in the form of

{"ss":"Sandra Schlichting","fn":"Full name"}

What I am trying to accomplish is to get the content of the arrays in the form of (white space inserted for readability)

<table>
  <tr>  <td>Initials</td>  <td>Full Name         </td>  </tr>
  <tr>  <td>ss      </td>  <td>Sandra Schlichting</td>  </tr>
  <tr>  <td>fn      </td>  <td>Full name         </td>  </tr>
</table>

and have that replaced with <b>New text goes here</b> in

$(this).children('div.dialog-text').replaceWith("<b>New text goes here</b>");

From what I can tell $.each() should be used for this.

But still I can't quite figure out how to get started.

Can anyone help me out?

JohnP · Accepted Answer · 2011-05-17 08:53:43Z

3

You can use a JS for-in to loop through it.

<table id='nameTable'>
  <tr>  <td>Initials</td>  <td>Full Name         </td>  </tr>
</table>

var names = {
    "ss": "Sandra Schlichting",
    "fn": "Full name"
};
var $table = $('#nameTable');
var row   = '';
for (name in names) {
    row += '<tr><td>' + name + '</td><td>' + names[name] + '</td></tr>';
}
$table.append(row)

Here's a fiddle : http://jsfiddle.net/exP2b/4/

edited May 17, 2011 at 8:53

answered May 17, 2011 at 8:47

JohnP

50k13 gold badges112 silver badges142 bronze badges

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

2 Comments

Gary Green Over a year ago

Nice, though for large amounts of data I wouldn't recommend doing .append within a loop. I'd build up a string and append outside.

JohnP Over a year ago

@Gary yup definitely. Building up the elements and inserting in one go is the recommended way. Updated the answer, thanks.

ariel · Accepted Answer · 2011-05-17 08:48:28Z

2

function makeTable(users) {
    var result = '<table><tr><td>Initials</td><td>Full Name</td></tr>\n';
    $.each(users, function(index, value) {
        result += '<tr><td>' + index + '</td><td>' + value + '</td></tr>\n';
    });
    result += '</table>';
    return (result);
}

alert(makeTable({"ss":"Sandra Schlichting","fn":"Full name"}));

Working here
$.each documentation

answered May 17, 2011 at 8:48

ariel

16.2k13 gold badges65 silver badges75 bronze badges

Collectives™ on Stack Overflow

How to include array content in HTML?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related