Search code examples
javascriptreactjsarraysumlclass-diagram

How do I represent an Array of objects in a class diagram


I have this product model product model:

variations: [ 
  {
    name: { type: String }, 
    price: { type: Number }
  }
],
options: [
  {
    name: { type: String }, 
    price: { type: Number }
  }
]

And I want to represent those array of objects in my class diagram but I'm sure how to exactly this is the class diagram for product:

enter image description here

I was thinking about options : Object [] but I don't think that is correct


Solution

  • The fields options and variations are arrays of objects that share some common features (e.g. they all have a name and a price property).

    In UML your design could therefore be represented with association between Product and two a different classes Option and Variation with a multiplicity of * (which means that there can be several instances of Option/Variation associated with one instance of Product):

    enter image description here

    (Btw: in native UML, Number would be Real, but we can assume that you use a JS profile that adds to the UML built-in types language specific types)

    Alternatively, you can represent your design using two properties with the right multiplicity between square brackets. According to the UML semantics, both notations (association with a class and property of a given class) are almost the same:

    enter image description here

    Of course, you could make the shortcut and not define classes for Option and Variation, and use Object instead. But this does not represent accurately your model in UML, since nothing would tell that the objets in those arrays are guaranteed to have a name and a price.

    P.S: qwerty_so drew my attention at the other String [] in your diagram, which should indeed be String[*] in UML syntax. In the same spirit, whenever needed, String[1..*] could be used to mean "at least one string but more are possible"