I have a html page with that is to call JSON data from a js file.
The html is below:
<html>
<head>
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript" src="modules/app.js" ></script>
</script>
<title>
</title>
</head>
<body ng-app="albumsApp">
<div data-ng-controller="albumController">
<ul data-ng-repeat="album in albums">
<li>
{{albums.title}}
</li>
</ul>
</div>
</body>
</html>
The "app.js" file that it calls is below:
**
var albumsApp = angular.module ('albumsApp',[])
albumsApp.factory('albumFactory',function() {
return {
getAlbums: function(){
alert("test");
return [{"artist": "Kid 606","title:":"Happiness"}];
},
};
});
albumsApp.controller ('albumController', function ($scope,albumFactory) {
$scope.albums = albumFactory.getAlbums();
});
**
There are nor errors in the console when I run it, just nothing appears.
The alert box "test" appears when I load the page so the function is getting called, it just doesn't display the JSON. Thank you for any replies.
change this:
{{albums.title}}
to
{{album.title}}
It is OK now, thank you very much.
HTML is
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript" src="modules/app.js" ></script>
</script>
<title>
</title>
</head>
<body ng-app="albumsApp">
<div data-ng-controller="albumController">
<ul data-ng-repeat="album in albums">
<li>
Artist is "{{album.artist}} " and title is {{album.title}}
</li>
</ul>
</div>
</body>
</html>
JS is
var albumsApp = angular.module ('albumsApp',[])
albumsApp.factory('albumFactory',function() {
return {
getAlbums: function(){
return [{"artist": "Kid 606","title":"Happiness"}];
},
};
});
albumsApp.controller ('albumController', function ($scope,albumFactory) {
$scope.albums = albumFactory.getAlbums();
});
Related
Hi I am new in reactjs when i am running server.js file from terminal it show blank page on browser. The code of index.html file is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://cdnjs.cloudflare.com/ajax/babel-
core/5.8.23/browser.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-
dom.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('app')
);
</script>
</body>
</html>
Thanks in advance.
This is a working example.
In your code, the wrong part is the CDN link to babel-core. You may always check your console when working with JS (on Google Chrome: Ctrl + shift + J on Windows, Cmd + Opt + J on IOS).
On the other hand, I thought this was a good opportunity to also introduce components (see ).
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First React Example</title>
</head>
<body>
<div id="hello"></div>
<script src="https://unpkg.com/react#15.0.0/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.0.0/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/babel">
var Greeting = React.createClass({
render: function() {
return (
<p>Hello World</p>
)
}
});
ReactDOM.render(
<Greeting/>,
document.getElementById('hello')
);
</script>
</body>
</html>
Example is more easy to Understand.I tried to print a google document by through a side bar.
I have retrieved a script extract on the web.
My result is a printing the contents of the sidebar and not a google document printing .... oops
Can someone help me ?
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript">
function initButtonImprimer() {
var bouton = document.getElementById('button-imprimer');
bouton.onclick = function(e) {
print();
return false;
}
}
</script>
</head>
<body>
...
<div>
...
<input type="button" id="button-imprimer" value="Imprimer" />
...
</div>
...
<script type="text/javascript">
initButtonImprimer();
</script>
</body>
</html>
this is link of my code
http://plnkr.co/edit/8muxhJmvFiIqRJgzuT0O?p=preview
I am getting error
Uncaught Error: Unknown provider: $controllerProvider from productsApp
and I can't view json file in console
index.html
<!DOCTYPE html>
<html data-ng-app="productsApp" >
<head>
<meta charset="utf-8">
<script data-require="angularjs#1.3.6" data-semver="1.3.6" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
<script type="text/javascript" src="http://demos.amitavroy.com/learningci/assets/js/xml2json.js" charset="UTF-8"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<script type='text/javascript' src="script.js"></script>
<script data-require="angular.js#1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
</head>
<body >
<div ng-controller="products">
<div ng-repeat="product in products">
<div ng-repeat="platform in product ">
{{platform._type}}
</div>
</div>
</div>
</body>
</html>
product_js.js - js file for x2js
var productApp = angular.module("productsApp",[]);
productApp.factory('productFactory',function($http){
var factory = [];
factory.getProducts = function(){
return $http.get("operations_mapping.xml");
}
return factory;
});
productApp.controller('products',function($scope,productFactory){
$scope.products = [];
loadProducts();
function loadProducts(){
productFactory.getProducts().success(function(data){
mappingss = x2js.xml_str2json(data);
console.log(mappingss.mappings.platform);
$scope.products =mappingss.mappings.platform;
});
}
});
Looks like you have included multiple version of angular.js script on your page, retain the latest one(mentioned below) and remove the rest of the references.
<script data-require="angularjs#1.3.14" data-semver="1.3.14" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
Here is the Updated Plunker
product_js.js is not included in your html. Add <script type='text/javascript' src="product_js.js"></script>
Hi i would like to get the Price of a Steam Item unfortunately it doesn't work with the url.
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$.getJSON('http://steamcommunity.com/market/priceoverview/?country=DE¤cy=3&appid=730&market_hash_name=P90%20%7C%20Asiimov%20%28Factory%20New%29', function(fbResults) {
document.write(fbResults.lowest_price);
});
});
</script>
</head>
<body>
</body>
I have been trying for a while now to figure out how to generate an listview using json in jquery mobile. I have found a lot of examples on the net, but I'm fairly new with json and can't figure out what I am doing wrong?
Here is the page generating the json( test.php):
$matches = array(
array('title' => 'Portugal Open', 'id' => 23),
array('title' => 'Mallorca Invitational', 'id' => 87));
echo $json = json_encode($matches);
And here is how I'm trying to generate the listview:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="css/jquery.mobile.theme-1.3.1.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(document).ready(function(){
$.getJSON("test.php",function(data) {
$.each(data.posts, function(i,data){
$('#matches').children('ul').append('<li>'+data.title+'</li>');
});
}
);
return false;
});
});
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content" id="matches">
<ul data-role="listview">
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
I don't get anything in my listview and I can't figure out why!?
Please help and thanks in advance :-)
Try this code,
$(document).on('pageshow', '#page', function(){
$("#page div:jqmData(role=content) #matches ul").empty();
$.getJSON("test.php",function(data) {
$.each(data.posts, function(i,data){
var html="";
html+="<li><a href='#'>"+data.title+"</a></li>";
$("#page div:jqmData(role=content) #matches ul").append(html);
});
$("#page div:jqmData(role=content) #matches ul:visible").listview("refresh");
});
return false;
});
have fun!!