Json array pass to model through controller [Spring Boot]

[romantic coder]

Hi, How are you?
I have a web project, where I'm fetching a json file through JavaScript for frontend. It's working fine. But when I send those json data to my model, I'm not able to sent them.

   

<form id="myForm" th:object="${createAds}">

      <div class="choose">
        <h1 class="main__header description__header"><a >Brand & Model</a></h1>
        <div class="choose__inputs">
          <div class="choose__input">
            <p class="choose__input__single" ><span th:field="*{brand}" id="brands">Brand</span>
              <svg>
                <use xlink:href="../image/sprite.svg#icon-chevron-down"></use>
              </svg>
            </p>
            <div class="allWrap">
              <ul class="dropList odaberiteMarku">

              </ul>
            </div>
          </div>
          <div class="choose__input">
            <p class="choose__input__single"><span>Model</span>
              <svg>
                <use xlink:href="../image/sprite.svg#icon-chevron-down"></use>
              </svg>
            </p>
            <div class="allWrap mt-s">
              <ul class="dropList odaberiteModel">

              </ul>
            </div>
          </div>

          <div class="grid-1-2">
            <label>Obelezje</label><input type="text" placeholder="1.6 tdi" th:field="*{level}">
          </div>
        </div>
      </div>

 		<div class="buttonsOnBottom">
        <input class="search__btn btn__dark" type="submit" value="Obriši">
        <input class="search__btn" type="submit" value="Snimi">
      </div>
    </form>

and

<script>
	$("#myForm").submit(function(e){
		var data = {};
		data['brand'] = $('[id="brands"]').val();
		data['models'] = $('[class="choose__input__single"]').val();
		console.log(data['brand']);
		$.ajax({
			headers: {
				"Accept": "application/json; charset=utf-8",
				"Content-Type": "application/json; charset=utf-8"
			},
			type: 'POST',
			url: '/create/ads',
			data: JSON.stringify(data),
			contentType: 'application/json; charset=utf-8;',
			dataType: 'json', 
			beforeSend: function(xhr) {
				
			}, 
			success: function(data){
				
			},
			return false;
		});
	}); 
</script>

and in my controller,

@PostMapping(value="/create/ads", headers="Accept=application/json"/*, produces=MediaType.APPLICATION_JSON_VALUE*/)
	public String submitForm(@Valid @RequestBody CreateAds ads, BindingResult result, Model model) throws IOException, ParseException {
		if (result.hasErrors()) {
			return "test";
		}
		
		System.out.println("ads brand: "+ads.getBrand()+", ads model: "+ads.getModels()+" level: " + ads.getLevel());
		return "successful"; 
	}

In model class.

@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY)
	private Long id;
	private String brand;
       @ElementCollection
	private ArrayList<String> models = new ArrayList<>();
	private String level;

So how can pass json value with variable from one form?
If you want to see my whole project, here is the link. Dropdown

[Rob Spoor]

Your models are expected to be a list / array of strings, but your JavaScript code sends them as a single string. From .val():

Get the current value of the first element in the set of matched elements or set the value of every matched element.

To get a list of values, you need to use map.

Untested (but copied from DevDocs):

data['models'] = $('[class="choose__input__single"]').map(function() {
  return $( this ).val();
})
.get()