In my GET method when I log $scope.room_image_id I am getting two values suppose 47 and 95.
$http({
method:'GET',
url: '=' +$scope.current_Hotel.hotel_id
}).then(function(response){
var roomdata = response.data;
$scope.roomdata = roomdata;
var roomtype = roomdata.data;
angular.forEach(roomtype, function(value, key){
$scope.room_image_id = value.image;
console.info($scope.room_image_id); <!--- HERE -->
});
and I am passing that value in another GET method and I am supposed to get two images. One from each id that I passed.
$http({
method: 'GET',
url: '&image_id=' + $scope.room_image_id
}).then(function (response) {
var imgdata = response.data;
var imgdata1 = imgdata.data.image_name;
$scope.room_image = "/" + imgdata1;
console.log(imgdata1);
}
Here's the JSON data when ID is 95
{
status: 200,
message: "Packages Found",
data: {
0: "495",
1: "0",
2: "uploads/950286957inbound-marketing-ss-1920-800x450.jpg",
image_id: "495",
hotel_id: "0",
image_name: "uploads/950286957inbound-marketing-ss-1920-800x450.jpg"
}
}
and here's the JSON data when ID is 45
{
status: 200,
message: "Packages Found",
data: {
0: "45",
1: "0",
2: "uploads/17081121512t13ry63443fg43416t46136.jpg",
image_id: "45",
hotel_id: "0",
image_name: "uploads/17081121512t13ry63443fg43416t46136.jpg"
}
}
But it only returns the first JSON data i.e., when ID is 95 but I am getting both ID's when I log $scope.room_image_id
Here's the markup:
<div class="row" ng-repeat="x in roomdata.data">
<div class="well well-sm">{{x.room_type}}<a href="#" data-toggle="modal" data-target="#room_detail{{$index}}" class="pull-right">Room Details</a>
</div>
<h5 class="pull-right">{{x.rack_price}}<br>Per room per night</h5>
<img ng-src="{{room_image}}">
</div>
Added the JSON for roomdata
{
status: 200,
message: "Packages Found",
data: [
{
room_type_id: "9",
hotel_id: "40",
room_type: "Delux",
total_rooms: "10",
max_people: "2",
max_child: "1",
rack_price: "2500",
description: "<p>Sea Facing</p> ",
image: "47",
extra_person: "1",
extra_child: "1",
tax_type: "2",
tax_name: "Service Tax",
tax_amount: "9",
},
{
room_type_id: "214",
hotel_id: "40",
room_type: "Super Delux",
total_rooms: "30",
max_people: "2",
max_child: "1",
rack_price: "3000",
description: "<p>Super Delux </p> ",
image: "495",
extra_person: "1",
extra_child: "1",
tax_type: "2",
tax_name: "Service Tax",
tax_amount: "10",
}
]
I am getting 47 and 495 from image in roomdata. Also when I log $scope.room_image_id I am getting 47 and 495.Check the forEach loop in the first GET method.
What I have tried:
<div class="row" ng-repeat="x in roomdata.data">
<div class="well well-sm">{{x.room_type}}{{x.image}}<a href="#" data-toggle="modal" data-target="#room_detail{{$index}}" class="pull-right">Room Details</a>
</div>
<h5 class="pull-right">{{x.rack_price}}<br>Per room per night</h5>
<img ng-src="{{room_image}}" ng-init=fetchImage(x.image)>
I tried passing the image id in a function and then fetch the data. Now I am getting both the images
Here's the function
$scope.fetchImage = function(value){
$http({
method: 'GET',
url: '&image_id=' + value
}).then(function (response) {
var imgdata = response.data;
var imgdata1 = imgdata.data.image_name;
$scope.room_image = "" + imgdata1;
console.info($scope.room_image);
});
};
The console now gives me two url's from which images are fetched
Example:
https:
https:
Now how do I use binding expression to display them.