We Keep Coding

TypeError: Cannot read properties of null (reading 'subTree')

What does this error mean?
error message
this happens when I put my filteredData variable inside the tr tag of the table.
<table id="table">
<tr>
<th>First name</th>
<th>Last Name</th>
<th>Email</th>
<th>Original email</th>
<th>Actions</th>
</tr>
<template>
<tr v-if="(fiteredData = '')">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr
v-else
v-for="data in filteredData"
:key="data.ind_id"
:value="data.ind_id"
>
<td>{{ data.first_name }}</td>
<td>{{ data.last_name }}</td>
<td>{{ data.email }}</td>
<td>{{ data.email }}</td>
<td>
<button #click="sendProps(data)">
<i class="fa-regular fa-edit" aria-hidden="true"></i>
</button>
</td>
</tr>
</template>
</table>
This is my method:
data() {
return {
fetchedData: "",
filteredData: "",
};
},
methods: {
searchResult(e) {
this.filteredData = this.fetchedData.filter((data) => {
return data.email.toLowerCase().includes(this.email.toLowerCase());
});
e.preventDefault();
console.log(this.filteredData);
}
fetchedData get the data from this:
async mounted() {
await axios.get("http://localhost:5000/individuals").then((result) => {
this.fetchedData = result.data;
console.log(this.fetchedData);
});
},

I am guessing this: <tr v-if="(filteredData = '')"> should be: <tr v-if="filteredData === ''">, or even beter: v-if="!filteredData.length". You've misspelled the variable name and are accidentally setting it to an empty string rather than doing a comparison (we've all been there, I'm sure)
On a related note, I would initialize fetchedData and filteredData as empty arrays, not strings, because v-for is meant to iterate over objects and arrays, not strings (even though it's probably smart enough to handle it).

When I encountered this problem in the past it was that the browser itself had an issue and opening my application in a new private window worked.

I want to make a have a datepicker(calendar) to filter my database record base on timestamps (Laravel 6)

How to add a date picker for my reports data (Laravel6)
I still have no idea on where to start.
Here is my report controller(index):
public function index()
{
$reports=Report::orderBy('id', 'DESC')->paginate(10);
return view('reports.index',['reports' => $reports]);
}
Here is my index on my report.index html
<div class="table-responsive">
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th scope="col">Name</th>
<th scope="col">Student number</th>
<th scope="col">Transaction</th>
<th scope="col">Remarks</th>
<th scope="col">Queue number</th>
<th scope="col">Created at</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
#foreach ($reports as $report)
<tr>
<td>{{ $report->name}}</td>
<td>{{ $report->snumber}}</td>
<td>{{ $report->transaction}}</td>
<td>{{ $report->remarks}}</td>
<td>{{ $report->letter}}-{{ $report->number}}</td>
<td>{{ $report->created_at }}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
<div class="card-footer py-4">
<nav class="d-flex justify-content-end" aria-label="...">
{{ $reports->links() }}
</nav>
</div>
My database table look like this:
Schema::create('reports', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('snumber');
$table->string('name');
$table->string('email');
$table->string('mobile');
$table->string('department');
$table->string('letter');
$table->integer('number');
$table->string('transaction');
$table->string('remarks')->nullable();
$table->timestamps();
$table->softDeletes();
});
Please help me. Thanks!

To filter your data first you have to put your datepicker within form tag outside of your table which contains data.
If you want to use ajax call then pass that form value which contains filter date and in same index method you can check that this call is ajax call or not.
If ajax call then override variable with filtered data.
Something like this,
$reports=Report::orderBy('id', 'DESC')->paginate(10);
if($request->ajax()){
$reports=Report::orderBy('id', 'DESC')->whereDate('created_at', today())->paginate(10);
}
return view('reports.index',['reports' => $reports]);
if you dont want to use ajax call and want to load page, then you can pass the data and check that it exist or not, something like this,
$reports=Report::orderBy('id', 'DESC')
->when(! empty(\request('filterdate')), function($q) {
return $q->whereDate('created_at', today());
})
->paginate(10);
return view('reports.index',['reports' => $reports]);
It will only filter date when filterdate is not empty.
Hope this helps :)

How to print Vue objects row by row

I have a Vue application and I am trying to display each 'object' in its own table row. However, I can only get it to display each object in one column or I can get it to a point where each element is in its own row (image below). How would I make it so '0 BTC AUD 14,745.3' is in the first row and then the next object '1 ETH AUD 312.14' is displayed in the second row. I am new to Vue and was wondering if anyone was able to help me out
I have attached an image below as well as my current code, thank you!
<template>
<div class="main">
<div id="container" v-for="(index) in coin" :key="index">
<table class="coins">
<thead>
<tr class="header">
<th>Rank</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<td>{{ index }}</td>
</tbody>
</table>
</div>
</div>
</template>
<script>
import axios from 'axios'
var limit = 20
export default {
name: 'ex',
data: () => ({
coin: []
}),
created () {
axios.get('https://min-api.cryptocompare.com/data/top/totalvolfull?limit=' + limit + '&tsym=AUD')
.then(response => {
for (var i = 0; i < limit; i++) {
this.coin.push(i, response.data.Data[i].CoinInfo.Name, response.data.Data[i].DISPLAY.AUD.PRICE)
// console.log(this.coin[i])
}
})
.catch(e => {
this.errors.push(e)
})
}
}
</script>

