HTML Form: Post an Array of Objects

HTML Form: POST an array of objects

tl;dr: Add empty brackets ([]) after students to the input names.

Fiddling with Rack::Utils.parse_nested_query it seems you can get the payload you want like this:

<!-- first student -->
<input type="text" name="students[][first]">
<input type="text" name="students[][last]">
<input type="text" name="students[][age]">

<!-- second student -->
<input type="text" name="students[][first]">
<input type="text" name="students[][last]">
<input type="text" name="students[][age]">

Note the empty brackets ([]) after students. This tells Rack you want the students param to be an array. Subsequent params encountered (with the same name) will start a new element.

POST /myroute?students[][first]=foo&students[][last]=bar&students[][age]=21&students[][first]=baz&students[][last]=qux&students[][age]=19

Gets parsed like this:

{"students" => [
  {
    "first" => "foo",
     "last" => "bar",
      "age" => "21"
  },
  {
    "first" => "baz",
     "last" => "qux",
      "age" => "19"
  }
]}

Further reading: http://codefol.io/posts/How-Does-Rack-Parse-Query-Params-With-parse-nested-query

POST an array from an HTML form without javascript

check this one out.

<input type="text" name="firstname">
<input type="text" name="lastname">
<input type="text" name="email">
<input type="text" name="address">

<input type="text" name="tree[tree1][fruit]">
<input type="text" name="tree[tree1][height]">

<input type="text" name="tree[tree2][fruit]">
<input type="text" name="tree[tree2][height]">

<input type="text" name="tree[tree3][fruit]">
<input type="text" name="tree[tree3][height]">

it should end up like this in the $_POST[] array (PHP format for easy visualization)

$_POST[] = array(
    'firstname'=>'value',
    'lastname'=>'value',
    'email'=>'value',
    'address'=>'value',
    'tree' => array(
        'tree1'=>array(
            'fruit'=>'value',
            'height'=>'value'
        ),
        'tree2'=>array(
            'fruit'=>'value',
            'height'=>'value'
        ),
        'tree3'=>array(
            'fruit'=>'value',
            'height'=>'value'
        )
    )
)

Laravel - How can I post array of objects?

Option number 2 is not possible, that will result in something like this:

{
 _token: "OFjlTsy3Jws9xW9H0cI9ARVGGNnQokLtRI6Tn478",
 reports: [
  {
     title: "title 1"
  },
  {
     description: "description 1"
  },
  {
     title: "title 2"
  },
  {
     description: "description 2"
  },
 ],
}

So when adding dynamically your fields you need to add them with the numbers for each set:

Lets assume this is your form

<form action="save-reposts" method="POST">
  <!-- Your crsf token field here -->
  <input type="text" name="reports[0][title]">
  <input type="text" name="reports[0][description]">
  <input type="text" name="reports[1][title]">
  <input type="text" name="reports[1][description]">
  <input type="submit" id="submitButton" value="Submit" />
</form>
<button id="addMoreReports"> Add more </button>

Using jQuery that could be something like that:

let i = 2;
$('#addMoreReports').click(function(){
   $('#submitButton').before(addFieldSet(i));
   i++;
});

function addFieldSet(index){
   return '<input type="text" name="reports[' + index + '][title]"><input type="text" name="reports[' + index + '][description]">';
}

Correct way of post an object array using form post

Why do you create a form with the supposed objects before posting it?

If there is no real reason other than posting the values then i suggest you build the AJAX data via a javascript array or PlainObject as these are the other 2 possible data types for the data parameter. Currently you are using the serialized string.

html form search in Array of objects

Try using
array.filter(function(currentValue, index, arr), thisValue)

How to transfer an array of objects into a HTML form

You can create an empty form array on load and patch it with the data afterwards.

  ngOnInit() {
    const categoryArray = this.fb.array([])
    this.categoryForm = this.fb.group({
      categories: categoryArray
    });

    this.productService.getCategories().subscribe(data => {
      this.categories = data;
      this.categories.forEach(category => {
        categoryArray.push(this.createCategoryGroup(category)); 
        console.log(category); 
      })
    });
  }

---

Related Topics