how to fetch data from json in angular 4
Hi everyone plz help me I have Json string which is I am getting from Node api .I want only single value from that string.
I have service.ts from which I am calling api and subscribe the data on my component file .
Json string is [{"_id":5,"name":"ram,shyam,kamal,kishore"}]
I want only name value. how to achieve this.
service.ts code is given below
empservicecall() {
return this.http.get("http://localhost:3000/api/Employee")
}
component.ts code is given below
GetEmpName(){
this.Emp.empservicecall()
.subscribe(
response =>{
this.name=response.json})
}
it is not working and also error is coming in this code at line response.json().
plz help me
json angular api
asked Nov 20 at 19:08
user1220461
267
|
show 7 more comments
Hi everyone plz help me I have Json string which is I am getting from Node api .I want only single value from that string.
I have service.ts from which I am calling api and subscribe the data on my component file .
Json string is [{"_id":5,"name":"ram,shyam,kamal,kishore"}]
I want only name value. how to achieve this.
service.ts code is given below
empservicecall() {
return this.http.get("http://localhost:3000/api/Employee")
}
component.ts code is given below
GetEmpName(){
this.Emp.empservicecall()
.subscribe(
response =>{
this.name=response.json})
}
it is not working and also error is coming in this code at line response.json().
plz help me
json angular api
asked Nov 20 at 19:08
user1220461
267
What's the exact version of Angular that you're using?
– SiddAjmera
Nov 20 at 19:09
Did you tryresponse[0].name?
– Oen44
Nov 20 at 19:09
@SiddAjmer I am using angular 4
– user1220461
Nov 20 at 19:10
4. what? 4.0 or 4.3?
– SiddAjmera
Nov 20 at 19:10
Does localhost:3000/api/Employee only return the employee's name?
– schlonzo
Nov 20 at 19:10
|
show 7 more comments
Hi everyone plz help me I have Json string which is I am getting from Node api .I want only single value from that string.
I have service.ts from which I am calling api and subscribe the data on my component file .
Json string is [{"_id":5,"name":"ram,shyam,kamal,kishore"}]
I want only name value. how to achieve this.
service.ts code is given below
empservicecall() {
return this.http.get("http://localhost:3000/api/Employee")
}
component.ts code is given below
GetEmpName(){
this.Emp.empservicecall()
.subscribe(
response =>{
this.name=response.json})
}
it is not working and also error is coming in this code at line response.json().
plz help me
json angular api
asked Nov 20 at 19:08
user1220461
267
Hi everyone plz help me I have Json string which is I am getting from Node api .I want only single value from that string.
I have service.ts from which I am calling api and subscribe the data on my component file .
Json string is [{"_id":5,"name":"ram,shyam,kamal,kishore"}]
I want only name value. how to achieve this.
service.ts code is given below
empservicecall() {
return this.http.get("http://localhost:3000/api/Employee")
}
component.ts code is given below
GetEmpName(){
this.Emp.empservicecall()
.subscribe(
response =>{
this.name=response.json})
}
it is not working and also error is coming in this code at line response.json().
plz help me
json angular api
json angular api
asked Nov 20 at 19:08
user1220461
267
asked Nov 20 at 19:08
user1220461
267
asked Nov 20 at 19:08
user1220461
267
asked Nov 20 at 19:08
user1220461
267
asked Nov 20 at 19:08
user1220461
267
267
What's the exact version of Angular that you're using?
– SiddAjmera
Nov 20 at 19:09
Did you tryresponse[0].name?
– Oen44
Nov 20 at 19:09
@SiddAjmer I am using angular 4
– user1220461
Nov 20 at 19:10
4. what? 4.0 or 4.3?
– SiddAjmera
Nov 20 at 19:10
Does localhost:3000/api/Employee only return the employee's name?
– schlonzo
Nov 20 at 19:10
|
show 7 more comments
What's the exact version of Angular that you're using?
– SiddAjmera
Nov 20 at 19:09
Did you tryresponse[0].name?
– Oen44
Nov 20 at 19:09
@SiddAjmer I am using angular 4
– user1220461
Nov 20 at 19:10
4. what? 4.0 or 4.3?
– SiddAjmera
Nov 20 at 19:10
Does localhost:3000/api/Employee only return the employee's name?
– schlonzo
Nov 20 at 19:10
What's the exact version of Angular that you're using?
– SiddAjmera
Nov 20 at 19:09
What's the exact version of Angular that you're using?
– SiddAjmera
Nov 20 at 19:09
Did you try
response[0].name?– Oen44
Nov 20 at 19:09
Did you try
response[0].name?– Oen44
Nov 20 at 19:09
@SiddAjmer I am using angular 4
– user1220461
Nov 20 at 19:10
@SiddAjmer I am using angular 4
– user1220461
Nov 20 at 19:10
4. what? 4.0 or 4.3?
– SiddAjmera
Nov 20 at 19:10
4. what? 4.0 or 4.3?
– SiddAjmera
Nov 20 at 19:10
Does localhost:3000/api/Employee only return the employee's name?
– schlonzo
Nov 20 at 19:10
Does localhost:3000/api/Employee only return the employee's name?
– schlonzo
Nov 20 at 19:10
|
show 7 more comments
1 Answer
1
active
oldest
votes
The solution to your issue completely depends on which version of Angular you are on and whether you're using Http or HttpClient.
If you're using HttpClient, then:
empservicecall() {
return this.http.get("http://localhost:3000/api/Employee");
}
And in your Component:
GetEmpName(){
this.Emp.empservicecall()
.subscribe(response => {
console.log(response);
this.name = response[0].name
});
}
If you're using Http(which has been deprecated after the introduction of HttpClient in Angular 4.3 BTW), then:
import 'rxjs/add/operator/map';
empservicecall() {
return this.http.get("http://localhost:3000/api/Employee")
.map((res: any) => res.json());
}
And in your Component:
GetEmpName(){
this.Emp.empservicecall()
.subscribe(response => {
console.log(response);
this.name = response[0].name
});
}
answered Nov 20 at 19:14
SiddAjmera
12.4k31137
thanks for your valuable comment .Error is not coming but still I am not getting the value of name.it is showing blank value
– user1220461
Nov 20 at 19:23
@user1220461, try logging theresponseinside thesubscribeto the console and tell me what you're seeing on the screen? According to the OP, it was an array with just one object in it. This one object had a key namednamein it. Hence we assigned it to the class propertynameby writingthis.name = response[0].name
– SiddAjmera
Nov 20 at 19:24
.it is showing error response.json is not a function
– user1220461
Nov 20 at 19:29
What is the type ofhttpin your code? Is itHttporHttpClient?
– SiddAjmera
Nov 20 at 19:32
now I am using HttpClient . error is gone and the result in console is coming like this 0: {_id: 5, name:"ram,shyam,kamal,kishore"}
– user1220461
Nov 20 at 19:36
|
show 5 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399901%2fhow-to-fetch-data-from-json-in-angular-4%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The solution to your issue completely depends on which version of Angular you are on and whether you're using Http or HttpClient.
If you're using HttpClient, then:
empservicecall() {
return this.http.get("http://localhost:3000/api/Employee");
}
And in your Component:
GetEmpName(){
this.Emp.empservicecall()
.subscribe(response => {
console.log(response);
this.name = response[0].name
});
}
If you're using Http(which has been deprecated after the introduction of HttpClient in Angular 4.3 BTW), then:
import 'rxjs/add/operator/map';
empservicecall() {
return this.http.get("http://localhost:3000/api/Employee")
.map((res: any) => res.json());
}
And in your Component:
GetEmpName(){
this.Emp.empservicecall()
.subscribe(response => {
console.log(response);
this.name = response[0].name
});
}
answered Nov 20 at 19:14
SiddAjmera
12.4k31137
thanks for your valuable comment .Error is not coming but still I am not getting the value of name.it is showing blank value
– user1220461
Nov 20 at 19:23
@user1220461, try logging theresponseinside thesubscribeto the console and tell me what you're seeing on the screen? According to the OP, it was an array with just one object in it. This one object had a key namednamein it. Hence we assigned it to the class propertynameby writingthis.name = response[0].name
– SiddAjmera
Nov 20 at 19:24
.it is showing error response.json is not a function
– user1220461
Nov 20 at 19:29
What is the type ofhttpin your code? Is itHttporHttpClient?
– SiddAjmera
Nov 20 at 19:32
now I am using HttpClient . error is gone and the result in console is coming like this 0: {_id: 5, name:"ram,shyam,kamal,kishore"}
– user1220461
Nov 20 at 19:36
|
show 5 more comments
The solution to your issue completely depends on which version of Angular you are on and whether you're using Http or HttpClient.
If you're using HttpClient, then:
empservicecall() {
return this.http.get("http://localhost:3000/api/Employee");
}
And in your Component:
GetEmpName(){
this.Emp.empservicecall()
.subscribe(response => {
console.log(response);
this.name = response[0].name
});
}
If you're using Http(which has been deprecated after the introduction of HttpClient in Angular 4.3 BTW), then:
import 'rxjs/add/operator/map';
empservicecall() {
return this.http.get("http://localhost:3000/api/Employee")
.map((res: any) => res.json());
}
And in your Component:
GetEmpName(){
this.Emp.empservicecall()
.subscribe(response => {
console.log(response);
this.name = response[0].name
});
}
answered Nov 20 at 19:14
SiddAjmera
12.4k31137
thanks for your valuable comment .Error is not coming but still I am not getting the value of name.it is showing blank value
– user1220461
Nov 20 at 19:23
@user1220461, try logging theresponseinside thesubscribeto the console and tell me what you're seeing on the screen? According to the OP, it was an array with just one object in it. This one object had a key namednamein it. Hence we assigned it to the class propertynameby writingthis.name = response[0].name
– SiddAjmera
Nov 20 at 19:24
.it is showing error response.json is not a function
– user1220461
Nov 20 at 19:29
What is the type ofhttpin your code? Is itHttporHttpClient?
– SiddAjmera
Nov 20 at 19:32
now I am using HttpClient . error is gone and the result in console is coming like this 0: {_id: 5, name:"ram,shyam,kamal,kishore"}
– user1220461
Nov 20 at 19:36
|
show 5 more comments
The solution to your issue completely depends on which version of Angular you are on and whether you're using Http or HttpClient.
If you're using HttpClient, then:
empservicecall() {
return this.http.get("http://localhost:3000/api/Employee");
}
And in your Component:
GetEmpName(){
this.Emp.empservicecall()
.subscribe(response => {
console.log(response);
this.name = response[0].name
});
}
If you're using Http(which has been deprecated after the introduction of HttpClient in Angular 4.3 BTW), then:
import 'rxjs/add/operator/map';
empservicecall() {
return this.http.get("http://localhost:3000/api/Employee")
.map((res: any) => res.json());
}
And in your Component:
GetEmpName(){
this.Emp.empservicecall()
.subscribe(response => {
console.log(response);
this.name = response[0].name
});
}
answered Nov 20 at 19:14
SiddAjmera
12.4k31137
The solution to your issue completely depends on which version of Angular you are on and whether you're using Http or HttpClient.
If you're using HttpClient, then:
empservicecall() {
return this.http.get("http://localhost:3000/api/Employee");
}
And in your Component:
GetEmpName(){
this.Emp.empservicecall()
.subscribe(response => {
console.log(response);
this.name = response[0].name
});
}
If you're using Http(which has been deprecated after the introduction of HttpClient in Angular 4.3 BTW), then:
import 'rxjs/add/operator/map';
empservicecall() {
return this.http.get("http://localhost:3000/api/Employee")
.map((res: any) => res.json());
}
And in your Component:
GetEmpName(){
this.Emp.empservicecall()
.subscribe(response => {
console.log(response);
this.name = response[0].name
});
}
answered Nov 20 at 19:14
SiddAjmera
12.4k31137
edited Nov 20 at 19:33
answered Nov 20 at 19:14
SiddAjmera
12.4k31137
answered Nov 20 at 19:14
SiddAjmera
12.4k31137
answered Nov 20 at 19:14
SiddAjmera
12.4k31137
12.4k31137
thanks for your valuable comment .Error is not coming but still I am not getting the value of name.it is showing blank value
– user1220461
Nov 20 at 19:23
@user1220461, try logging theresponseinside thesubscribeto the console and tell me what you're seeing on the screen? According to the OP, it was an array with just one object in it. This one object had a key namednamein it. Hence we assigned it to the class propertynameby writingthis.name = response[0].name
– SiddAjmera
Nov 20 at 19:24
.it is showing error response.json is not a function
– user1220461
Nov 20 at 19:29
What is the type ofhttpin your code? Is itHttporHttpClient?
– SiddAjmera
Nov 20 at 19:32
now I am using HttpClient . error is gone and the result in console is coming like this 0: {_id: 5, name:"ram,shyam,kamal,kishore"}
– user1220461
Nov 20 at 19:36
|
show 5 more comments
thanks for your valuable comment .Error is not coming but still I am not getting the value of name.it is showing blank value
– user1220461
Nov 20 at 19:23
@user1220461, try logging theresponseinside thesubscribeto the console and tell me what you're seeing on the screen? According to the OP, it was an array with just one object in it. This one object had a key namednamein it. Hence we assigned it to the class propertynameby writingthis.name = response[0].name
– SiddAjmera
Nov 20 at 19:24
.it is showing error response.json is not a function
– user1220461
Nov 20 at 19:29
What is the type ofhttpin your code? Is itHttporHttpClient?
– SiddAjmera
Nov 20 at 19:32
now I am using HttpClient . error is gone and the result in console is coming like this 0: {_id: 5, name:"ram,shyam,kamal,kishore"}
– user1220461
Nov 20 at 19:36
thanks for your valuable comment .Error is not coming but still I am not getting the value of name.it is showing blank value
– user1220461
Nov 20 at 19:23
thanks for your valuable comment .Error is not coming but still I am not getting the value of name.it is showing blank value
– user1220461
Nov 20 at 19:23
@user1220461, try logging the
response inside the subscribe to the console and tell me what you're seeing on the screen? According to the OP, it was an array with just one object in it. This one object had a key named name in it. Hence we assigned it to the class property name by writing this.name = response[0].name– SiddAjmera
Nov 20 at 19:24
@user1220461, try logging the
response inside the subscribe to the console and tell me what you're seeing on the screen? According to the OP, it was an array with just one object in it. This one object had a key named name in it. Hence we assigned it to the class property name by writing this.name = response[0].name– SiddAjmera
Nov 20 at 19:24
.it is showing error response.json is not a function
– user1220461
Nov 20 at 19:29
.it is showing error response.json is not a function
– user1220461
Nov 20 at 19:29
What is the type of
http in your code? Is it Http or HttpClient?– SiddAjmera
Nov 20 at 19:32
What is the type of
http in your code? Is it Http or HttpClient?– SiddAjmera
Nov 20 at 19:32
now I am using HttpClient . error is gone and the result in console is coming like this 0: {_id: 5, name:"ram,shyam,kamal,kishore"}
– user1220461
Nov 20 at 19:36
now I am using HttpClient . error is gone and the result in console is coming like this 0: {_id: 5, name:"ram,shyam,kamal,kishore"}
– user1220461
Nov 20 at 19:36
|
show 5 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399901%2fhow-to-fetch-data-from-json-in-angular-4%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What's the exact version of Angular that you're using?
– SiddAjmera
Nov 20 at 19:09
Did you try
response[0].name?– Oen44
Nov 20 at 19:09
@SiddAjmer I am using angular 4
– user1220461
Nov 20 at 19:10
4. what? 4.0 or 4.3?
– SiddAjmera
Nov 20 at 19:10
Does localhost:3000/api/Employee only return the employee's name?
– schlonzo
Nov 20 at 19:10