First of all, I have to say that is my first time posting on StackOverflow.. So if I post on the wrong area, sorry.
I'm beginning with angularjs, and I'm struggling into two points. 1st I've to create a connection with my mysql, witch i wasn't able until now.. 2nd I've to display the content into the HTML page.
I'm using the following code, witch includes the app.js, page.html and data.json (I'll change that later to php if I'm allowed to.)
The app.js seems to work fine, but the view (page.html) isn't display any data..
App.js
app.controller('PatientListCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get('patients.json').success(function (data) {
$scope.patients = data;
});
$scope.orderProp = 'id';
}]);
patients.json
[
{
"id": 0,
"first_name": "John",
"last_name": "Abruzzi"
},
{
"id": 1,
"first_name": "Peter",
"last_name": "Burk"
}
]
Page.html
<!DOCTYPE html>
<html class="no-js" ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
</head>
<body>
<div data-ng-repeat="patient in patients">
{{patient.id}}{{patient.last_name}}{{patient.first_name}}{{patient.SSN}}{{patient.DOB}}
<div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Thanks for your attention.
You have not define the controller in the view
<div ng-controller="PatientListCtrl" data-ng-repeat="patient in patients">
<li> {{patient.id}} </li>
<div>
Here is the working Fiddle
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test AJAX</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function send()
{
var index = $('#index').val();
$(document).ready(function() {
$("#submit").click(function(event){
$.getJSON('bursa.json', function(jd) {
$('#Reserved').html('<p>' + jd.response[0].index + '</p>');
});
});
});
}
</script>
<body>
<form method="get">
Select <input type="text" id="index"><br>
<input type="button" id="submit" onclick="send()" value="Submit">
</form>
<div id="Reserved" style="border:1px solid red; height: 300px; width:400px"></div>
</body>
</html>
I'm a beginner with Jquery and I've been trying to get some data from some JSON file I created for a test. Basically what I want is to be able to allow the user to select the field he wants from the json document. My json file looks like this
"response": [
{
"c": "205.84",
"h": "206.70",
"l": "204.27",
"ch": "-1.57",
"cp": "-0.76%",
"t": "1611349199",
"s": "BA",
"cty": "united-states",
"ccy": "USD",
"exch": "NYSE",
"id": "1",
"tm": "2021-01-22 20:59:59"
},
If I try to print jd.response[0].cty for example it correctly shows "united-states", but what I want as I said is to allow the user to select his own field.. With what I've done so far it only shows "undefined". Thanks in advance for the help.
Instead of using .index, use [index]:
$('#Reserved').html('<p>' + jd.response[0][index] + '</p>');
Also called bracket notation
After several hours of research on google, I have not managed to find a tutorial that shows how to use vue.js to display the result of a sql query (for example SELECT in my case). I come to you because i need to know how i can retrieve and display the data back by the spring findAll () method in an html page with framwork vue.js.
Thank you in advance for your help.
Here is the html file in which I would like to display the data:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>List of school</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="test">
<h1>Result</h1>
<tr>
<td/>ID</td>
<td/>Description</td>
</tr>
<tr v-for="item in panier">
<td>{item.id}</td>
<td>{item.description}</td>
</tr>
</div>
<script src="http://cdn.jsdelivr.net/vue/1.0.10/vue.min.js"></script>
<script>
new Vue({
el: '#test',
data: {
panier: [
{ id: "1", description: "University"},
{ id: "2", description: "high school"}
],
}
});
</script>
</body>
</html>
The problem I do not know how to fill my basket with the data returned by the findAll () method of spring.I specify that this method returns me the data in JSON format. Like this :
{
id:1,
description:"University"
}
{
id:,
description:"University"
}
Here is my getAllType method :
#RequestMapping(value= "/getAllTypes", method = RequestMethod.GET)
public #ResponseBody Collection<Type> getAllTypes() {
return this.typeService.getAllTypes();
}
Please if possible with an example of how I should proceed.
I'm using AngularJs. I started to write simple controller that will output Hello world!
In my cribsControler.js code looked liked this:
angular
.module('ngCribs')
.controller('cribsController', function($scope){
$scope.hello = 'hello world';
});
and it worked. Then I changed my code to display details that are shown in the example below.
app.js
angular.module('ngCribs', ['ui.bootstrap']);
cribsController.js
angular
.module('ngCribs')
.controller('cribsController', function($scope){
$scope.cribs = [
{
"type": "condo",
"price": 22000,
"address": "nameOfStreet1",
"description": "description1"
},
{
"type": "hose",
"price": 54000,
"address": "nameOfStreet2",
"description": "description2"
},
{
"type": "cotage",
"price": 1000,
"address": "nameOfStreet3",
"description": "description3."
}
];
});
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
<title></title>
</head>
<body ng-app="ngCribs" ng-controller="cribsController">
<pre>{{ cribs | json}}</pre>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.min.js"></script>
<script src="app.js"></script>
<script src="scripts/cribsController.js"></script>
</html>
When I edited, saved, and than ran it in a browser I got a blank page. When I clicked view page source and then when I clicked on my script link: <script src="scripts/cribsController.js"></script>, I can see that it didn't update from "Hello World" to the display details.
What can I do to actually update it? Or maybe there is error in my code?
I development phase you should have the development console up. Press f12 to open It. Somewhere in the console you will find a setting that says something like: clear cache whille console is open(depends on which browser you use). Browser cache JavaScript files by default
Today I started fiddling with AngularJS for school. Almost instantly I got to a problem I cannot fix, and solutions on the internet did not help me.
I use a angular-seed project as skeleton of my project.
This results in two files in particular: the app.js and the view1.js which contains the controller I am using in my view1.html.
The idea is that I need to have an array of items that I can use globally on multiple views, so not necessarily only on view 1.
I made a controllers.js with the following content:
var todoAppControllers = angular.module('CarControllers', []);
todoAppControllers.controller('CarListController', ['$scope', '$http',
function($scope, $http) {
$scope.cars = [
{merk:'volkswagen', model : 'Up'},
{merk:'volkswagen', model : 'Golf'}
];
}]);
My html looks like this on the main index.html (I've ommitted some irrelevant code):
<html lang="en" ng-app="carApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
</body>
</html>
My app.js:
'use strict';
// Declare app level module which depends on views, and components
angular.module('carApp', [
'ngRoute',
'carApp.view1',
'CarControllers'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
And finally the page where I want to show my list of cars. Not that this is a partialview:
<p>Cars:</p>
<ul ng-controller="CarListController">
<li ng-repeat"car in cars">{{car.merk}} model: {{car.model}}</li>
</ul>
When I run npm and go to the application, I only see one bulletpoint (list item) with only model: (so no merk which is brand in Dutch nor the car.model).
How can I solve this? Thanks in advance
You have this:
<li ng-repeat"car in cars">
You're missing an equal symbol:
<li ng-repeat="car in cars">
I'm trying to pull some time and temperature data into Amcharts. The data is regularly collected temperature data (every 10 minutes). The data displays but appears to be stacked on top of each other. See example image:
Example
The data format (from a php script) is:
[{"timestamp":"2015-10-26 04:44:33","temp":24.9,"ID":"AA"},{"timestamp":"2015-10-26 04:54:31","temp":25.1,"ID":"AA"},{"timestamp":"2015-10-26 05:04:30","temp":25.2,"ID":"AA"}.....
The script code I am using is:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Indoor temperature</title>
<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/serial.js" type="text/javascript"></script>
<script src="amcharts/amstock.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js">
</script>
<link rel="stylesheet" href="amcharts/style.css" type="text/css">
<script>
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"dataLoader": {
"url": "/sensor-data.php?action=csv_data&id='AB'&period=24"
},
"pathToImages": "http://www.amcharts.com/lib/images/",
"categoryField": "timestamp",
"dataDateFormat": "YYYY-MM-DD HH:MM:SS",
"startDuration": 1,
"categoryAxis": {
"parseDates": true,
"autoGridCount": true,
"minPeriod" : "ss"
},
"graphs": [ {
"valueField": "temp",
"bullet": "round",
"bulletBorderColor": "#FFFFFF",
"bulletBorderThickness": 2,
"lineThickness ": 2,
"lineAlpha": 0.5
} ]
} );
</script>
</head>
<body>
<div id="chartdiv" style="width:100%; height:400px;"></div>
</body>
</html>
Can anybody point out what I am doing wrong to prevent the data from being displayed correctly?
So it turns out I had the dates not coming out of the PHP script as a date format AND I had the date being formatted wrong from a python script to the php to the javascript.
Thanks for looking at this.