I am trying to print some data from a JSON end point using AngularJS.
End point :- http://localhost:8081/api
JSON structure :-
{
"1": {
"venture": "XYZ Informatics",
"member": [
{
"name": "abcd",
"email": "abcd#gmail.com"
}
],
"message": "This is good day",
"isclicked": false
},
"2": {
"venture": "BBC Informatics",
"member": [
{
"name": "xyz",
"email": "xyz#gmail.com"
}
],
"message": "This is bad day",
"isclicked": false
}
}
I want to display the name of venture s in row. My expected output in row is :-
XYZ Informatics
BBC Informatics
My Code is :-
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<div ng-app="MyApp" ng-controller="displayController">
<table style="width:100%">
<tr ng-repeat="data in datas">
<td>{{ data.venture }}</td>
</tr>
</table>
</div>
<script>
angular.module('MyApp', [])
.controller('displayController', function($scope, $http) {
var url = "http://localhost:8081/api";
$http.get(url).success(function (response) {
$scope.datas = response;
});
}
</script>
</body>
</html>
But the value is not displaying. Probably, I am missing to get into each array of JSON.
There is a syntax error on your script. Close the brackets for your controller.
<script>
angular.module('MyApp', [])
.controller('displayController', function($scope, $http) {
//changed to your local api
var url = "http://localhost:8081/api";
$http.get(url).success(function(response) {
$scope.datas = response;
});
});//this is the place where you miss out the closing bracket
</script>
Here is the working plnkr.
Related
We have plenty of server-side data grid controls, would like to replace them w/ generic clientside Angular. But data is always placed outside of the grid. To find out the cause, I followed the official demo/tutorial, combine .js and .css into local.html, still the same result.enter image description here
Visual Studio 2015 w/ Update, NuGet installed ui-grid(v3.2.9 - 2016-09-21). Must be something missing or the demo has problem.
Here is local.html:
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="/Scripts/ui-grid.js"></script>
<script src="/Content/ui-grid.css"></script>
<style>
.grid { width: 500px; height: 250px;}
</style>
<script>
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.myData = [
{
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo",
"employed": true
},
{
"firstName": "Lorraine",
"lastName": "Wise",
"company": "Comveyer",
"employed": false
},
{
"firstName": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"employed": false
}
];
}]);
</script>
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
</div>
</body>
</html>
Stupid me, I was loading .css using tag.
So this line
<script src="/Content/ui-grid.css"></script>
should be this instead:
<link rel="stylesheet" type="text/css" href="/Content/ui-grid.css">
It's been working as expected.
I've been able to get a JSON file to load into a table fine, but I want to have multiple JSON files and change which one is loaded into the table based on which button has been pressed. I thought I could just make it change the variable data, but then the table still stays the same (I'm assuming you have to make it refresh some how?).
Also, on a side note, is it possible to have the prices have a space between them?
test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="Hello World">
<!-- Latest compiled and minified CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.js"></script>
<script src="data1.json"></script>
<script src="data2.json"></script>
<script>
$(function () {
$('#table').bootstrapTable({
data: data_one
});
$('#data1').on('click', function(event) {
$('#table').bootstrapTable({
data: data_one
});
});
$('#data2').on('click', function(event) {
$('#table').bootstrapTable({
data: data_two
});
});
});
</script>
</head>
<body>
<header>
<div class="jumbotron">
<div class="container">
<h3>Test</h3>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="text-center">
<a class="btn btn-large btn-success" id="data1">Data 1</a>
<a class="btn btn-large btn-success" id="data2">Data 2</a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<table id="table" class="table table-bordered" data-search="true" data-show-toggle="true">
<thead>
<tr>
<th data-field="id" data-sortable="true">ID</th>
<th data-field="name" data-sortable="true">Name</th>
<th data-field="prices" data-sortable="true">Price</th>
</tr>
</thead>
</table>
</div>
</div>
<footer>
<div class="container">
<hr>
<p><small>Google didn't help me</small></p>
</div>
</footer>
</body>
</html>
data1.json:
var data_one = [
{
"id": 0,
"name": "test0",
"prices": [
"$0",
"$5"
]
},
{
"id": 1,
"name": "test1",
"prices": [
"$4",
"$1"
]
},
{
"id": 2,
"name": "test2",
"prices": [
"$2",
"$3"
]
},
];
data2.json:
var data_two = [
{
"id": 4,
"name": "test4",
"prices": [
"$1",
"$2"
]
},
{
"id": 5,
"name": "test5",
"prices": [
"$6",
"$5"
]
},
{
"id": 6,
"name": "test6",
"prices": [
"$9",
"$7"
]
},
];
You need to specify the 'load' method when updating the data in the table:
<script>
$(function () {
$('#table').bootstrapTable({ data: data_one });
$('#data1').on('click', function(event) {
$('#table').bootstrapTable('load', { data: data_one });
});
$('#data2').on('click', function(event) {
$('#table').bootstrapTable('load', { data: data_two });
});
});
</script>
For some reason you cannot initially load the data with load method, only update. You can also append data with "append" method and do lot of cool stuff. Check out the documentation here: Bootstrap Table Documentation
1) You don't need all the ready functions, just one (the functions that look like $(function () {..}).
2) Also, you're not calling the plugin on that element again when you click a button - you have to explicitly do that.
3) Finally, you've not added an event listener to your second button - you added a duplicate listener to your first button.
4) You should remove the inline onclick="data1()" and onclick="data2()" from your HTML buttons.
$(function () {
$('#table').bootstrapTable({
data: data_one
});
$('#data1').on('click', function(event) {
$('#table').bootstrapTable({
data: data_one
});
});
$('#data2').on('click', function(event) {
$('#table').bootstrapTable({
data: data_two
});
});
});
You are not integrating data2() function. You can write your code as below.
$(function () {
$('#table').bootstrapTable({
data: data_one
});
});
function data1(){
$('#table').bootstrapTable({
data: data_one
});
}
function data2(){
$('#table').bootstrapTable({
data: data_two
});
}
I'm trying to add data to a table dynamically through JavaScript, and it returns this:
Uncaught TypeError: Cannot read property 'add' of undefined.
EDIT: The code works perfectly without the row.add line.
Relevant code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/jquery.dataTables.min.css">
<script type="text/javascript" src="./lib/jquery.min.js"></script>
<script type="text/javascript" src="./lib/jquery.dataTables.min.js"></script>
<script>
var dataSet = [
['1.1','2.1'],
['1.2','2.2'],
];
$(document).ready(function() {
$('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
t = $('#example').dataTable(
{
data: dataSet,
columns: [
{ "title": "Col 1" },
{ "title": "Col 2" },
],
});
t.row.add(['1.3', '2.3']) // <-- Fails
});
</script>
</head>
<body>
<div id="demo" style="width:500px"> </div>
</body>
</html>
You are very close. Here is the change I have done to your code:
a. While initializing DataTable, used capital D.
b. Used .draw(); while adding row.
var dataSet = [
['1.1','2.1'],
['1.2','2.2']
];
$(document).ready(function() {
$('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');
var t = $('#example').DataTable({
data: dataSet,
columns: [
{ "title": "Col 1" },
{ "title": "Col 2" }
]
});
t.row.add(['1.3', '2.3']).draw();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<div id="demo" style="width:500px"></div>
Having trouble figuring out this problem involving an Angular checkbox form generated from an API.
I can create a checkboxes but two problems: The checkedness of the boxes does not match the values in what's coming from the API, and when I click the checkboxes the name value changes from its default to "true" or "false." Have seen other similar questions but can't get this to work. Plunk here and source code below:
<!doctype html>
<html ng-app="checkTest">
<head>
<meta charset="utf-8">
<title>Angular Multiple Checkboxes</title>
<style>
label {display:block;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
<script type="text/javaScript">
var jsonObj = {"fruits":[
{
"name": "Apple",
"desc": "abcdefg",
"selected": "true",
"status": "Created"
},
{
"name": "Broccoli",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "Cucumber",
"desc": "abcdefg",
"selected": "false",
"status": "Created"
},
{
"name": "Daikon",
"desc": "abcdefg",
"selected": "false",
"status": "None"
}
]};
var fruitsObj = jsonObj.fruits;
</script>
</head>
<body>
<div ng-controller="MainCtrl">
<label ng-repeat="fruit in fruits">
<input type="checkbox" name="fruitSelect" ng-model="fruit.name" ng-value="{{fruit.name}}" ng-checked="fruit.selected"> {{fruit.name}}
</label>
<p>Services: {{fruits}}</p>
</div>
<script type="text/javaScript">
var app = angular.module('checkTest', []);
app.controller('MainCtrl', function($scope) {
$scope.fruits = fruitsObj;
});
</script>
</body>
</html>
Simply the booleans should be true or false only rather than string 'true' or 'false'
Additionally there is not need of ng-checked directive. You also need to use {{index}} in form field so that it will become an unique element of form like by doing serviceSelect-{{$index}}
Markup
<input
type="checkbox"
name="serviceSelect-{{$index}}"
ng-model="fruit.selected"
ng-value="{{fruit.name}}" />
Demo Plunkr
Checkbox for Angular is true or false. The code should be this:
<input type="checkbox" name="serviceSelect" ng-model="fruit.selected" ng-value="{{fruit.name}}" ng-checked="fruit.selected">
In the code below Hard coded div works fine. But trying to render s using angularJS, which is not working
<!doctype html>
<html ng-app>
<head>
<title> AngularJS Tabs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.box {
margin : 5px;
display : inline-block;
width: 150px;
height: 250px;
background-color: grey;
text-align:center;
vertical-align: top;
}
</style>
</head>
<body>
<!-- Testing hard coded div works -->
<div class='box'>
<b>fdhfg</b>
</div>
<!-- div through loops not works -->
<div ng-app="myApp" ng-controller="myCtrl">
<div class='box' ng-repeat="product in Products">
<b>fdhfg</b>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Products = [
{
"ProductID": "12",
"ProductName": "GreenDetergentBar",
"ProductImagePath": "/images/12.png",
"SubCategoryID": "1",
"SubCategoryName": "DetergentBar",
"BrandID": "1",
"BrandName": "Wheel",
"Variants": [
{
"VariantID": "1",
"VariantName": "500GM",
"VariantImagePath": "/images/12_1.png",
"MRP": "20.00",
"SellPrice": "19.50"
},
{
"VariantID": "2",
"VariantName": "1KG",
"VariantImagePath": "/images/12_2.png",
"MRP": "40.00",
"SellPrice": "38.00"
}
]
},
{
"ProductID": "13",
"ProductName": "AmlaHairOil",
"ProductImagePath": "/images/13.png",
"SubCategoryID": "2",
"SubCategoryName": "HairOil",
"BrandID": "2",
"BrandName": "Dabur",
"Variants": [
{
"VariantID": "3",
"VariantName": "100ML",
"VariantImagePath": "/images/13_3.png",
"MRP": "30.00",
"SellPrice": "29.50"
},
{
"VariantID": "4",
"VariantName": "200ML",
"VariantImagePath": "/images/13_4.png",
"MRP": "60.00",
"SellPrice": "58.00"
}
]
}
];
alert ($scope.Products);
});
</script>
</body>
</html>
Can someone help me to fix the problem?
You've missed to define the app name in ng-app.
But in your js you have mentioned:
var app = angular.module('myApp', []);
So correct in your HTML:
ng-app="myApp"
Oops, you have defined ng-app twice. That's why its not working properly. Only one ng-app must be there.