Data is not get from json file using angularjs - javascript

Here is my HTML file and JS file
I'm not getting any data's from the JSON file to the html file
Below I have HTML files and JS files:
<!Doctype html>
<html ng-app>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript">
alert("c");
function imagecontroller($http,$scope){
alert("cd");
$http.get('ytdata.json').success(function(ytdata) {
alert("cdscdsc");
$scope.data = ytdata;
});
}
</script>
<style type="text/css">
li{list-style:none;float:left;padding:20px;}
a{text-decoration:none;}
</style>
</head>
<body>
<div ng-controller="imagecontroller">
<ul>
<li ng-repeat="datum in data">
<a>
<img ng-src="{{datum.thumbUrl}}"/>
<br />Id : {{datum.id}}
<br />Purchase : {{datum.Purchase}}
</a>
</li>
</ul>
</div>
</body>
</html>
This is my json file:
[
{
"id":"mobile.jpg",
"thumbUrl":"image url",
"Purchase":20000
},
{
"id":"pendrive.jpg",
"thumbUrl":"image url",
"Purchase":400
},
{
"id":"laptop.jpg",
"thumbUrl":"image url",
"Purchase":3833
}
]
Please get me the output for this program
Thanks in advance

Here is a working plunker of what you are trying to do:
Controller
app.controller('MainCtrl', function($scope, $http) {
$scope.data = null;
$http.get("data.json").success(function (data) {
$scope.data = data;
});
});
View
<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="datum in data">
<a>
<img ng-src="{{datum.thumbUrl}}" />
<br />Id : {{datum.id}}
<br />Purchase : {{datum.Purchase}}
</a>
</li>
</ul>
</body>

Related

Angular does not show output

