Remove many table values AngularJS - javascript

I am trying to figure out how to remove all table values from 'dzviokli' that hasnt got same 'majaId' with 'maja.ID'
This is my html
<tbody>
<tr ng-repeat="maja in majas">
<td>{{maja.numurs}}</td>
<td>{{maja.iela}}</td>
<td>{{maja.pilseta}}</td>
<td>{{maja.valsts}}</td>
<td>{{maja.pasts}}</td>
<td><button ng-click="linkedDzivokli(maja)" class="dzivoklap poga">Dzivokli</button></dt>
</tr>
</tbody>
<tbody>
<tr ng-repeat="dz in dzivokli">
<td>{{dz.numurs}}</td>
<td>{{dz.stavs}}</td>
<td>{{dz.ist_sk}}</td>
<td>{{dz.iedz_sk}}</td>
<td>{{dz.pilna_plat}}</td>
<td>{{dz.dziv_plat}}</td>
</tr>
</tbody>
This is my js. The maja.ID is maja from another database and it contais value ID. Table dzivokli has value 'MajaId' and it is linked with table 'maja' value ID.
$http.get("http://localhost:20988/api/maja").success(function (response){$scope.majas = response;});
$http.get("http://localhost:20988/api/dzivoklis").success(function(response){$scope.dzivokli = response;});
var sar = $scope.dzivokli;
var index = maja.ID;
lala(sar,index);
}
function lala(sar,index)
{
for(var i = 0; i < sar.length; i++)
{
if(sar[i].MajaId != index)
{
var x = sar.indexOf(sar[i]);
}
sar.splice(x,1);
}
}


Test with this:
for (var i = 0; i < maja.length; i++) {
seekAndDestroy($scope.dzivokli,majaId, maja[i].ID);
}
function seekAndDestroy(obj, key, value){
for (var i = 0; i < obj.length; i++) {
if (obj[i][key] == value) {
obj.splice(i, 1);
break;
}
}
}


I have figured it out. Thanks jlizanab for answering :)
Here is my js
$scope.linkedDzivokli = function(maja)
{
$http.get("http://localhost:####/api/dzivoklis").success(function(response){
var garums = response.length;
for (var i = 0; i != garums; i++)
{
if (response[i].MajaId == maja.ID) {}
else
{
response.splice(response.indexOf(response[i]), 1);
garums = garums - 1;
i = i - 1;
}
}
$scope.dzivokli = response;
});
}

Related

Add a column to a table with AngularJS

I tried to add a column if a button is pressed, but with no success.
I made a JSFiddle example with my problem.
I would be very thankful if someone could help me with this problem.
This is my try:
$scope.addValue = function() {
$scope.headers.push('new header');
var users = 5;
for(var i = 0; i < users; i++) {
var rowData = [];
for (var j = 0; j < 1; j++) {
rowData.push('data i=' + i + ' j=' + j)
}
$scope.data.push(rowData);
}
};

Here is a working example based on this JSFiddle.
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.headers = [];
$scope.data = [];
$scope.colCount = 3;
var data = [];
// populate demo data
for (var i = 0; i < 10; i++) {
$scope.headers.push('Col ' + (i + 1));
var rowData = [];
for (var j = 0; j < 10; j++) {
rowData.push('Row-' + (i + 1) + ' - Col ' + (j + 1))
}
data.push(rowData);
}
$scope.increment = function(dir) {
(dir === 'up') ? $scope.colCount++: $scope.colCount--;
}
$scope.data = data;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<button ng-click="increment('up')">Add Column</button>
<button ng-click="increment('down')">Remove Column</button>
<table>
<tr>
<th ng-repeat="h in headers | limitTo: colCount">{{h}}</th>
</tr>
<tr ng-repeat="row in data">
<td ng-repeat="item in row | limitTo: colCount">{{item}}</td>
</tr>
</table>
</div>

Laravel - Javascript CSS styling doesn't get applied even though code works in console

