How to send the below json as form data ? Tried JSON.stringify and its not working.

{
   name: 'starwars',
   year: 1977,
   data: [{ 
    'id': 'c5f6d301-328e-4167-8e13-504afb9a030e', 
    'item': 'bc4db36e-9e7c-478d-93a2-d4be32dacec1', 
    'qty': '1' 
  },
  { 
    'id': 'c5f6d301-328e-4167-8e13-504afb9a030e', 
    'item': 'bc4db36e-9e7c-478d-93a2-d4be32dacec1', 
    'qty': '1' 
  },
 ],
}

How to send the below json as form data ? Tried JSON.stringify and its not working.

{
   name: 'starwars',
   year: 1977,
   data: [{ 
    'id': 'c5f6d301-328e-4167-8e13-504afb9a030e', 
    'item': 'bc4db36e-9e7c-478d-93a2-d4be32dacec1', 
    'qty': '1' 
  },
  { 
    'id': 'c5f6d301-328e-4167-8e13-504afb9a030e', 
    'item': 'bc4db36e-9e7c-478d-93a2-d4be32dacec1', 
    'qty': '1' 
  },
 ],
}

• javascript
• angular

• Where is the rest of your code? anyway I think you have to do json.parse() and pass it the json you've posted up here – Jacopo Sciampi Commented Sep 17, 2018 at 10:45
• Angular has a whole guide about that. – user4676340 Commented Sep 17, 2018 at 10:52

3 Answers 3

    var jsonData = {
   name: 'starwars',
   year: 1977,
   data: [{ 
    'id': 'c5f6d301-328e-4167-8e13-504afb9a030e', 
    'item': 'bc4db36e-9e7c-478d-93a2-d4be32dacec1', 
    'qty': '1' 
  },
  { 
    'id': 'c5f6d301-328e-4167-8e13-504afb9a030e', 
    'item': 'bc4db36e-9e7c-478d-93a2-d4be32dacec1', 
    'qty': '1' 
  },
 ],
};
var formData = new FormData();
Object.keys(jsonData).forEach((key)=>{formData.append(key,jsonData[key])});

Hope you are asking this. Now you can post the formData to your Rest Api.

import { Injectable, OnInit } from '@angular/core'
import { Http, Headers, URLSearchParams, RequestOptions } from '@angular/http'
import { Observable, Subject } from 'rxjs/Rx'
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/catch'

@Injectable()
export class YifyMoviesProvider {
    constructor(public http: Http) {

    }
    postData(): Observable < any > {
        let jsonData = {
            name: 'starwars',
            year: 1977,
            data: [{
                    'id': 'c5f6d301-328e-4167-8e13-504afb9a030e',
                    'item': 'bc4db36e-9e7c-478d-93a2-d4be32dacec1',
                    'qty': '1'
                },
                {
                    'id': 'c5f6d301-328e-4167-8e13-504afb9a030e',
                    'item': 'bc4db36e-9e7c-478d-93a2-d4be32dacec1',
                    'qty': '1'
                },
            ],
        };
        let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded', 'Accept': 'application/json' })
        let options = new RequestOptions({
            headers: headers
        })
        let body = new URLSearchParams()
        body.set('mydata', JSON.stringify(jsonData))
        return this.http.post(`yourip`, body, options).
        map(res => res.json())
        .catch((error: any) => {
            return Observable.throw(new Error(error.status))
        })
    }
}

Incase if you want to post the json data to Rest api as form data this would work in angular 4!

 var jsonData = {
   'name': 'starwars1',
   'year': 1977,
   'data': [{ 
    'id': 'c5f6d301328416e', 
    'item': 'bc4db36e-9e7c-478d-93a2-d4be32dacec1', 
    'qty': '1' 
  },
  { 
    'id': 'c5f6d301-328e-4167-8e13-504afb9a030e', 
    'item': 'bc4db36e-9e7c-478d-93a2-d4be32dacec1', 
    'qty': '1' 
  },
 ],
};