Change the way you are pushing data into your coin array, because here in every iteration you are pushing three items (an index, a coin name and a value) into the array but what you want to do is push a single item (an array or object) containing all this information. For code clarity also change the name of the coin array into coins. Something like this should work:
this.coins.push([i, response.data.Data[i].CoinInfo.Name, response.data.Data[i].DISPLAY.AUD.PRICE])
Then change the iteration in your template. First thing change the v-for to something like this:
<div id="container" v-for="(coin, index) in coins" :key="index">
and then when you print the content:
<tbody>
<td>{{ coin[0] }}</td>
<td>{{ coin[1] }}</td>
<td>{{ coin[2] }}</td>
</tbody>
I didn't test this, but I hope the general idea is enough to get you on the right direction.

maybe change how did you create this object
instead do that:
this.coin.push(i, response.data.Data[i].CoinInfo.Name, response.data.Data[i].DISPLAY.AUD.PRICE)
Do something like that
const coinObject = {
index: i,
name:response.data.Data[i].CoinInfo.Name,
price: response.data.Data[i].DISPLAY.AUD.PRICE
}
this.coin.push(coinObject);
and then you can loop like that in your template:
<div id="container" v-for="(coinItem, index) in coin" :key="index">
<table class="coins">
<thead>
<tr class="header">
<th>Rank</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<td>{{ coinItem.index }}</td>
<td>{{ coinItem.name }}</td>
<td>{{ coinItem.price }}</td>
</tbody>
</table>
</div>

get data from a row onclick based from button's row on laravel 4.2

i have this table that outputs a set of records in my view file here is what it looks like
what im trying to do is that when the user clicked the edit button on a specific row, it would get the data from each row, put it in a <p>Data here</p> then display it on the same page
what i have done so far is this, i made an onlick function
here is the code for the table in my view
<table class="table table-striped table-hover" id="detailTable">
<thead>
<tr>
<th>Record ID</th>
<th>School Year</th>
<th>School Quarter</th>
<th>Student Name</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach ($srs as $key => $vu)
<tr>
<td>{{ $vu->StudentRecordID }}</td>
<td>{{ $vu->SchoolYear }}</td>
<td>{{ $vu->SchoolQuarter}}</td>
<td>{{ $vu->full_name}}</td>
<td><button class="btn" id="gid" onclick="tgPanel();" >Edit</button></td>
</tr>
#endforeach
</tbody>
</table>
and here is the code in my javascript
function tgPanel()
{
document.getElementById("rid").innerHTML = document.getElementById("detailTable").rows[0].cells[1].innerHTML ;
document.getElementById("sy").innerHTML = document.getElementById("detailTable").rows[0].cells[2].innerHTML ;
..and so on..
}
well as of now the only thing im getting is the header i dont know how to indicate in the row[0]on what row o clicked the button any ideas?

Your onclick function needs a parameter.
onclick="tgPanel(this)"
Then you can work with the button and get the information.
function tgPanel(button) {
var tr = button.parentElement.parentElement;
}

Using ng-switch to populate a table

I'm using a Angular.js on the front end to populate a table. I want to use ng-switch to display only data that has specific data in one column, for example only show ‘week 1’ data from a list of a NFL schedule, where one column in the data is Weeks.
So right now this code doesn't show anything in the table. If anyone could help explain this it would be greatly appreciated. Maybe I should be using ng-if ? Maybe I should have a button to press to show week 1, week 2 etc.. What's the best solution for this type of situation?
Here's the controller..
// #########################
// Predictions Controller
// #########################
BLV_app.controller('PredictionsController', function($scope, PredictionsFactory, $routeParams) {
PredictionsFactory.getPredictions(function(data) {
$scope.predictions = data;
});
});
Here's the factory..
// ---------------------------
// Prediction Factory
// ---------------------------
BLV_app.factory('PredictionsFactory', function($http) {
var factory = {};
var predictions = [];
factory.getPredictions = function(callback) {
$http.get('/predictions').success(function(output) {
predictions = output;
console.log("prediction factory", predictions);
callback(output);
});
};
return factory;
});
Here's the html..
<table class="table-striped" id="table-style">
<thead id="table-header">
<tr>
<th class="text-center">HomeTeam</th>
<th class="text-center">AwayTeam</th>
<th class="text-center">Prediction</th>
<th class="text-center">Result</th>
</tr>
</thead>
<tbody ng-repeat="predict in predictions" >
<div ng-model="predict.Week"></div>
<tr ng-switch="predict.Week">
<div ng-switch-when="1">
<td ng-if="$odd" style="background-color:#f1f1f1">{{ predict.HomeTeam }}</td>
<td ng-if="$even">{{ predict.HomeTeam }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ predict.AwayTeam }}</td>
<td ng-if="$even">{{ predict.AwayTeam }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ predict.Prediction }}</td>
<td ng-if="$even">{{ predict.Prediction }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ predict.Result }}</td>
<td ng-if="$even">{{ predict.Result }}</td>
</div>
</tr>
</tbody>
</table>

I believe there is something wrong with ng-repeat and ng-switch when binding to elements like tbody and td. Replace them with div and li makes it working properly: JSFiddle.
<div ng-repeat="predict in predictions">
<div ng-model="predict.id"></div>
<div ng-switch="predict.id">
<div ng-switch-when="1">
<li ng-if="$odd" style="background-color:#f1f1f1">{{ predict.name }}</li>
......
Changing from <div ng-repeat="predict in predictions"> to <tbody ng-repeat="predict in predictions"> makes it not working: JSFiddle.
In ng-repeat docs and ng-switch docs, it says:
Usage
as attribute:
<ANY
ng-repeat="">
...
</ANY>
But obviously they cannot be used on ANY elements.