Have tried every solution on stackoverflow but it does not solve my problem,
my output is not showing.
The output does appear in logs and everywhere else but due to some reason angular is unable to render it.
In my real scenario i will be receiving data from a server and i have mimicked the object structure i will be getting in the 'controller.js' file
Html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div ng-app="application" ng-controller="controller">
<ng-view>
<h2> Todo List: </h2>
<ul>
<li> {{t}}</li>
<li> {{s}}</li>
</ul>
</ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="application.js"></script>
<script src="controller.js"></script>
</body>
</html>
Controller.js
var app=angular.module('application', []);
app.controller("controller", function($scope) {
var d= [{'Task':'Say hi!','Status':'failed'}];
$scope.t=d[0].Task;
$scope.s=d[0].Status;
console.log("Task",$scope.t);
console.log("Status",$scope.s);
});
Application.js
var app = angular.module("application", []);
app.run(function(){
console.log("App running!");
});
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div ng-app="application" ng-controller="_controller">
<h2> Todo List: </h2>
<ul>
<li> {{t}}</li>
<li> {{s}}</li>
</ul>
</div>
<script>
var app=angular.module('application', []);
app.controller("_controller", function($scope) {
var d= [{'Task':'Say hi!','Status':'failed'}];
$scope.t=d[0].Task;
$scope.s=d[0].Status;
console.log("Task",$scope.t);
console.log("Status",$scope.s);
});
app.run(function(){
console.log("App running!");
});
</script>
</body>
</html>
Syntax error in console.log, missing leading quote on App running.
//script.js
var app = angular.module("application", []);
app.run(function() {
console.log("App running!");
});
app.controller("controller", function($scope) {
var d = [{
'Task': 'Say hi!',
'Status': 'failed'
}];
$scope.t = d[0].Task;
$scope.s = d[0].Status;
console.log("Task", $scope.t);
console.log("Status", $scope.s);
});
<html lang="en">
<head>
</head>
<body>
<div ng-app="application" ng-controller="controller">
<ng-view>
<h2> Todo List: </h2>
<ul>
<li> {{t}}</li>
<li> {{s}}</li>
</ul>
</ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
You have mistake in this line
console.log(App running!");
You forgot one "
that should be
console.log("App running!");
Solving that your code works fine.

AngularJS ng-click stopped working suddenly

I am in the midst of troubleshooting a webpage that is able to open up a specific title from index.html to titleDetails.html.
However, ng-click in my index.html stopped working all of a sudden. I did not make any changes that could affect the link. It has been working fine all along (redirection of page from index.html to titleDetails.html) .
Original post here
Below are my codes:
app.js
(function () {
angular
.module("BlogApp", [])
.controller("BlogController", BlogController);
function BlogController($scope, $http) {
$scope.createPost = createPost;
$scope.deletePost = deletePost;
$scope.editPost = editPost;
$scope.updatePost = updatePost;
$scope.postDetail = null;
function init() {
getAllPosts();
}
init();
function titleDetails(post){
$scope.postDetail = post;
window.location = "/titleDetails.html";
}
function updatePost(post){
console.log(post);
$http
.put("/api/blogpost/"+post._id, post)
.success(getAllPosts);
}
function editPost(postId){
$http
.get("/api/blogpost/"+postId)
.success(function(post){
$scope.post = post;
});
}
function deletePost(postId){
$http
.delete("/api/blogpost/"+postId)
.success(getAllPosts);
}
function getAllPosts(){
$http
.get("/api/blogpost")
.success(function(posts) {
$scope.posts = posts;
});
}
function createPost(post) {
console.log(post);
$http
.post("/api/blogpost",post)
.success(getAllPosts);
}
}
})();
index.html
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<input ng-model="post.title" class="form-control" placeholder="title"/>
<textarea ng-model="post.body" class="form-control" placeholder="body"></textarea>
<button ng-click="createPost(post)" class="btn btn-primary btn-block">Post</button>
<button ng-click="updatePost(post)" class="btn btn-success btn-block">Update</button>
<div ng-repeat="post in posts">
<h2>
<a ng-click="titleDetails(post)">{{ post.title }} </a>
<a ng-click="editPost(post._id)" class="pull-right"><span class="glyphicon glyphicon-pencil"></span></a>
<a ng-click="deletePost(post._id)" class="pull-right"><span class = "glyphicon glyphicon-remove"></span></a>
</h2>
<em>{{post.posted}}</em>
<p>{{post.body}}</p>
</div>
</div>
</body>
</html>
titleDetails.html:
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<div>
<h2>
<a>{{ postDetail.title }} </a>
</h2>
<em>{{postDetail.posted}}</em>
<p>{{postDetail.body}}</p>
</div>
</div>
</body>
</html>
You are missing $scope.titleDetails = titleDetails; in your controller.
Furthermore, I would recommend using controller as syntax.
So it would be something like this:
index.html
<div class="container" ng-controller="BlogController as blogCtrl">
...
<a ng-click="blogCtrl.titleDetails(post)">{{ blogCtrl.post.title }} </a>
your controller
function BlogController($scope, $http) {
var vm = this;
vm.titleDetails = titleDetails;
//rest of your code using 'vm' instead of '$scope'
This way, you can stop using $scope.
You can find more details here.

Angular JS ng-repeat not working as expected

I have a controller like this:
controller('BreadCrumbs', ['$scope','crumble','$rootScope', function ($scope,crumble,$rootScope) {
function init (){
$scope.ui={};
$scope.ui.mdBreadCrumbs=[{"path":"path1","label":"label1"}];
$rootScope.oldScope=$scope;
}
$scope.setBreadCrumbs=function() {
$scope.ui.mdBreadCrumbs=crumble.trail;
}
init();
}]);
and in HTML,
<ol id="breadCrumbList" ng-controller="BreadCrumbs as bcrmbs">
{{ui.mdBreadCrumbs}}
<li ng-repeat="bc in ui.mdBreadCrumbs">
<a ng-href="{{bc.path}}">{{bc.label}}</a>
</li>
</ol>
{{ui.mdBreadCrumbs}} is showing some like [{"path":"path1","label":"label1"}].
But in ng-repeat, it is not iterating.
Using $scope.setBreadCrumbs I put some more values, but still ngRepeat not working.
Anyone have any idea why it is not working?
Change
<ol id="breadCrumbList" ng-controller="BreadCrumbs as bcrmbs">
to
<ol id="breadCrumbList" ng-controller="BreadCrumbs">
DEMO
var app = angular.module('app', []);
app.controller('BreadCrumbs', ['$scope', function($scope) {
$scope.ui = {};
$scope.ui.mdBreadCrumbs = [{
"path": "path1",
"label": "label1"
}];
}]);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body ng-app="app" ng-controller="BreadCrumbs">
<ol id="breadCrumbList">
{{ui.mdBreadCrumbs}}
<li ng-repeat="bc in ui.mdBreadCrumbs">
<a ng-href="{{bc.path}}">{{bc.label}}</a>
</li>
</ol>
<script type=" text/javascript " src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js "></script>
<script type="text/javascript " src="MainViewController.js "></script>
</body>
</html>
You have to change something in your HTML and your HTML should be like this:
<div ng-app>
<div ng-controller="BreadCrumbs">
<div ng-repeat="bc in ui.mdBreadCrumbs">
<a ng-href="{{bc.path}}">{{bc.label}}</a>
</div>
</div>
</div>

Injecting json using angular with working html tags

I need your help! I'm trying to import json file using angular. The only problem is that the json file is imported from other website and the html tags display as normal text. And here is my question, is there any chance to make those tags normal html not a visible text?
HTML:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="maincontroller.js" type="text/javascript"></script>
</head>
<body bgcolor="lightblue">
<div ng-app="mainApp" ng-controller="mainController">
<div id="content" style="width: 500px; height: 500px; background-color: green; ">
<div ng-repeat="content in contents">
<h2>{{content.title}}</h2>
<p>{{content.date}}</p>
<p>{{content.info}}</p>
<p>{{content.content}}</p>
<p>{{content.url}}</p>
</div>
</div>
</div>
</body>
</html>
maincontroller.js
var myapp=angular.module('mainApp',['ngSanitize']);
myapp.controller('mainController',function($scope,$http){
$http.get('/WP/?json=get_recent_posts').then(function(response, date){
$scope.contents = response.data.posts;
alert("success");
console.log(response)
}, function(error){
$scope.contents = [{title:"<h4> Error </h4>",date:"<p> JSON invalid </p>"}];
alert("error");
console.log(response)
})
});
Try this solution :
Your maincontroller.js file
I have added $sce.trustAsHtmlso html file can know that content has html tags
var myapp=angular.module('mainApp',['ngSanitize']);
myapp.controller('mainController',function($scope,$http, $sce){
$http.get('http://localhost/wordpress/?json=get_recent_posts').then(function(response, date){
$scope.contents = response.data.posts;
$scope.info = $sce.trustAsHtml(contents.info);
alert("success");
console.log(response);
}, function(error){
$scope.contents = [{title:"<h4> Error </h4>",date:"<p> JSON invalid </p>"}];
alert("error");
console.log(response);
})
});
And your index.html
add angular-sanitize.js file if you have not added yet. and use ng-bind-html in your html tag.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.1/angular-sanitize.js"></script>
<script src="mainController.js" type="text/javascript"></script>
</head>
<body bgcolor="lightblue">
<div ng-app="mainApp" ng-controller="mainController">
<div id="content" style="width: 500px; height: 500px; background-color: green; ">
<div ng-repeat="content in contents">
<h2 ng-bind-html="content.title">{{content.title}}</h2>
<p>{{content.date}}</p>
<p>{{content.info}}</p>
<p ng-bind-html="content.content">{{content.content}}</p>
<p>{{content.url}}</p>
</div>
</div>
</div>
</body>
</html>
Instead of using binding express {{}} use ng-bind-html-unsafe It will render html tag as well
example
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.text = "<strong>this is html</strong>";
});
<body ng-controller="MainCtrl">
Hello {{name}}!
<br/>
<ul>
<li>{{text}}</li>
<li ng-bind-html-unsafe="text"></li>
</ul>
</body>
Out will be like
Hello World!
<strong>this is html</strong>
this is html
If I have understood well, you have to use something like this in your javascript:
myapp.controller('mainController',function($scope,$http, $sce){
$http.get('/WP/?json=get_recent_posts').then(function(response, date){
$scope.contents = response.data.posts;
$scope.title = $sce.trustAsHtml(contents.title);
alert("success");
console.log(response)
}, function(error){
$scope.title = $sce.trustAsHtml("<h4> Error </h4>");
$scope.date = $sce.trustAsHtml("<p> JSON invalid </p>");
alert("error");
console.log(response)
})
});
and this in your html:
<p ng-bind-html="title" class="htmlComment">
You can use ngBindHtml. Edit your code like below
<span ng-bind-html="content.title">{{content.title}}</span>
Try this
https://plnkr.co/edit/JcW2fxcISsjYKpXGBBkp?p=preview
Inject ngSanitize before using ngBindHtml
var app = angular.module('plunker', ['ngSanitize']);....
<div ng-bind-html="scopeVariable"></div>

