2016-11-16 29 views
0

私はまだこれで新しいですが、学習のために私自身のデータをhttps://jsonplaceholder.typicode.com/usersに投稿しようとしています。ページの下部にはnpm install -g json-serverを使用しているので、プロジェクトでそのコマンドを実行し、上記のWeb URLにデータを投稿しようとしました。静的なjsonファイルに投稿してみました。 npm install -g json-serverコマンドを実行しますが、ローカルファイルを使用しているときにjsonファイルが見つからない場合は、上記のURLに投稿しようとすると、コンソールログのポストを表示しますが、ユーザーは決して更新しません。誰も私に私のPOSTデータを見ることができるようにこれを動作させる方法を教えてもらえますか?投稿するjsonサーバーの問題

user.service.ts

 import {Injectable} from '@angular/core'; 
import 'rxjs/add/operator/map'; 
import {Http, Headers} from '@angular/http'; 
import {User} from './user'; 
@Injectable() 
export class UserService{ 
constructor(private _http:Http){ 


} 
getUsers(){ 
return this._http.get('http://localhost:4200/users') 
.map(res=>res.json()); 

} 
addUser(post){ 

return this._http.post('http://localhost:4200/users', post) 
.map(res=> res.json()); 



} 
} 

form.component.ts

import { Component, OnInit } from '@angular/core'; 
import {UserService} from '../users.service'; 
import {Http} from '@angular/http'; 
import {Router} from '@angular/router'; 
import {FormGroup, FormControl} from '@angular/forms'; 

@Component({ 
    selector: 'app-form', 
    templateUrl: './form.component.html', 
    styleUrls: ['./form.component.css'], 
    providers: [UserService] 

}) 
export class FormComponent implements OnInit{ 
    private user; 

    private _users; 
    constructor(
    private _userService:UserService 


){ 


    } 

userForm = new FormGroup({ 
name: new FormControl(), 
username: new FormControl(), 
email: new FormControl(), 
address: new FormGroup({ 
    street: new FormControl(), 
    suite: new FormControl(), 
    city: new FormControl(), 
    postalcode: new FormControl() 

}) 

}); 
onSubmit(){ 
this._userService.addUser(this.userForm.value) 
.subscribe(res => { 
this.user = res; 
console.log(res); 

}) 

} 

} 
+0

サーバーを起動しましたか?また、あなたのURLは、依然として自分のローカルではなくオンライン版を指しているようです。 –

+0

私はそれを両方に指摘しようとしました。私は上記のコードをオンラインに向けて投稿しましたが、app/users.json(ローカルファイルですが、見つからないというメッセージが表示されます)を指摘しました。 GETリクエストと同じパスなので、パスが正しいことがわかります。上記のコードをローカルのjsonファイルを反映するように更新しました – user6680

答えて

0

あなたは今、あなたは、サーバーを実行していること/ users.jsonをアプリケーションに指定する必要がありません。 documentationとすると、http://localhost:3000/usersにPOSTできます。

+0

私はあなたの提案を反映するために上記のコードを更新しましたが、現在GETで任意のjsonデータを取得せず、users.jsonはappディレクトリにあります。エラー:予期しないトークン<位置0のJSONで – user6680

+0

サーバーですべてがOKであるかどうかを確認すると、おそらくエラーが返されます。 –

0

私はあなたがすでにローカルにインストールするので、ちょうど実行

Note: the resource will not be really created on the server but it will be faked as if.

(合理的である何)あなたは、公共サービスのことを逃した信じる:

$ jsonplaceholder

後でURLのホスト名を置き換えます角度からhttp://localhost:3000

+0

私はnpm install -g json-serverコマンドを実行しました(これはjsonplaceholderを実行することによって意味されますか?)現在、GETで任意のjsonデータをプルしていないので、users.jsonはappディレクトリにあります。エラー:予期せぬトークン user6680

+0

残念ですが、(gpmやその他のnpmのようなコマンドとして)(jsonplaceholder)を使用できるようになった後、ドキュメントに書かれている通りに(npm install -g jsonplaceholder) libsはグローバルにインストールされています)、json-serverはjsonplaceholder – 2oppin