Transformation of a JsonString into an array with the help of Angular.js

Question

Transformation of a JsonString into an array with the help of Angular.js

I have a JsonString that contains information about different car models.

[{
    "mileage": 12033,
    "name": "Ford",
    "model": "Focus",
    "engine": "3 gophers on a treadmill",
    "color": "green"
}, {
    "mileage": 85000,
    "name": "Chevy",
    "model": "mailbu",
    "engine": "6 cylinder",
    "color": "Maroon"
}, {
    "mileage": 612033,
    "name": "Ford",
    "model": "F150",
    "engine": "6 cylinder",
    "color": "Green"
}, {
    "mileage": 89500,
    "name": "Pontiac",
    "model": "G6",
    "engine": "2 cylinder",
    "color": "Blue"
}, {
    "mileage": 17200,
    "name": "Pontiac",
    "model": "G8",
    "engine": "3 cylinder",
    "color": "Silver"
}, {
    "mileage": 308,
    "name": "Toyota",
    "model": "Forerunner",
    "engine": "6 cylinders",
    "color": "Grey"
}, {
    "mileage": 65328,
    "name": "Volvo",
    "model": "wagon",
    "engine": "8 cyclinders while not in test mode otherwise 2 bicycle pedals",
    "color": "Red"
}, {
    "mileage": 50,
    "name": "IKea",
    "model": "Ronde",
    "engine": "3 self propelled coasters",
    "color": "wood panelling"
}, {
    "mileage": 17200,
    "name": "Pontiac",
    "model": "Grand Am",
    "engine": "8 cylinder",
    "color": "rusty"
}]

Could someone assist me with converting this string into an array in angular.js? I've been trying for hours but couldn't figure it out. Appreciate the help in advance.

javascript angularjs arrays json

Answer 1

Answer №1

To access the data in your view, you need to assign it within the app controller and then treat it like an array.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl"> 

<p>Check out today's featured cars below:</p>

<p ng-repeat="car in cars">{{car.name}} - {{car.model}}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.cars = [{
    "name": "Ford",
    "model": "Focus"
}, {
    "name": "Chevy",
    "model": "Malibu"
}, {
    "name": "Toyota",
    "model": "Corolla"
}];

});
</script>

</body>
</html>

Answer 2

To access the data in your view, you need to assign it within the app controller and then treat it like an array.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl"> 

<p>Check out today's featured cars below:</p>

<p ng-repeat="car in cars">{{car.name}} - {{car.model}}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.cars = [{
    "name": "Ford",
    "model": "Focus"
}, {
    "name": "Chevy",
    "model": "Malibu"
}, {
    "name": "Toyota",
    "model": "Corolla"
}];

});
</script>

</body>
</html>

Transformation of a JsonString into an array with the help of Angular.js

Answer №1

Similar questions

What is the best way to create a seamless Asynchronous loop?

Using Vue.js to iterate through a nested array from an object key

Learning to pull data from a JSON file using Java

Reduce the use of javascript by incorporating NPM specifically after publishing instead of during the building process

Modifying an image's height and width attributes with jQuery and CSS on click action

Transferring custom objects created by users from an Android application to an ASP.NET webservice using JSON

Storing a multidimensional array in a database using a foreach loop

Executing an HTTP request with JavaScript to interact with Salesforce

Scrolling automatically to a DIV is possible with jQuery, however, this feature is functional only on the initial

The anonymous function in the Google strategy is not being executed

Insert a record at the start of a data grid - JavaScript - jQuery

Resetting the Angular provider configuration whenever the service is injected into a different location

Ways to display every incomplete tree contained within a singular tree

Utilize JQuery to implement fading effects for clicked elements in a webpage

The post request with Postman is functional, however the AJAX post request is not working. I have thoroughly reviewed the client-side JavaScript

Unable to retrieve props from server-side page to client-side component in a Next.js application router

How can I declare CSS variables in Next.js components' module.css just like in global CSS?

Building connections in parse.com using various classes (JavaScript SDK)

The mobile-responsive dropdown navigation bar functions well on browsers with small widths, but does not work properly on my phone

Can the value in a JavaScript object be updated dynamically when a button is clicked?