The controller function is not being called

i'm learning AngularJs and i complete some courses in internet i know what is module, controller, service, i know some basics directives, and i found in internet a basic AngularJs video tutorial, i'm doing all like in this video but can't understand why it's not work.
Here is my code
var app = angular.module('todoApp', []);
app.controller('todoCtrl', ['$scope', function($scope) {
$scope.todos = [
{
text: "Learn AngularJs"
},
{
text: "Build App"
}
];
$scope.addTodo = function() {
$scope.todos.push({text: $scope.todoText});
};
}]);
<html ng-app="todoApp">
<head>
<title>todo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="/underscore-master/underscore-min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div ng-controller="todoCtrl">
<h2>Total todos: {{todos.length}}</h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
<span>{{todo.text}}</span>
</li>
</ul>
</div>
<form class="form-horizontal">
<input type="text" ng-model="todoText">
<button class="btn" ng-click="addTodo()"><i class="icon-plus">Add</i></button>
</form>
</body>
</html>
It should insert new text in my array, but when i'm clikcking on the button nothing happens, and no error in console, i realy can't understand why?
The ng-click event is out of the controller's scope. The quick answer is to move ng-controller="todoCtrl" to an enclosing/outer element, which is body in this case.
Move the ng-controller attribute to the <body> - so that it incorporates the form and the ng-click event. For example:
var app = angular.module('todoApp', []);
app.controller('todoCtrl', ['$scope', function($scope) {
$scope.todos = [
{
text: "Learn AngularJs"
},
{
text: "Build App"
}
];
$scope.addTodo = function() {
$scope.todos.push({text: $scope.todoText});
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="todoApp">
<body ng-controller="todoCtrl">
<div>
<h2>Total todos: {{todos.length}}</h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
<span>{{todo.text}}</span>
</li>
</ul>
</div>
<form class="form-horizontal">
<input type="text" ng-model="todoText">
<button class="btn" ng-click="addTodo()"><i class="icon-plus">Add</i></button>
</form>
</body>
</html>
The model and functions should be in scope to be used, so you need to have addTodo function called within todoCtrl scope. Just add a wrapper and have the controller there.
var app = angular.module('todoApp', []);
app.controller('todoCtrl', ['$scope', function($scope) {
$scope.todos = [
{
text: "Learn AngularJs"
},
{
text: "Build App"
}
];
$scope.addTodo = function() {
$scope.todos.push({text: $scope.todoText});
};
}]);
<html ng-app="todoApp">
<head>
<title>todo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="/underscore-master/underscore-min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div ng-controller="todoCtrl" class="wrapper">
<div>
<h2>Total todos: {{todos.length}}</h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
<span>{{todo.text}}</span>
</li>
</ul>
</div>
<form class="form-horizontal">
<input type="text" ng-model="todoText">
<button class="btn" ng-click="addTodo()"><i class="icon-plus">Add</i></button>
</form>
<div>
</body>
</html>

Categories