How to dynamically add users on the page using jquery

user_8724160 0
Viewed 565

Im having some trouble figuring this out. I have a database which has users on it and I want to display each user on the page dynamically using jquery.

Ive just thrown some user data objects in a array and im trying to call for each user object in the array to display as a list item on the page

html

<h1>List</h1>
<ul id="list">

</ul>

javascript

var user = [
{
    username: alex,
    age: 20
},
{
    username: james,
    age: 20
}
]

function addUser() {
    var username = user.username;
    var age = user.age

    var $user = $("<li>" + username + "</li>");
    var $age = $("<li>" + age + "</li>");

    $("#list").append($user + " " + $age);
}

$.each(user, addUser());
html jquery javascript
3 Answers

Your mistake is very simple. You have to replace addUser() by addUser when you use the $.each method. There are also mistakes when you use the.append method. Try this code:

var user = [
    {
      username: "alex",
      age: 20
    },
    {
      username: "james",
      age: 20
    }
  ];
  function addUser(theCase, value) {
    var username = value.username;
    var age = value.age;

    
    var user = '<li> ' + username;  // Use a simple string, it's better and faster!
    var age = age + ' </li>';

    $("#list").append(user + " " + age);
  }

  $.each(user, addUser);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<h1>List</h1>
  <ul id="list">

</ul>

Here you are using a callback. If you want more details about callbacks consult the MDN's documentation.

There are also several errors on .each method or .append method. Consult the documentation.

The .each method call your callback for each case on your array user. This method also provide you, in your callback, the index and the value of the case witch is treated.

user_74263830

When you pass a callback to the jQuery each function, what happens is that the callback is going to be invoked with every element in your user array.

Check the arguments that jQuery.each passes to the callback. The callback function signature should expect the index and the value of the element in that index.

For example:

var users = user = [
  {
    username: alex,
    age: 20
  },
  {
    username: james,
    age: 20
  }
];

function addUser(index, user) {
  // do what you want and in the end
  $('#list').append(/* an <li> element */);
};

// Now pass the function as a callback, but don't invoke it.
$.each(users, addUser);
user_75618460

Can you please check page: https://jsfiddle.net/rxcz73x9/2/ 

var user = [{
   username: "alex", // use string
   age: 20
}, {
   username: "james", // use string
   age: 20
}];

function addUser(idx, user) {
   var username = user.username;
   var age = user.age

   var $user = $("<li>" + username + "</li>");
   var $age = $("<li>" + age + "</li>");

   $("#list").append($user).append($age); // use append for each node
}

$.each(user, addUser); // use function name instead of addUser()

I've added comment that could help you with example above.

user_18478140
Related