Создайте новый массив из новых данных формы(), а затем отправьте на сервер с помощью углового HttpClient

#html #arrays #angular #typescript #form-data

Вопрос:

У меня есть этот массив объектов, содержащий файлы (изображения) с уникальными полями. При отправке новый массив объекта отправляется на сервер с использованием углового HttpClient

 // Old Arrray of Objects
let oldArray = [
        {
            "name": "macbook pro",
            "color": "white",
            "serialno": "s34345",
            "price": 1000,
            "description": "excellent for work",
            "image": "photo1.jpg",
            "image2": "photo2.png"
        },
        {
            "name": "hp pavilion 23",
            "color": "black",
            "serialno": "s767",
            "price": 2000,
            "description": "good speed",
            "image": "hp-photo1.jpg",
            "image2": "hp-photo2.png"
        }
    ];

 

Объявление переменной и перебор старого массива объектов для добавления в новые данные формы()

      // Declare an new Array
     let newArray: any[] = [];

     // Declare formData variable
      formData = new FormData();

    // Loop through old Array of objects

    for (let i = 0; i < oldArray.length; i  ) {

      // get Individual object {} from array [{},{}]
      let formValue = oldArray[i];

      for (let key of Object.keys(formValue)) {
        const value = formValue[key];

        // Append key, values to formData()
        this.formData.append(key, value);
      }

      // Create/Push to newArray
      newArray.push(this.formData);
    }
 

Отправка на сервер с помощью углового HttpClient

   // Post to server using Angular HttpClient

  this.productService.addProductsArray(newArray).pipe(first())
      .subscribe(
        (data: any) => {
          if (data) {
             alert('successful');
          }
      });

 

Каждый раз, когда я отправляю форму, в запросе сервера нет данных или массива объектов

Ответ №1:

никогда не используйте массив данных формы, данные формы должны быть объектом с ключами, тип которых-текст или файл

Комментарии:

1. это значит, что я могу сделать что-то вроде this.formData.append('key', [ {"name": "macbook pro", "image": "photo1.jpg"}, {"name": "hp pavilion 23", "image": "hp-photo1.jpg"} ] );