I created a rest web api and using AngularJS, I want to receive those json data and store them in a table. I am new to AngularJS. I was able to get all the json data but I want to split them up into each row. I am not sure if I am doing to correctly or not but here is my code:
index.html
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<meta charset="UTF-8">
<title>Angular</title>
<script src="lib/angular.js"></script>
<script src="angularDemo.js"></script>
</head>
<body>
<div ng-controller="demoController">
<table>
<tr>
<th>Id</th>
<th>Question</th>
</tr>
<tr ng-repeat=" quiz values">
<td>{{result.id}}</td> <!-- Does not get any value-->
<td>{{result.question}}</td> <!-- Does not get any value-->
</tr>
</table>
<h1>{{result}}</h1> <!-- gets all the json data -->
</div>
</body>
</html>
js
var app = angular.module("demoApp", []);
app.controller("demoController", function($scope, $http) {
$http.get("http://localhost:8080/quiz/webapi/quiz")
.then(function(response) {
$scope.result = response.data;
});
});
Your ng-repeat is not good,
If i understand your array of results is in $scope.result, so you have to do this kind of ng-repeat :
<tr ng-repeat="row in result">
<td>{{row.id}}</td>
<td>{{row.question}}</td>
</tr>
Related
I am facing an issue while displaying the nested data inside the ng-repeat. I get data for the first 4 fields but those which are more nested like the label and onwards field data do not show up. the last 5 fields appear to be empty and does not fetch the data. Will be glad if anyone could help troubleshoot the issue.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<!-- <p>Today's welcome message is:</p> -->
<table border="2">
<tr>
<th>deliveryRecipient</th>
<th>Pick Up Locality</th>
<th>Delivery Locality</th>
<th>Created On</th>
<th>Name</th>
<th>category</th>
<th>Item Price</th>
<th>Weight</th>
<th>Qty</th>
<th>Action</th>
</tr>
<tr ng-repeat="x in myWelcome">
<td>{{x.deliveryRecipient}}</td>
<td>{{x.pickupLocality}}</td>
<td>{{x.deliveryLocality}}</td>
<td>{{x.createdOn}}</td>
<td>{{x.label}}</td>
<td>{{x.category}}</td>
<td>{{x.actualPriceLabel}}</td>
<td>{{x.weight}}</td>
<td>{{x.quantity}}</td>
<td><button onclick="showgraphqldata()" type="button" class="view">View</button></td>
</tr>
<td ng-repeat="y in x.items">
<td>
<tr ng-repeat="z in y">
<td>{{z.label}}</td>
<td>{{z.category}}</td>
<td>{{z.actualPriceLabel}}</td>
<td>{{z.weight}}</td>
<td>{{z.quantity}}</td>
</tr>
<input type="hidden" value="{{x.uid}}" />
</table>
</div>
<!-- <p>The $http service requests a page on the server, and the response is set as the value of the "myWelcome"
variable.</p> -->
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$http({
method: "GET",
url: "https://api-stg.martcart.pk/api/v1/merchants/incomingOrders?archived=false&isIncomingOrders=true&isPurchaseOrders=true&loadItems=true&pageNumber=1&recordsPerPage=100&statusIn=NEW,VIEWED",
headers: {
datatype: 'JSON',
, 'Content-Type': 'application/json'
}
}).then(function mySuccess(response) {
$scope.myWelcome = response.data;
}, function myError(response) {
$scope.myWelcome = response.statusText;
});
});
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).on('click', '.view', function () {
var uid = $(this).parent().prev().val();
</script>
</body>
</html>
attached images are the responses if json data
enter image description here
enter image description here
I'm trying to fetch the data from the database from a table 'Company' in the output it coming as a json format,i have to display it in a Data Table.
Controller
public function ex(Request $request){
$table = \DB::table('company')->select('name','type','address','city','email','description')->get();
//return view('mydata')->with('company',$table);
return response($table);
}
Route
Route::get('display','Test#ex');
Blade page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("table").toggle();
$.get("{{URL::to('display')}}",function (data) {
$.each(data,function (i,value) {
var tr =$("<tr/>");
tr.append($("<td/>",{
text : value.name /*Get first column*/
}))
})
})
});
});
</script>
</head>
<body>
<button>Click Me</button>
<table border="1px" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Address</th>
<th>City</th>
<th>Email</th>
<th>Description</th>
</tr>
</thead>
</table>
</body>
</html>
the output coming as in following image but i want to display it in a Datatable
you can use yajjra laravel package to show data via ajax
here is the complete tutorial to show data via ajax in datatable
Datable Tutorial
I want to send a angularjs binded value which has mailid's seperated by , to mailto of anchor tag.
team.emails will have a single mail id or many mail id's seperated by comma.
<tr ng-repeat="team in teamsData">
<td>{{team.name}}</td>
<td><a href='mailto:{{team.emails}}'</a></td>
</tr>
On clicking that column in the row should open outlook with the team email addresses in To part.
Kindly let me know if this is the correct approach.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.js"></script>
</head>
<body ng-app = "myapp" ng-controller="homeController">
<table style="width:100%">
<tr ng-repeat="team in teamsData">
<td>{{team.name}}</td>
<td><p>
<a href="mailto:{{team.emails}}" target="_top">
Send Mail</a>
</p></td>
</tr>
</table>
</body>
<script>
angular.module('myapp', []).controller('homeController', ['$scope', function($scope){
$scope.teamsData = [{
name:'john',
emails:'xxx#gmail.com,yyy.gmail.com,zzz.gmail.com'
},
{
name:'mark',
emails:'lll#gmail.com,ppp.gmail.com,ooo.gmail.com'
}]
}])
</script>
</html>
I am very new to angular JS and zurb,I have a controller which displays remote json data located in http://jsonplaceholder.typicode.com/users, but I want to display the response of the controller in form of tables using zurb.When a user clicks on a row, a reveal modal should pop up and show the specific user’s full details including: address, phone number can someone help me how to do this the code below is my angular controller which I have used, my controller just displays the data but I want to display in form tables using zurb tables and grids.
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="usersController">
<ul>
<li ng-repeat="x in names">
{{ x.id + ', ' + x.name + ', '+ x.username + ', '+ x.email}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('usersController', function($scope, $http) {
$http.get(" http://jsonplaceholder.typicode.com/users")
.success(function (data) {$scope.names = data;});
});
</script>
</body>
</html>
As I understand from their website, Zurb table is nothing but with some stylish look and feel, you can use it like this:
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th >User Name </th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in names">
<td ng-bind="x.id"></td>
<td ng-bind="x.name"></td>
<td ng-bind="x.username"></td>
<td ng-bind="x.email"></td>
</tr>
</tbody>
</table>
I have array of scope.students inside the controller. And the data is shown in my view form using ng-repeat in the table. What I want to do now is when I click the button, it should alert the parent index of the specific object. For example I click the button for 1 Brick Med then it should alert 0 because he is in section A. Then when I click the button in 3 it should alert 1 because he is sectionB. I am really new in angularjs any help is millions appreciated thanks
var stud = angular.module("stud", []);
stud.controller("StudentsController", function ($scope) {
'use strict';
$scope.alertMe = function (key){
alert(0);
};
$scope.sectionA = [
{
no:1,
name:'Brick Med',
},
{
no:2,
name: 'Colin Christopher',
},
];
$scope.sectionB = [
{
no:3,
name: 'Frank Joemar Timbang',
},
{
no:4,
name: 'Curtis Zaymond',
}
];
$scope.students = [
$scope.sectionA,
$scope.sectionB
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html data-ng-app="stud">
<head lang="en">
<meta charset="utf-8">
<title>Tally Boxes</title>
</head>
<body data-ng-controller="StudentsController" data-ng-init="init()">
<div id="container">
</div>
<div class="container-table">
<table border="1" width="100%">
<thead>
<tr>
<td>Students</td>
<td>Alert</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key,value) in students[0]">
<td>{{value.no}} {{value.name}}</td>
<td><button ng-click="alertMe(key)">Alert me!</button></td>
</tr>
<tr ng-repeat="(key,value) in students[1]">
<td>{{value.no}} {{value.name}}</td>
<td><button ng-click="alertMe(key)">Alert me!</button></td>
</tr>
</tbody>
</table>
</div>
<script src="angular.min.js"></script>
<script src="tallyboxController.js"></script>
<script src="tallyboxDirective.js"></script>
</body>
</html>
Your ng-repeat is a bit of a mess, but I'm guessing this is what you want to do:
<tbody ng-repeat="studentGroup in students">
<tr ng-repeat="student in studentGroup">
<td>{{student.no}} {{student.name}}</td>
<td><button ng-click="alertMe($parent.$index)">Alert me!</button></td>
</tr>
</tbody>
Note that (key, value) is for when you're iterating over an object's properties, but students is an array.
For the $parent.$index, see Access index of the parent ng-repeat from child ng-repeat
For the tbody ng-repeat see How to use ng-repeat without an html element
You could avoid using $parent.$index by changing the ng-click to alertMe(studentGroup) and $scope.alertMe to
$scope.alertMe = function (studentGroup) {
alert($scope.students.indexOf(studentGroup));
};
But it depends on your final usage which one you'd prefer.