Question

I’m usually a C# developer, but writing a mostly-client side application using jQuery.

It is reasonably straight forward: I have a list of “groups” which have some parameters (like a group name) and a list of “users” who also have some parameters.

At the moment I try to manage that using a <li> with a specific id, so there is a lot of string-matching involved to turn <li id="group-2">Name - ExtraInfo</li> back into something I can work with.

I feel that this approach is stupid because a) I use the UI as back-end for state and b) I rely on string parsing rather than working with real objects.

In C# I would just create a DTO (essentially a List<Group>), but I have not enough experience in JavaScript/jQuery to do that there.

Can someone give me some quick tips how to create a custom object and manage a list of these?

Answer 1

Expanding on Ionut G. Stan’s answer, I suggest nested objects:

var groups = {
  group1: {
    name: "Group 1",
    users: {
      uid1: { name: "User 1" },
      uid2: { name: "User 2" },
      uid3: { name: "User 3" }
    }
  },
  group2: {
    name: "Group 2",
    users: {
      uid1: { name: "User 1" },
      uid4: { name: "User 4" }
    }
  }
};

• Check:
  if ("group1" in groups && "uid1" in groups["group1"].users) /* ... */;
• Fetch:
  var username = groups["group1"].users["uid1"].name
• Remove:
  delete groups["group1"].users["uid1"];
• Add:
  groups["group1"].users["uid4"] = { name: "User 4" };

To avoid unnecessary duplication and insert paradoxons:

// all relevant users, for look-up purposes
var allUsers = {
  uid1: { name: "User 1" },
  uid2: { name: "User 2" },
  uid3: { name: "User 3" },
  uid4: { name: "User 4" }
}

// groups reference the ID only, details are in allUsers["uid1"] etc
var groups = {
  group1: {
    name: "Group 1",
    users: {uid1: 1, uid2: 1, uid3: 1}
  },
  group2: {
    name: "Group 2",
    users: {uid1: 1, uid4: 1 }
  }
};

• Check:
  if ("group1" in groups && "uid1" in groups["group1"].users) /* ... */;
• Fetch:
  var username = allUsers["uid1"].name
• Remove:
  delete groups["group1"].users["uid1"];
• Add:
  groups["group1"].users["uid4"] = 1;