I have my simple HTML-file and JSON-file
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-controller="aboutController">
<p ng-repeat="post in about">
{{name.about}}
</p>
</div>
<script src="angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('aboutController', function($scope, $http) {
$http.get('about.json').success(function(data, status, headers, config) {
$scope.about = data;
console.log('this is data:',data);
});
});
</script>
</body>
</html>
{
"name" : "Peter",
"surname" : "Chpoksky"
}
I need to transfer data from a json-file, but for some reason, the browser displays nothing
what is the problem?
In about you get your json so this json :
{
"name" : "Peter",
"surname" : "Chpoksky"
}
So to use this object you have to do
<p ng-repeat="post in about">
{{post.name}} <!-- To display the name -->
{{post.surname}} <!-- To display the surname -->
</p>
Related
So, I have just started with Mustache JS. I have this simple html file
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Mustache template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
</head>
<body>
<script id="mp_template" type="text/template">
<p>Country: {{ name }}</p>
<p>Capital: {{ capital }}</p>
<p>Flag: <img src={{{ flag }}} ></p>
</script>
<div id="mypanel"></div>
<button id="btn">Load</button>
<script>
$(function () {
$("#btn").on('click', function () {
$.getJSON('https://restcountries.eu/rest/v2/name/aruba?fullText=true', function (data) {
var template = $("#mp_template").html();
var text = Mustache.render(template, data);
console.log(data);
$("#mypanel").html(text);
});
});
});
</script>
Its getting some data back via the .getJSON call and then trying to render that data on button click. No data is rendering. Can someone please advise what am I doing wrong ?
Please see this URL to see the structure of returned data https://restcountries.eu/rest/v2/name/aruba?fullText=true
That API returns a JSON array, not an object, that's why it isn't working.
If you only want the first item, you can do:
var template = $("#mp_template").html();
var text = Mustache.render(template, data[0]);
console.log(data);
$("#mypanel").html(text);
Or you can iterate through all the countries, by passing the array in an object property: { countries: data } and use {{#countries}} in your template
$(function () {
$("#btn").on('click', function () {
$.getJSON('https://restcountries.eu/rest/v2/name/aruba?fullText=true', function (data) {
var template = $("#mp_template").html();
var text = Mustache.render(template, { countries: data });
$("#mypanel").html(text);
});
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
</head>
<body>
<script id="mp_template" type="text/template">
{{#countries}}
<p>Country: {{ name }}</p>
<p>Capital: {{ capital }}</p>
<p>Flag: <img src={{{ flag }}} style="width: 50px"></p>
{{/countries}}
</script>
<div id="mypanel"></div>
<button id="btn">Load</button>
</body>
I am trying to get AngularJS to parse all the data given to it in JSON from a Spring rest controller. I am able to get the data to parse and everything but whenever angular repeats in the loop it print a text of "> " on the page.
My javascript
var HOST_SERVER = "http://localhost:8080";
angular.module('exchange', [])
.controller("Book", function ($scope, $http) {
$http.get(HOST_SERVER + "/exchange/get")
.then(function (response) {
$scope.books = response.data;
});
});
The html
<!DOCTYPE html>
<html data-ng-app="exchange">
<head>
<title>The Book Exchange</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="jsengine01.js"></script>
<meta charset="utf-8" />
</head>
<body>
<!-- test stuff-->
<div data-ng-controller="Book">
<div data-ng-repeat="book in books">>
<h1>{{book.title}}</h1>
<h4>By {{book.author}}</h4>
</div>
</div>
</body>
</html>
I tested the controllers and they return the appropriate json responses but I can post those as well if it would be helpful
There is a second > in your code that is being repeated...
<body>
<!-- test stuff-->
<div data-ng-controller="Book">
<div data-ng-repeat="book in books">> <!-- Remove the second '>' -->
<h1>{{book.title}}</h1>
<h4>By {{book.author}}</h4>
</div>
</div>
</body>
I have the error of angular "Error: ng:areq Bad Argument", the thing here is that if I put the javascript code directly in the html, as bellow, there is no mistake and it works, but when the same code is called from another file then is where the error appears.
<!DOCTYPE html>
<html lang="en" ng-app="aplicacion" >
<head>
<meta charset="UTF-8">
<title>Cuestionarios y asÃ</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<!-- <script type="text/javascript" src="prueba.js"></script> -->
<script type="text/javascript">
var aplicacion = angular.module('aplicacion', []);
aplicacion.controller('cuestionacio', function($scope, $http, $document) {
$scope.preguntas = [];
$scope.cargaCuestionario = function(){
$http({
method: 'GET',
url: 'http://localhost:8000/serv/pregunticas/?format=json'
}).
success(function(data) {
console.log('ESto');
console.log(datos);
}).
error(function(datos) {
console.log(datos);
alert('Error obtienedo el cuestionario');
});
};
});
</script>
</head>
<body>
<div ng-controller="cuestionacio" ng-init="cargaCuestionario()">
<div ng-repeat="item in preguntas">
<p>{{item.pregunta}}</p>
<br>
<div ng-if="{{item.tipo}}">
<select ng-repeat>
</select>
</div>
</div>
<div>
<p>calendario</p>
<br>
<p>mapa</p>
</div>
</div>
</body>
</html>
I hope someone can help me with this. Thanks
P.S. Sorry for the horrible english.
I must make a website. When you press an IMG it adds the template from the directive to another div.
In detail, I have 3 imgs on my website. Hamburger, Cola and Crips. When you press one of them it adds it to the Order List.
HTML code:
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="scripts/angular.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="Stylesheet" type="text/css" href="styles/style.css">
<title>Food Center</title>
<script src="scripts/skrypt.js"></script>
</head>
<body>
<h1 class="ladne"><center>Food Center</center></h1>
<div class="d1" ng-controller="myCtrl" myDir1>
<img src="styles/img/cola.gif"></img>
<img src="styles/img/fryt.gif"></img>
<img src="styles/img/ham.gif"></img>
<br>
<div class="zam" >
Date of order: {{data | date:'yyyy-MM-dd'}}
<br>
Your Order:
</div>
</div>
</body>
</html>
Controller code:
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
$scope.data = new Date();
$scope.hamburger ={
name: 'Hambureger',
}
$scope.frytki = {
name: 'Frytki',
}
$scope.cola = {
name: 'Coca-Cola',
}
});
myApp.directive('dir1', function () {
return {
restrict: 'A',
template: '<br>{{hamburger.nazwa}}'
};
});
I really don't understand these directives. Would be nice if you can help me.
I am starting with Angular and installed all Angular packages for Sublime Text 3.
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
</head>
<body>
<div ng-controller="myController">
<h1>{{author.name}}</h1>
<p>{{author.title + ', ' + author.sex}}</p>
</div>
<script>
function myController($scope){
$scope.author = {
'name' : 'Ivan',
'ocupation' : 'student',
'subject' : 'cs'
}
</script>
</body>
</html>
It is not working I get plain text when I open the page.
Its not recognising anything I write after "$" in the function body, I can see that because it is colouring only the $ and it doesn't connect the $scope in the () brackets and the one inside the function body.
Any ideas? Been trying to fix that for a day now.
Here is working plunkr
You should define angular module and controller.
<!doctype html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
</head>
<body>
<div ng-controller="myController">
<h1>{{author.name}}</h1>
<p>{{author.ocupation}}, {{author.subject}}</p>
</div>
<script>
angular.module('app', []).controller('myController', function($scope) {
$scope.author = {
'name' : 'Ivan',
'ocupation' : 'student',
'subject' : 'cs'
}
});
</script>
</body>
</html>