AngularJS combined with Ionic framework

Here is a snippet of my controller code:

angular.module('app.controllers', [])

.controller('rServationCtrl', function($scope) {

})

.controller('voitureCtrl',['$scope' ,'Voiture', function($scope,Voiture) {
  
$scope.VoituresData = Voiture.getVoituresData();
console.log($scope.VoituresData);
}])

And this represents my service implementation:

angular.module('app.services', [])


.factory('Voiture', [function(){

var VoituresData = JSON.parse([
  {
    "idVoiture": 123,
    "numChassee": 1234,
    "numImmatricule": "120",
    "kilometrage": 0,
    "photo": null,
    "couleur": "Noire",
    "nbPlaces": 5,
    "categorie": "sport",
    "date_assurance": "2016-07-28T00:00:00.000Z",
    "date_vignette": "2016-07-28T00:00:00.000Z",
    "date_visite_tecknique": "2016-06-30T00:00:00.000Z",
    "prixLocation": 1500,
    "disponibilite": true,
    "Modele_idModele": 123457,
    "Modele": {
      "idModele": 123457,
      "nom": "A4",
      "marque": "Audi",
      "carburant": "Essence",
      "puissance": 4,
      "prixGPS": 25,
      "prixChaisse": 25,
      "prixChauffeur": 25
    }
  },  {
    "idVoiture": 150,
    "numChassee": null,
    "numImmatricule": null,
    "kilometrage": 10000,
    "photo": null,
    "couleur": null,
    "nbPlaces": null,
    "categorie": "sport",
    "date_assurance": "2016-06-17T00:00:00.000Z",
    "date_vignette": "2016-06-24T00:00:00.000Z",
    "date_visite_tecknique": "2016-03-26T00:00:00.000Z",
    "prixLocation": null,
    "disponibilite": null,
    "Modele_idModele": 123456,
    "Modele": {
      "idModele": 123456,
      "nom": " 508",
      "marque": "PEUGEOT",
      "carburant": "Essence",
      "puissance": 4,
      "prixGPS": 25,
      "prixChaisse": 25,
      "prixChauffeur": 25
    }
  }
]);


function getVoituresData (){
    return VoituresData;
}
return{
 getVoituresData : getVoituresData
};


}]);

Including the controller in the html view and all scripts in index.html results in an error being displayed in the console:

SyntaxError: Unexpected token o
    at Object.parse (native)
    at Object.<anonymous> ([http://localhost:8100/js/services.js:6:25)
    at Object.invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:17762:17)
    at Object.enforcedReturnValue \[as $get\] (http://localhost:8100/lib/ionic/js/ionic.bundle.js:17615:37)
    at Object.invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:17762:17)
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:17580:37
    at getService (http://localhost:8100/lib/ionic/js/ionic.bundle.js:17721:39)
    at invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:17753:13)
    at Object.instantiate (http://localhost:8100/lib/ionic/js/ionic.bundle.js:17770:27)
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:22326:28(anonymous function) @ ionic.bundle.js:25642(anonymous function) @ ionic.bundle.js:22421Scope.$broadcast @ ionic.bundle.js:29479$state.transition.resolved.then.$state.transition @ ionic.bundle.js:49321processQueue @ ionic.bundle.js:27879(anonymous function) @ ionic.bundle.js:27895Scope.$eval @ ionic.bundle.js:29158Scope.$digest @ ionic.bundle.js:28969Scope.$apply @ ionic.bundle.js:29263(anonymous function) @ ionic.bundle.js:31030completeOutstandingRequest @ ionic.bundle.js:18706(anonymous function) @ ionic.bundle.js:18978][1]
javascriptangularjsionic-framework

Answer №1

Make sure to adjust the parameter in JSON.parse() to be a string for it to work correctly.

Visit this link to learn more about JSON.parse()

var CarsData = JSON.parse('[
  {
    "idCar": 123,
    "chassisNumber": 1234,
    "registrationNumber": "120",
    "mileage": 0,
    "photo": null,
    "color": "Black",
    "seats": 5,
    "category": "sport",
    "insuranceDate": "2016-07-28T00:00:00.000Z",
    "vignetteDate": "2016-07-28T00:00:00.000Z",
    "technicalInspectionDate": "2016-06-30T00:00:00.000Z",
    "rentalPrice": 1500,
    "availability": true,
    "Model_idModel": 123457,
    "Model": {
      "idModel": 123457,
      "name": "A4",
      "brand": "Audi",
      "fuelType": "Gasoline",
      "power": 4,
      "GPSPrice": 25,
      "SeatPrice": 25,
      "DriverPrice": 25
    }
  },  {
    "idCar": 150,
    "chassisNumber": null,
    "registrationNumber": null,
    "mileage": 10000,
    "photo": null,
    "color": null,
    "seats": null,
    "category": "sport",
    "insuranceDate": "2016-06-17T00:00:00.000Z",
    "vignetteDate": "2016-06-24T00:00:00.000Z",
    "technicalInspectionDate": "2016-03-26T00:00:00.000Z",
    "rentalPrice": null,
    "availability": null,
    "Model_idModel": 123456,
    "Model": {
      "idModel": 123456,
      "name": "508",
      "brand": "PEUGEOT",
      "fuelType": "Gasoline",
      "power": 4,
      "GPSPrice": 25,
      "SeatPrice": 25,
      "DriverPrice": 25
    }
  }
]');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The ReactDom reference is not defined when working with React and webpack

After following a tutorial on React and webpack from jslog.com, I encountered issues with using updated syntax such as using ReactDom to call render instead of the deprecated 'React.renderComponent'. I tried running: npm install --save react-do ...

javascriptreactjswebpack

Having trouble executing "npm install" following the clone from GitHub in React

After cloning a repository from GitHub, I attempted to run "npm install" but encountered the following error: https://i.sstatic.net/QM4RZ.png Since the project is still in development, should I install or add anything else to successfully run it? ...

javascriptreactjsnpmruntime-error

Grid of pictures resembling a masonry pattern

As I ponder this intricate dilemma, I am convinced that there must be a simple solution or alternative approach to finding the answer. My goal is to create a grid of random images without any gaps between them. I have an array of images that I want to dis ...

phpjavascriptjquerymath

I'm interested in learning how to access and display nested JSON data in Angular using $scope. Specifically, I want to know

Hello everyone, I have a controller set up with some route ID for navigating my list to another page. Here is how my controller looks: RecordsControllers.controller('DetailsController', ['$scope', '$http','$routeParams&a ...

angularjsjson

What is the best way to trigger a function (or directive) specifically when a tab is chosen in AngularJS?

Just starting to learn angularjs and I've created a page with 2 tabs using directives. I'm using $http to fetch json data from my server. My issue is that I don't want to make a request to the server until the user decides to view the other ...

jqueryangularjsangularjs-directiveangular-directive

Having trouble with Ajax retrieving the updated JSON file version

I'm pretty new to coding and terminology in general, so I've done my best to simplify my code, although it might still have redundancies. Appreciate your patience in advance. My task involves using an ajax and php script to write data to a file ...

javascriptphpjqueryjsonajax

Tips for integrating custom code into your Angular cli service worker

Although I have successfully generated and configured the service worker using a config file generated by Angular CLI, I am struggling to find documentation on how to add custom code to the ngsw-worker.js file. I want to include functions such as push no ...

javascriptangularangular-cliservice-worker

Unable to retrieve the information using ng-repeat directive in AngularJS

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="Scripts/Script.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/ ...

asp.netangularjs

Can one access non-static methods within React Navigation's navigationOptions?

Within my form, I am trying to position a submit button to the right of the header that triggers the same method as the submit button located at the bottom of the form. React Navigation necessitates the declaration of a static method named navigationOptio ...

javascriptreactjsreact-nativeecmascript-6

Mastering the proper usage of AngularJS routeParams

I need assistance with correctly using routeParams. In my app.js file, I have written the following code: .when('/product', { templateUrl: 'views/product.html', controller: 'ProductController', title: '' ...

angularjsroutes

The function Sequelize.create() does not exist

My attempts to push my DB with sequelize are not working, even though I have set up this schema for the DB: module.exports = (sequelize, DataTypes) => { const Problems = sequelize.define("Posts", { theme: { type: DataTypes.ST ...

javascriptmysqlexpresssequelize.js

Having trouble understanding why my JavaScript for loop is looping only once

I'm having trouble getting my for loop to output each character of a string argument one at a time. However, when I test the code, it only displays the first character and then stops. I'm not sure what is causing it to only loop through once. Be ...

javascriptfor-loop

How can I implement image visibility toggling on click with AngularJS version 1?

My goal is to create a feature where clicking on an image will bring it to the front, hiding all other images behind it. I have found a code reference for achieving similar functionality using jQuery. Click on image to move to front? Can anyone provide ...

javascriptcssangularjsangularjs-1.5

Adjust the size of an HTML image for printing using a JavaScript window.print() function

On my website, I have a print option set up where specific elements are hidden using @media. How can I adjust the size of an image within the @media query when my JavaScript print function is triggered? I am able to modify a regular div element easily, but ...

javascriptphphtmlcssimage

Generate a single template without using ng-repeat

As a beginner in Angular, my goal is to display a set of templates using ng repeat: <ion-item ng-repeat="item in items" ng-click="loadSingle(item)"> Hello, {{item.name}}! </ion-item> Later on, I intend to show the object in a different temp ...

jsonangularjstemplatingionic-framework

I have successfully implemented the Context API in my Next.js project and everything is functioning smoothly. However, I encountered an error while using TypeScript

Currently, I am working on a Next.js project that involves using the Context API. The data fetched from the Context API works perfectly fine, but I am encountering errors with TypeScript and I'm not sure how to resolve them. Error: Property openDialo ...

javascriptreactjsnext.jsreact-context

The error message "Create controller with service — Get... is not a function" indicates that

Within my ASP.NET Boilerplate project, the following code snippet is present: (function () { appModule.controller('augustinum.views.kostenstelle.index', [ '$scope', '$uibModal', 'abp.services.app.kostenstelle ...

javascriptasp.netangularjsangularjs-scopeasp.net-boilerplate

Require.js and R.js optimizer overlooks shimming configuration

I am facing an issue where R.js is not loading my shim properly, causing jQuery to load before tinyMCE which results in tiny being initialized before it has fully loaded. How can I resolve this problem? build-js.js: var requirejs = require('requirej ...

javascriptnode.jsrequirejs

Tips for making a sidebar sticky when scrolling

In order to keep the right-side bar fixed, I have implemented this javaScript function: <script type="text/javascript> $(document).ready(function () { var top = $('#rightsidebar-wrapper').offset().top - parseFloat($('#rightsideb ...

javascriptcsshtmlposition

Unusual happenings detected in Magellan Fixed with Foundation 5

I need help creating a product summary sidebar similar to Apple's. I'm using Magellan but it seems to break the page when the width is below 960 pixels. It might be related to the table, but I'm not sure. Any suggestions or assistance would ...

javascriptcssresponsive-designzurb-foundationmagellan