Search code examples
angularjsjsonschemaangular-schema-form

Using an array inside array


I'm trying to generate a form which will have multiple vehicles and each vehicle should have multiple people inside it.

I tried to do it by using an array inside another array. But for some obscure reasons it's not working.

This is what I want: https://i.sstatic.net/PmxF3.png

This is what I have (so far):

Form:

[
  {
    "key": "vehicles",
    "items": [
      "['vehicles'][]['plate-number']",
      "['vehicles'][]['color']",
      {
        "key": "people",
        "items": [
            "['vehicles'][]['people'][]['name']"
        ]
      }
    ]
  }
]

Schema:

{
  "type": "object",
  "properties": {
    "vehicles": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "plate-number": {
            "title": "Plate number",
            "type": "string"
          },
          "color": {
            "title": "Color",
            "type": "string"
          },
          "people": {
            "type": "array",
            "items": {
              "type": "object",
              "properties": {
                "title": {
                  "type": "string",
                  "enum": ["dr","jr","sir","mrs","mr","NaN","dj"]
                },
                "name": {
                  "title": "Name",
                  "type": "string"
                }
              }
            }
          }
        }
      }
    }
  }
}

Edit: stefankmitph's answer solvers my problem. Thank you!

But something weird is happening: a new object person is added at the same level of vehicles. Also, when I fill a person's information and then delete this person the models is not updated.


Solution

  • The schema you provide does not add a property 'gender' (as shown in your picture link). So I took 'title' instead of 'gender':

    [
      {
        "key": "vehicles",
        "items": [
          "vehicles[].plate-number",
          "vehicles[].color", {
              "key": "people",
              "type": "array",
              "title": "People",
              "items": [
                  "vehicles[].people[].name",
                  "vehicles[].people[].title"
                  ]
          }
        ]
      }
    ]
    

    I hope this is what you're looking for! Note: Tested with Schema Form Example Page