I'm working on the tutorial to display contact details on my page. The code doesn't display the first and last name. Please find the code below.
My index.html
<!DOCTYPE html>
<html data-ng-app="myContactApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="app.js"></script>
<title>My Contact Application</title>
</head>
<body>
<h1>Contact App</h1>
<div data-ng-controller="contactController as ctrl">
<div data-ng-repeat="con in ctrl.contactArr">
<span>{{con.name.first+ " "+con.name.last}}</span>
</div>
</div>
</body>
</html>
My app.js file
var app=angular.module("myContactApp",[]);
app.controller("contactController",contactCtrl);
function contactCtrl(){
this.contactArr = [
{
"gender": "male",
"name": {
"title": "mr",
"first": "romain",
"last": "hoogmoed"
},
"location": {
"street": "1861 jan pieterszoon coenstraat",
"city": "maasdriel",
"state": "zeeland",
"postcode": 69217
},
"email": "romain.hoogmoed#example.com",
"login": {
"username": "lazyduck408",
"password": "jokers",
"salt": "UGtRFz4N",
"md5": "6d83a8c084731ee73eb5f9398b923183",
"sha1": "cb21097d8c430f2716538e365447910d90476f6e",
"sha256": "5a9b09c86195b8d8b01ee219d7d9794e2abb6641a2351850c49c309f1fc204a0"
},
"dob": "1983-07-14 07:29:45",
"registered": "2010-09-24 02:10:42",
"phone": "(656)-976-4980",
"cell": "(065)-247-9303",
"id": {
"name": "BSN",
"value": "04242023"
},
"picture": {
"large": "https://randomuser.me/api/portraits/men/83.jpg",
"medium": "https://randomuser.me/api/portraits/med/men/83.jpg",
"thumbnail": "https://randomuser.me/api/portraits/thumb/men/83.jpg"
},
"nat": "NL"
}
]
}
My page is not showing the first and last name when I run through HTTP-server. Am I doing anything wrong?
Your code works fine. Kindly see whether app.js or angular dependency properly loaded or not.
https://jsfiddle.net/Prasanna15/m3q70umq/
you can check your code.
try to use https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js this one
Your code runs like a charm. There is no mistake in it. Please ensure that all ressources (app.js & https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js) are loaded. Open up the network tab in your browser debugger to check this. Also ensure you cleaned up your browser cache.
<!DOCTYPE html>
<html data-ng-app="myContactApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="app.js"></script>
<title>My Contact Application</title>
</head>
<body>
<h1>Contact App</h1>
<div data-ng-controller="contactController as ctrl">
<div data-ng-repeat="con in ctrl.contactArr">
<span>{{con.name.first+ " "+con.name.last}}</span>
</div>
</div>
</body>
</html>
--> demo fiddle
Related
My question is, I can display both 'description' and 'temp', so, why can't I retrieve the 'name' of the city. Please look at a fetch response:
var button = document.querySelector('.button')
var inputValue = document.querySelector('.inputValue')
var name = document.querySelector('.name');
var desc = document.querySelector('.desc');
var temp = document.querySelector('.temp');
//trigering Action Fetch api
button.addEventListener('click',function(){
fetch ('https://api.openweathermap.org/data/2.5/weather?q='+inputValue.value+'&appid=0f91ec65ce9099b9b43a35a9f89f6f26')
.then(response => response.json())
.then(data => {
var nameValue = data['name'];
var tempValue = data['main']['temp'];
var descValue = data['weather'][0]['description'];
name.innerHTML = nameValue;
temp.innerHTML = tempValue;
desc.innerHTML = descValue;
})
.catch(err => alert("Wrong city name!"))
})
{
"coord": {
"lon": 145.77,
"lat": -16.92
},
"weather": [{
"id": 802,
"main": "Clouds",
"description": "scattered clouds",
"icon": "03n"
}],
"base": "stations",
"main": {
"temp": 300.15,
"pressure": 1007,
"humidity": 74,
"temp_min": 300.15,
"temp_max": 300.15
},
"visibility": 10000,
"wind": {
"speed": 3.6,
"deg": 160
},
"clouds": {
"all": 40
},
"dt": 1485790200,
"sys": {
"type": 1,
"id": 8166,
"message": 0.2064,
"country": "AU",
"sunrise": 1485720272,
"sunset": 1485766550
},
"id": 2172797,
"name": "Cairns",
"cod": 200
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"/>
<title>Request APP template</title>
</head>
<h1>Simple weather App</h1>
<body>
<div class="input">
<input type="text" class="inputValue" placeholder="Enter a city">
<input type="submit" value="Submit" class="button"></div>
</div>
<div>
<h1>
Current city weather conditions:
</h1>
</div>
<div class="display">
<h1 class="name"></h1>
<p class="desc"></p>
<p class="temp"></p>
<i class="icon"></p>
</div>
<script src="app.js"></script>
</body>
</html>
Am I wrong at var nameValue = data['name']? am I missing something?
thanks in advance
I am looking forward to learning how to use fetch correctly to improve my projects.
I am working with angularjs. I have a table with data column which has hyperlink and when clicked in <td> data the 'prID' is passed to the URL as shown in the demo. But issue is for some of the rows in the table i have multiple prID's passed, when clicked on it, it is passing all the prID's instead i want to pass only one prID on which user mouse over and click on that ID.
DEMO:
https://plnkr.co/edit/sWbpovAT7II1eM4yRA2X?p=preview
example: For second row in the table i have values 2; 30; 21 . When user mouseover and click on it currently it is passing 2; 30; 21 in the URL instead i want to pass single value at a time. When user mouse over on 2 it should pass value 2 and when mouseover on 30, it should pass 30...This way i have couple of rows with multiple prIDs and the data is dynamic.
sample code:
<table border="1">
<tr ng-repeat="data in dataInfo">
<td> {{data.prID}}</td>
</tr>
</table>
You need nested loop when multiple ID on data.prID. Please try this way:
<tr ng-repeat="data in dataInfo">
<td><span ng-repeat="link in data.prID.split(';')"> {{link}}<span ng-if="!$last">;</span></span></td>
</tr>
Here's the code I've edited from Hanif
// Code goes here
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DataCtrl', function ($scope) {
$scope.dataInfo = [
{
"prID": "1",
"name": "Fight Club",
"desc": "Brad"
},
{
"prID": "2; 30; 21",
"name": "Matrix (Series)",
"desc": "Keanu Reeves"
},
{
"prID": "33",
"name": "V for Vendetta",
"desc": "Hugo Weaving"
},
{
"prID": "13",
"name": "V for Vendetta",
"desc": "Hugo Weaving"
},
{
"prID": "111; 55",
"name": "V for Vendetta",
"desc": "Hugo Weaving"
},
{
"prID": "3",
"name": "V for Vendetta",
"desc": "Hugo Weaving"
}
];
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DataCtrl">
<table border="1">
<tr ng-repeat="data in dataInfo">
<td>
<a ng-repeat="link in data.prID.split(';')" href="http://myURL.com/getInfo/viewStatus?prInfo={{link}}" target="_blank"> {{link}}<span ng-if="$index+1 != data.prID.split(';').length">;</span></a>
</td>
</tr>
</table>
</div>
</body>
</html>
Demo here
I am using ng-options for my select tag to have choices for the users. Everything works perfectly but after selecting an option for the first time the default blank value is gone. What if I want to revert back to the defaul blank value again? How can that be done? How can I retain that blank value?
Here is an example of my code:
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="myController">
<h1>Hello World!</h1>
<select ng-model="mySelection" name="" id="" ng-options="x.value as x.label for x in myOptions">
</select>
</body>
</html>
<script>
var app = angular.module('app', []);
app.controller('myController', function($scope){
$scope.myOptions = [{
"value": null,
"label": null,
},{
"value": "First",
"label": "First",
},{
"value": "Second",
"label": "Second",
},{
"value": "Third",
"label": "Third",
}]
});
</script>
Here is the plunker: http://plnkr.co/edit/5f17YxRfWFI4g40t3NEf?p=preview
use
<select ng-model="mySelection" name="" id="" ng-options="x.value as x.label for x in myOptions">
<option value=""></option>
</select>
Don't pollute your 'myOptions' with dummy null object, as APIs will not return you the same. you need to handle it on presentation layer, as shown above. while saving, if use selects empty, it will be saved as null (if handled properly)
also you can have something like this
<option value="">---select---</option>
Just add blank option to your options and select the blank by default like:
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="myController">
<h1>Hello World!</h1>
<select ng-model="mySelection" name="" id="" ng-options="x.value as x.label for x in myOptions">
</select>
</body>
</html>
<script>
var app = angular.module('app', []);
app.controller('myController', function($scope){
$scope.mySelection = '';
$scope.myOptions = [{
"value": "",
"label": "",
},{
"value": "First",
"label": "First",
},{
"value": "Second",
"label": "Second",
},{
"value": "Third",
"label": "Third",
}]
});
</script>
here we add the blank option
{
"value": "",
"label": "",
}
and select that empty option $scope.mySelection = '';
This is the first time I am using Angularjs to display contents from json using the code below,
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="GetVideosFiles">
<ul ng-repeat=" x in GetData ">
<li>example</li>
<li><h1>{{ x.videos.Title }}</h1></li>
<li>{{x.videos.Description}}</li><br><br>
<li><button>{{x.videos.Url}}</button></li>
</ul>
</div>
<script type="text/javascript">
function GetVideosFiles($scope,$http){
$http.get("VideoFile.json")
.success(function(rsp){
$scope.GetData = rsp;
});
}
</script>
</body>
</html>
VideoFile.json :
{
"videos": [{
"Title": "Windmill",
"Description": "What are wind mills? Are they giant fans? How do they work?",
"Url": "https://www.youtube.com/watch?v=Zrp0RC3XTpw"
}, {
"Title": "Race Car",
"Description": "Yeah, we know that your kid loves his cars",
"Url": "https://www.youtube.com/watch?v=zAteCGxrCSo"
}, {
"Title": "Blow Painting",
"Description": "The gentle wind has many an artist",
"Url": "https://www.youtube.com/watch?v=LKs3nw7YcR8"
}, , {
"Title": "Dreamcatcher",
"Description": "The wind turned naughty and blown the pieces of Dream catcher all over
the hose",
"Url": "https://www.youtube.com/watch?v=UbgZÂuDAmAM"
}]
}
but this code is not working for me.
I want to display my page like this:
Could someone tell me what I am doing wrong?
Updated :
<div ng-app="app" ng-controller="GetVideosFiles">
<ul ng-repeat=" x in GetData.videos ">
<li>example</li>
<li><h1>{{ x.Title }}</h1></li>
<li>{{x.Description}}</li><br><br>
<li><a ng-href="{{ x.Url }}">Watch video</a></li>
</ul>
</div>
<script type="text/javascript">
var app=angular.module("app",[]);
app.controller("GetVideosFiles",GetVideosFiles);
function GetVideosFiles($scope,$http){
$http.get("VideoFile.json")
.success(function(rsp){
//alert(rsp);
$scope.GetData = rsp;
});
}
</script>
I have updated my code based on one of the answers but it is still not working.
You controller declaration is not right and you ng-repeat object mention is wrong and put your json file in the same directory of html.
Try like this
<div ng-app="app" ng-controller="GetVideosFiles">
<ul ng-repeat=" x in GetData.videos ">
<li>example</li>
<li><h1>{{ x.Title }}</h1></li>
<li>{{x.Description}}</li><br><br>
<li><button>{{x.Url}}</button></li>
</ul>
</div>
<script type="text/javascript">
var app=angular.module("app",[]);
app.controller("GetVideosFiles",GetVideosFiles);
function GetVideosFiles($scope,$http){
$scope.GetData=[];
$http.get("VideoFile.json")
.success(function(rsp){
$scope.GetData = rsp;
});
}
</script>
You ng-repeat is wrong
Markup
<ul ng-repeat="x in GetData.videos">
<li>example</li>
<li><h1>{{ x.Title }}</h1></li>
<li>{{x.Description}}</li><br><br>
<li><button>{{x.Url}}</button></li>
</ul>
Demo Plunkr
I assume the list entry should be repeated and not the entire list. Therefore try something like this:
<ul>
<li ng-repeat=" x in GetData.videos "><p>example</p>
<p><h1>{{ x.Title }}</h1></p>
<p>{{x.Description}}</p><br><br>
<p><button>{{x.Url}}</button></p></li>
</ul>
Plus you should declare dependecies directly, like this:
app.controller("GetVideoFiles", ["$scope", "$http", GetVideoFiles]);
See: https://github.com/johnpapa/angular-styleguide#manual-annotating-for-dependency-injection. This will make sure you get your dependencies right.
My main html page is given below index.html
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="ISO-8859-1">
<title>Demo</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/controllers/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<h1>AngulAir</h1>
<div>
<ul>
<li ng-repeat="airport in airports">
{{airport.code}}-{{airport.city}}
-Edit
</li>
</ul>
<p ng-show="currentAirport">currentAirport:{{currentAirport.name}}</p>
</div>
<p ng-show="editing.name"><input type="text" ng-model="editing.name" value=""/></p>
<div ng-include="sidebyURL"></div>
<div ng-include="formURL"></div>
</div>
</body>
</html>
and I am using javascript file as given below app.js which present inside js/controllers folder
function AppCtrl($scope) {
$scope.airports = {
"PDX" : {
"code" : "PDX",
"name" : "Portland International Airport",
"city" : "Portland",
"destinations" : [ "LAX", "SFO" ]
},
"STL" : {
"code" : "STL",
"name" : "Lampbert-St. Louis International Airport",
"city" : "St. Louis",
"destinations" : [ "LAX", "MKE" ]
},
"MCI" : {
"code" : "MCI",
"name" : "Kansas City International Airport",
"city" : "Kansas City",
"destinations" : [ "SFO", "LAX" ]
},
};
$scope.currentAirport=null;
$scope.sidebyURL='partials/airport.html';
$scope.formURL='partials/form.html';
$scope.setAirport = function(code) {
$scope.currentAirport = $scope.airports[code];
};
$scope.editAirport = function(code) {
$scope.editing = $scope.airports[code];
};
}
and I am including 2 html files in the main index.html file that 2 files airport.html is
<div ng-show="currentAirport">
<h3>{{currentAirport.name}}</h3>
<h4>Destinations</h4>
<ul>
<li ng-repeat="destination in currentAirport.destinations">
{{destination}}
</li>
</ul>
</div>
and another form.html is
<div ng-show="editing">
<h3>Edit Airport</h3>
<input type="text" ng-model="editing.name" value=""/>
</div>
and my 2 remaining html files are present in the folder partials and while executing index.html I am not able to include form.html and airport.html inside index.html file if you have any idea about these let me know thank you.....
Did you actually set scope.editing and scope.currentAirport so the ng-show returns true? I've copied and pasted your code to plunker and works as expected
List: <button ng-repeat="airport in airports" ng-click="setAirport(airport.code)">{{airport.code}}</button>
Edit: <button ng-repeat="airport in airports" ng-click="editAirport(airport.code)">{{airport.code}}</button>
http://plnkr.co/edit/wQt5wrTkE8YXwOaKacBq