0

2021 EDIT:

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.

ORIGINAL POST

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},
]
asked Feb 28, 2020 at 1:13
4
  • where is the car.js? can you provide a jsfiddle of it? and why not create a function in angular way? there are lots of error in your code that's why it's not working properly Commented Feb 28, 2020 at 2:14
  • 1
    When the app displays double curly brackets ({{ }}), it means the framework failed to load the app, usually because of a JavaScript error. Check the Developer Console for errors. Commented Feb 28, 2020 at 2:33
  • Read How do I ask and answer homework questions? Commented Feb 28, 2020 at 2:39
  • When the HTML has two ng-app directives, the framework ignores the second ng-app directive. 1. Commented Feb 28, 2020 at 2:50

1 Answer 1

1

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>

answered Feb 28, 2020 at 4:25
Sign up to request clarification or add additional context in comments.

1 Comment

@Rsk22 if this answers your query, then please accept and vote it.

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.