如何在Angular 4中将JSON数据构建为FormData

时间:2018-09-17 10:44:16

标签: javascript angular

如何将以下json作为表单数据发送?尝试过JSON.stringify,但无法正常工作。

{
   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' 
  },
 ],
}

3 个答案:

答案 0 :(得分:1)

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))
        })
    }
}

如果要将json数据作为表单数据发布到Rest api,则可以在角度4中使用!

答案 1 :(得分:0)

    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])});

希望您正在问这个。现在,您可以将formData发布到Rest Api。

答案 2 :(得分:0)

 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' 
  },
 ],
};