Tech
Forums
Jobs
Books
Events
Interviews
Live
More
Learn
Training
Career
Members
Videos
News
Blogs
Login
Sign Up
Ask Question
1
Reply
!No Error but not fetching the data from url in angular2
Karthik Kumar
Apr 19 2017 2:01 AM
310
Hi am trying to fetch some data in from json file using api url..No error showing but not fetching the data.please take a look and let me know what mistake I did
model.ts
export
class
SaveDetails
{
constructor
(
public
ID
:
string
,
public
param1
:
string
,
public
param2
:
string
,
public
param3
:
string
,
public
param4
:
string
,
public
param5
:
string
,
public
param6
:
string
) { }
}
fetch.json class
[
{
"ID"
:
1
,
"param1"
:
"MarketMuchukunnu"
},
{
"ID"
:
2
,
"param2"
:
"MarketMuchukunnu"
},
{
"ID"
:
3
,
"param3"
:
"MarketThikkodi"
},
{
"ID"
:
4
,
"param4"
:
"MarketKoyilothumpadi"
},
{
"ID"
:
5
,
"param5"
:
"MarketetIlanjithara"
},
{
"ID"
:
6
,
"param6"
:
"MarketetIlanjithara"
}
]
my service
import
{
Injectable
}
from
'@angular/core'
;
import
{
Http
,
Request
,
RequestMethod
,
Response
,
RequestOptions
,
Headers
}
from
'@angular/http'
;
import
'rxjs/add/operator/map'
;
import
{
Observable
}
from
'rxjs/Observable'
;
import
{
SaveDetails
}
from
'./SaveDetails'
;
@
Injectable
()
export
class
Uraxservice
{
private
_url
:
string
=
"app/MarketTwoDetails.json"
private
url2
:
string
=
"app/fetch.json"
constructor
(
private
_httpurl
:
Http
){
}
GetUraxDetails
(){
return
[
{
"id"
:
1
,
"name"
:
'MarketIndia'
},
{
"id"
:
2
,
"name"
:
'MarketAustralia'
},
{
"id"
:
3
,
"name"
:
'MarketBrazil'
},
{
"id"
:
4
,
"name"
:
'MarketRussia'
},
{
"id"
:
5
,
"name"
:
'MarketUSA'
}
]
}
GetDropdownTwo
(){
return
this
.
_httpurl
.
get
(
this
.
_url
)
.
map
((
response
:
Response
)
=>
response
.
json
());
//.map((res:Response) => res.json());
}
//Get
getContacts
():
Observable<SaveDetails[]>
{
//debugger
return
this
.
_httpurl
.
get
(
this
.
url2
)
.
map
(
res
=>
<
SaveDetails
[]>
res
.
json
())
}
//Get
//getContacts(): Observable<SaveDetails[]> {
//debugger
// return this._httpurl.get(this.url2)
// .map(res => <SaveDetails[]>res.json())
}
component.ts
import
{
Component
,
OnInit
}
from
'@angular/core'
;
import
{
list1
}
from
'./app.marketone'
;
import
{
Uraxservice
}
from
'./urax.service'
;
import
{
SaveDetails
}
from
'./SaveDetails'
;
@
Component
({
selector:
'my-app'
,
templateUrl:
'../app/fetch.html'
,
styleUrls:
[
'app/app.component.css'
],
providers:
[
Uraxservice
]
})
export
class
AppComponent
implements
OnInit
{
selectedlist1
:
list1
;
listA
=[]
listB
=[]
public
contacts
:
SaveDetails
[];
constructor
(
private
_uraxservice
:
Uraxservice
){}
ngOnInit
()
{
this
.
listA
=
this
.
_uraxservice
.
GetUraxDetails
();
this
.
_uraxservice
.
GetDropdownTwo
()
.
subscribe
(
res_ofDTwo
=>this
.
listB
=
res_ofDTwo
);
// this.getContacts();
//Get All
}
getContacts
() {
//debugger
this
.
_uraxservice
.
getContacts
().
subscribe
(
contacts
=>
this
.
contacts
=
contacts
);
}
}
html
<
div
>
<
h3
>
fetching..!
</
h3
>
<
p
>
</
p
>
<
table
class
=
"table table-striped"
style
=
"width: 100%;"
>
<
tbody
>
<
tr
><
th
>
param1
</
th
>
<
th
>
param2
</
th
>
<
th
>
param3
</
th
>
<
th
>
param4
</
th
>
<
th
>
param5
</
th
>
<
th
>
param6
</
th
></
tr
>
<
tr
*
ngFor
=
"let SaveDetails of contacts"
>
<
tr
><
th
>
{{SaveDetails?.ID}}
</
th
>
<
th
>
{{SaveDetails?.param1}}
</
th
>
<
th
>
{{SaveDetails?.param2}}
</
th
>
<
th
>
{{SaveDetails?.param3}}
</
th
>
<
th
>
{{SaveDetails?.param4}}
</
th
>
<
th
>
{{SaveDetails?.param5}}
</
th
>
<
th
>
{{SaveDetails?.param6}}
</
th
></
tr
>
</
tbody
>
</
table
>
</
div
>
Reply
Upload Source Code
Select only zip and rar file.
Post
Reset
Answers (
1
)
angular v1+ and asp.net mvc projects
display users details based on selected state in mvc angulr