from highlights.js:
$(document).ready(function()
{
$("#myTable").tablesorter();
setAllDifferentHeight();
highlight();
}
);
function highlight()
{
var firsts = document.getElementsByClassName("first");
for(var i=0; i<firsts.length; i++){
firsts[i].style.backgroundColor = "gold";
}
var seconds = document.getElementsByClassName("second");
for(var i=0; i<seconds.length; i++){
seconds[i].style.backgroundColor = "silver";
}
var thirds = document.getElementsByClassName("third");
for(var i=0; i<thirds.length; i++){
thirds[i].style.backgroundColor = "brown";
}
var lasts = document.getElementsByClassName("last");
for (var i = lasts.length - 1; i >= 0; i--) {
lasts[i].style.backgroundColor = "pink";
}
}
from index.blade.php:
#foreach($student as $s)
<?php $sum = $s->mc+$s->tc+$s->hw+$s->bs+$s->ks+$s->ac; ?>
#if($sum == $first)
<tr class = "first">
#elseif($sum == $second)
<tr class = "second">
#elseif($sum == $third)
<tr class = "third">
#elseif($sum == $last)
<tr class = "last">
#endif
The HTML is generated with the right classes in the right places, but no highlighting is done by the javascript. When I run the Javascript code in the console, it does what I want it to. What is the issue here?

How to return total to <td> tag angular JS from controller

I need to return a total IR for each table cell. This is not working And I am not sure why. How
$scope.getTotalb = function () {
var totalb = 0;
for (var i = 0; i < $scope.items.length; i++) {
if (120 > $scope.items[i].product && $scope.items[i].product> 90) {
var product = $scope.items[i].IR;
totalb += ($scope.items[i].IR);
}
return totalb;
}
}
$scope.getTotalc = function () {
var totalc = 0;
for (var i = 0; i < $scope.items.length; i++) {
if (90 > $scope.items[i].product&& $scope.items[i].product> 60) {
var product = $scope.items[i].IR;
totalc += ($scope.items[i].IR);
}
return totalc;
}
}
For Each table data cell, call the function to get total.
<td><b>Total:</b></td>
<td><b>{{Totala()}}</b></td>
<td><b></b>{{Totalb()}}</td>

There are multiple errors in your code.
First, you should put the return statement at the end of your function instead of within your for loop.
Second, the names of the functions are different in your template. In your controller you use getTotalb but in the template you use Totalb.

You should put your return statement outside of for loop

remove the "return ...." from your 2 "for" loops and make your totals available through the scope.
$scope.getTotalb = function () {
var totalb = 0;
for (var i = 0; i < $scope.items.length; i++) {
if (120 > $scope.items[i].product && $scope.items[i].product> 90) {
var product = $scope.items[i].IR;
totalb += ($scope.items[i].IR);
}
}
$scope.totalb=totalb ;
}
$scope.getTotalc = function () {
var totalc = 0;
for (var i = 0; i < $scope.items.length; i++) {
if (90 > $scope.items[i].product&& $scope.items[i].product> 60) {
var product = $scope.items[i].IR;
totalc += ($scope.items[i].IR);
}
}
$scope.totalc=totalc ;
}

Create a table from an object jquery/javascript

I am trying to implement the following.
A user enters a sentence into a textbox following which a table is created. An example would be this.
Input: "This is what I want to achieve"
Result:
Currently, based on the code I have there is an object that looks like this:
{t: ["this", "to"], i: ["is", "i"], w: ["what", "want"], a: ["achieve"]};
Below is the current code I have (also see jsfiddle here).
I am able to take the input string and create a table with a row which has the first letter of each word.
HTML
<textarea id="text-input" name="textarea" rows="5" cols="25">This is what I want to achieve</textarea>
<button class="calculate">Calculate</button>
<table>
<tbody>
<tr class="words-header"></tr>
</tbody>
</table>
Javascript
$(document).ready(function() {
$(".calculate").click(function() {
var result = {},
arr = [];
var array = $("#text-input").val().toLowerCase().split(" ");
for (var i = 0; i < array.length; i++) {
if (typeof result[array[i][0]] == 'undefined') {
result[array[i][0]] = [];
}
result[array[i][0]].push(arr[i]);
}
for (var key in result) {
$(".words-header").append("<td>" + key.toUpperCase() + "</td>");
}
});
});
I believe the final table should look like this if it helps:
<table>
<tr>
<td>A</td>
<td>I</td>
<td>T</td>
<td>W</td>
</tr>
<tr>
<td>achieve</td>
<td>is</td>
<td>this</td>
<td>what</td>
</tr>
<tr>
<td> </td>
<td>i</td>
<td>to</td>
<td>want</td>
</tr>
</table>

