Utilizing Angular, I have set up a get request to retrieve live data. My goal is to then showcase this data on the home page.
Here is the code snippet from my controller:
$scope.holder = [];
$http.get('url').success(function(data){
$scope.lines = data.lines;
$.each($scope.lines, function(name){
$scope.holder.push(this.friendly_name);
$scope.holder.push(this.status);
});
});
});
After fetching the data, the $scope.holder array contains the following information:
["Bakerloo", "Good service", "Central", "Part closure", "Circle", "Good service", "District", "Part closure", "Hammersmith & City", "Good service"]
This is how my HTML appears:
<body ng-controller="tubeController">
<div ng-repeat="item in holder track by $index">
{{item}}
</div>
</body>
When rendered on the webpage, each element of the array is displayed within its own div as shown below:
<div>Bakerloo</div>
<div>Good Service</div>
<div>Central</div>
<div>Part closure</div>
My objective is to group the elements in pairs so that each div includes two items from the array.
I envision the page layout like this:
<div>Bakerloo Good service</div>
<div>Central Part closure</div>
I have experimented with various approaches and explored multiple solutions on Stack Overflow, but haven't been successful yet. Any assistance would be greatly appreciated. Thank you.