Disclaimer, this question was written when I was brand new to both HTML and JS. If you are here looking for help for an issue, this may not be helpful as my code was pretty much a mess. Apologies for the inconvenience. The question will stay up as per site guidelines.
I am attempting to use create a table using angularJS which draws information from a js list of cars to present them in a table. Per the specifications this must be done using Angular, despite the easier ways existing.
My current issue, is that instead of outputting the information, each column displays the formatting code ({{ car.Model }} , for example).
My current code is as follows:
<body ng-app="">
<h2>CARS IN THE LOT:</h2>
<div class="container" ng-app="sortApp" ng-controller="mainController">
<table class="table table-bordered table-striped">
<thead>
<tr>
<td>
Manufacturer
</td>
<td>
Model
</td>
<td>
<a href="#" ng-click = "sortReverse = !sortReverse">
Year
<span ng-show = "!sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
Stock
</td>
<td>
Price
</a>
</td>
<td>
Option
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="roll in cars | orderBy:sortType:sortReverse | filter:searchCar">
<td>{{ car.Manufacturer }}</td>
<td>{{ car.Model }}</td>
<td>{{ car.Year }}</td>
<td>{{ car.Stock }}</td>
<td>{{ car.Price }}</td>
<td>{{ car.Option }}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="cars.js"></script>
</body>
</html>
angular.module('sortApp', [])
.controller('mainController', function($scope) {
$scope.sortType = 'price'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.searchCar = ''; // set the default search/filter term
//BUTTON
var button = document.createElement("button");
button.innerHTML = "increment";
button.addEventListener ("click", incrementStock(0));
// create the list of cars
$scope.cars = [
{ Manufacturer: cars[0].Manufacturer, Model: cars[0].Model, Year: cars[0].Year , Stock: cars[0].Stock , Price: cars[0].Stock , Option: button},
{ Manufacturer: cars[1].Manufacturer, Model: cars[1].Model, Year: cars[1].Year , Stock: cars[1].Stock , Price: cars[1].Stock , Option: button},
{ Manufacturer: cars[2].Manufacturer, Model: cars[2].Model, Year: cars[2].Year , Stock: cars[2].Stock , Price: cars[2].Stock , Option: button},
{ Manufacturer: cars[3].Manufacturer, Model: cars[3].Model, Year: cars[3].Year , Stock: cars[3].Stock , Price: cars[3].Stock , Option: button},
{ Manufacturer: cars[4].Manufacturer, Model: cars[4].Model, Year: cars[4].Year , Stock: cars[4].Stock , Price: cars[4].Stock , Option: button},
{ Manufacturer: cars[5].Manufacturer, Model: cars[5].Model, Year: cars[5].Year , Stock: cars[5].Stock , Price: cars[5].Stock , Option: button},
{ Manufacturer: cars[6].Manufacturer, Model: cars[6].Model, Year: cars[6].Year , Stock: cars[6].Stock , Price: cars[6].Stock , Option: button},
{ Manufacturer: cars[7].Manufacturer, Model: cars[7].Model, Year: cars[7].Year , Stock: cars[7].Stock , Price: cars[7].Stock , Option: button},
{ Manufacturer: cars[8].Manufacturer, Model: cars[8].Model, Year: cars[8].Year , Stock: cars[8].Stock , Price: cars[8].Stock , Option: button},
{ Manufacturer: cars[9].Manufacturer, Model: cars[9].Model, Year: cars[9].Year , Stock: cars[9].Stock , Price: cars[9].Stock , Option: button}
];
});
function incrementStock(number){
alert("function called");
}
With cars.js being as follows:
var cars = [
{"manufacturer":"Toyota",
"model":"Rav4",
"year":2008,
"stock":3,
"price":8500},
{"manufacturer":"Toyota",
"model":"Camry",
"year":2009,
"stock":2,
"price":6500},
{"manufacturer":"Toyota",
"model":"Tacoma",
"year":2016,
"stock":1,
"price":22000},
{"manufacturer":"BMW",
"model":"i3",
"year":2012,
"stock":5,
"price":12000},
{"manufacturer":"Chevy",
"model":"Malibu",
"year":2015,
"stock":2,
"price":10000},
{"manufacturer":"Honda",
"model":"Accord",
"year":2013,
"stock":1,
"price":9000},
{"manufacturer":"Hyundai",
"model":"Elantra",
"year":2013,
"stock":2,
"price":7000},
{"manufacturer":"Chevy",
"model":"Cruze",
"year":2012,
"stock":2,
"price":5500},
{"manufacturer":"Dodge",
"model":"Charger",
"year":2013,
"stock":2,
"price":16000},
{"manufacturer":"Ford",
"model":"Mustang",
"year":2009,
"stock":1,
"price":8000},
]
You are iterating "roll in cars" but instead using "car" while printing it. Replace it as (ng-repeat = "roll in cars" to ng-repeat = "car in cars"). In original var cars collection you have used small names for property and while assigning it to $scope.cars you are writing initial letter of property in capital (e.g. "Manufacturer: cars[0].Manufacturer" it should be "Manufacturer: cars[0].manufacturer"). Additionally I have refactored your code to iterate cars in loop and push it to $scope.cars.
angular.module('sortApp', [])
.controller('mainController', function($scope) {
$scope.sortType = 'price'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.searchCar = ''; // set the default
var button = document.createElement("button");
button.innerHTML = "increment";
button.addEventListener("click", incrementStock(0));
var cars = [{
"manufacturer": "Toyota",
"model": "Rav4",
"year": 2008,
"stock": 3,
"price": 8500
},
{
"manufacturer": "Toyota",
"model": "Camry",
"year": 2009,
"stock": 2,
"price": 6500
},
{
"manufacturer": "Toyota",
"model": "Tacoma",
"year": 2016,
"stock": 1,
"price": 22000
},
{
"manufacturer": "BMW",
"model": "i3",
"year": 2012,
"stock": 5,
"price": 12000
},
{
"manufacturer": "Chevy",
"model": "Malibu",
"year": 2015,
"stock": 2,
"price": 10000
},
{
"manufacturer": "Honda",
"model": "Accord",
"year": 2013,
"stock": 1,
"price": 9000
},
{
"manufacturer": "Hyundai",
"model": "Elantra",
"year": 2013,
"stock": 2,
"price": 7000
},
{
"manufacturer": "Chevy",
"model": "Cruze",
"year": 2012,
"stock": 2,
"price": 5500
},
{
"manufacturer": "Dodge",
"model": "Charger",
"year": 2013,
"stock": 2,
"price": 16000
},
{
"manufacturer": "Ford",
"model": "Mustang",
"year": 2009,
"stock": 1,
"price": 8000
},
];
// create the list of cars
$scope.cars = [];
for (var i = 0; i < cars.length; i++) {
var carObj = {
Manufacturer: cars[i].manufacturer,
Model: cars[i].model,
Year: cars[i].year,
Stock: cars[i].stock,
Price: cars[i].price,
Option: button
}
$scope.cars.push(carObj);
}
});
function incrementStock(number) {
alert("function called");
}body{background-color: #95b8cf;}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 3px solid #000000;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="sortApp">
<h2>CARS IN THE LOT:</h2>
<div class="container" ng-app="sortApp" ng-controller="mainController">
<table class="table table-bordered table-striped">
<thead>
<tr>
<td>
Manufacturer
</td>
<td>
Model
</td>
<td>
<a href="#" ng-click="sortReverse = !sortReverse">
Year
<span ng-show = "!sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
Stock
</td>
<td>
Price
</a>
</td>
<td>
Option
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="car in cars | orderBy:sortType:sortReverse | filter:searchCar">
<td>{{ car.Manufacturer }}</td>
<td>{{ car.Model }}</td>
<td>{{ car.Year }}</td>
<td>{{ car.Stock }}</td>
<td>{{ car.Price }}</td>
<td>{{ car.Option }}</td>
</tr>
</tbody>
</table>
</div>
</body>