You can do it this way (Try it by clicking the Run code snippet button below):
var app = app || {};
(function() {
"use strict";
var result, arr;
app.initialize = {
init: function() {
app.splitWords.init();
}
};
app.splitWords = {
init: function() {
$(".calculate").click(function() {
result = [];
arr = $("#text-input").val().split(" ");
app.createMultiArray.init(arr);
});
}
};
app.createMultiArray = {
init: function(array) {
for (var i = 0; i < array.length; i++) {
var letter = array[i][0].toLowerCase();
if (typeof result[letter] == 'undefined') {
result[letter] = [];
}
result[letter].push(array[i]);
}
// I added this method
app.buildTable.init(result);
}
};
app.buildTable = {
init: function(result) {
var headers = Object.keys(result),
max_rows = 0,
rows_html = '';
headers.sort();
app.createHeaders.init(headers);
// Determine how many rows you'll need
for (var i = 0; i < headers.length; i++) {
if(result[headers[i]].length > max_rows) { max_rows = result[headers[i]].length; }
}
// Loop "max_rows" times
for (var i = 0; i < max_rows; i++) {
rows_html += '<tr>';
// Loop through all letters
for(var j = 0; j < headers.length; j++) {
rows_html += '<td>';
if(i < result[headers[j]].length) {
rows_html += result[headers[j]][i];
}
rows_html += '</td>';
}
rows_html += '</tr>';
}
$(".words-header").after(rows_html);
}
};
app.createHeaders = {
init: function(headers) {
// Empty the table in case of multiple tries
$(".words-header").parent().html('<tr class="words-header"></tr>');
for (var i = 0; i < headers.length; i++) {
$(".words-header").append("<td>" + headers[i].toUpperCase() + "</td>");
}
}
};
app.docOnReady = {
init: function() {
app.initialize.init();
}
};
$(document).ready(app.docOnReady.init);
})(jQuery);
#results-table table{ border-collapse: collapse; } #results-table td{ border: 1px solid #000; padding: .2em;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="text-input" name="textarea" rows="5" cols="25">This is what I want to achieve</textarea>
<button class="calculate">Calculate</button>
<div id="results-table">
<table>
<tbody>
<tr class="words-header"></tr>
</tbody>
</table>
</div>

read data from json file and create html file

Hello I am new for jquery and json file,I want to create html file from json file.first data read from .json file then on the basis of json object create html file my json data is :--
{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"5544F75A-4589-4605-B447-0AB123A1865D","parent_guid":"00000000-0000-0000-0000-000000000000","ElementName":"Main","elementtype":"Form","elementsource":"","onload":"","sequence":"0","isPublic":"0","attributes":{"width":"28%","height":"200px"}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"6EB6C873-E2EC-4515-A6D8-2FBF0119F573","parent_guid":"5544F75A-4589-4605-B447-0AB123A1865D","ElementName":"MainTab","elementtype":"tab","elementsource":"","onload":"","sequence":"0","isPublic":"0","attributes":{"width":"65%"}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"6E13FCBC-0DB2-4499-B200-61CD5A36F0C1","parent_guid":"6EB6C873-E2EC-4515-A6D8-2FBF0119F573","ElementName":"Results","elementtype":"tabdetail","elementsource":"","onload":"","sequence":"2","isPublic":"0","attributes":{"":""}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"E5539403-9A58-4310-8013-AF4EEF62C217","parent_guid":"6EB6C873-E2EC-4515-A6D8-2FBF0119F573","ElementName":"Billing","elementtype":"tabdetail","elementsource":"","onload":"","sequence":"1","isPublic":"0","attributes":{"":""}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"113293EE-0997-4398-8E4A-6BE7AEDC32C1","parent_guid":"6EB6C873-E2EC-4515-A6D8-2FBF0119F573","ElementName":"Utilities","elementtype":"tabdetail","elementsource":"","onload":"","sequence":"3","isPublic":"0","attributes":{"":""}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"4EFA32EC-B37E-4DC2-A249-E7156196918F","parent_guid":"6E13FCBC-0DB2-4499-B200-61CD5A36F0C1","ElementName":"ResultsTab","elementtype":"tab","elementsource":"","onload":"","sequence":"0","isPublic":"0","attributes":{"":""}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"F6FB6DAA-F6D9-43B0-88FD-688BEC0EAF32","parent_guid":"E5539403-9A58-4310-8013-AF4EEF62C217","ElementName":"BillingTabHeader","elementtype":"tab","elementsource":"","onload":"","sequence":"1","isPublic":"0","attributes":{"":""}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"9E622E70-095A-4A1A-BA06-C67946D49549","parent_guid":"F6FB6DAA-F6D9-43B0-88FD-688BEC0EAF32","ElementName":"Current Billing","elementtype":"","elementsource":"","onload":"","sequence":"3","isPublic":"0","attributes":{"":""}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"B41D9F7B-ED6F-47C5-8562-437D9F5F23AD","parent_guid":"F6FB6DAA-F6D9-43B0-88FD-688BEC0EAF32","ElementName":"Billing","elementtype":"","elementsource":"Sp_getBilling","onload":"","sequence":"1","isPublic":"0","attributes":{"":""}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"151F6F13-C200-4EDA-8467-1D5AEB5F03A2","parent_guid":"F6FB6DAA-F6D9-43B0-88FD-688BEC0EAF32","ElementName":"PreBilling","elementtype":"","elementsource":"","onload":"","sequence":"2","isPublic":"0","attributes":{"":""}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"91158CB4-C93B-4440-BAA4-771E9493EEA9","parent_guid":"F6FB6DAA-F6D9-43B0-88FD-688BEC0EAF32","ElementName":"Final Billing","elementtype":"","elementsource":"","onload":"","sequence":"4","isPublic":"0","attributes":{"":""}}
I tried this but this is not :-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div style="margin: 20px auto; width: 500px;">
<form border="1" cellpadding="5" id="jsonTable" style="border-collapse: collapse;">
</form>
</div>
<script type="text/javascript">
function addAllColumnHeaders(myList) {
var columnSet = [];
var headerTr$ = $('<tr/>');
for (var i = 0; i < myList.length; i++) {
var rowHash = myList[i];
for (var key in rowHash) {
if ($.inArray(key, columnSet) == -1) {
columnSet.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
$("#jsonTable").append(headerTr$);
return columnSet;
}
$.getJSON("demo.json", function (data) {
var columns = addAllColumnHeaders(data);
for (var i = 0; i < data.length; i++) {
var row$ = $('<tr/>');
for (var colIndex = 0; colIndex < columns.length; colIndex++) {
var cellValue = data[i][columns[colIndex]];
if (cellValue == null) { cellValue = ""; }
row$.append($('<td/>').html(cellValue));
}
$("#jsonTable").append(row$);
}
});
I want to create html according to element type in JSON array. if like element type is form then html create form and if element type is tab then create tab.

for (var i = 0; i < data.length; i++) {
if (data[i].elementtype === "Form" {
//build form here
}
if (data[i].elementtype === "tab" {
var columns = addAllColumnHeaders(data);
//etc
}
}

Categories