We Keep Coding

How to bind an object to HTML table in Vue.js, where its properties are dynamically created?

I am using vue.js library for front-end development.
I came a cross a scenario where my JavaScript method returns a list, which has objects, object's number of properties can change each time after method execution.
example my list can contain these type of objects in 2 different executions.
var obj = {
Name : "John",
2020-Jan: 1,
2020-Jul: 2
}var obj = {
Name: "John",
2020-Jan: 1,
2020-Jul: 2,
2021-Jan: 3,
2021-Jul: 4
}
Since Property name is dynamically changes is there any way to bind to HTML ?
<div >
<table>
<thead>
<tr>
<th v-for ="row in Result.Headers">
{{row}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="item in Result.Data ">
<td>
{{item.2020-Jan}} // Because don't know the number of properties until run time
</td> // No of <td/>'s can change on no of properties.
<td> // exactly don't know how many <td>'s needed there.
{{item.2020-Jul}}
</td> <td>
{{item.2021-Jan}}
</td>
</tr>
</tbody>
</table>
</div>
Is there way to bind these type of object to fronted in vue.js ?

You need to loop over the item's keys again. This will show all the values in the object
<tbody>
<tr v-for="item in Result.Data ">
<td v-for="(value, key, index) in item">
{{value}}
</td>
</tr>
</tbody>
If you want to filter some of them, for instance check that the keys are valid dates you need to add a v-if and use Date.parse to check for this.
<tbody>
<tr v-for="item in Result.Data ">
<td v-for="(value, key, index) in item" v-if="Date.parse(key) !== NaN">
{{value}}
</td>
</tr>
</tbody>

if u wana show all attr-> u can use this:
<ul v-for="item in Result ">
<li v-for="(value,key,index) in item">{{value}}</li>
</ul>
if u wana show all days u can use v-if and compute to complete youself fillter
<div id="app">
<ul v-for="item in Result" >
<li v-for="(value,key,index) in item" v-if="canShow(key)"> index：{{index}}------ key: {{key}} ------ value：{{value}} </li>
</ul>
</div>
<script>
var vue=new Vue({
el:'#app',
data:{
Result:[{
name: 'SkyManss',
2020-Jan: 1,
2020-Jul: 2
},{
name: 'SkyManss2',
2020-Jan: 1,
2020-Jul: 2,
2021-Jan: 3,
2021-Jul: 4
}]
},
computed:{
canShow(){
return function(skey){
return skey.indexOf('-') > -1;
}
}
}
});
</script>

after some research and some of your suggestions I came up with an answer.
<div>
<table>
<thead>
<tr>
<th v-for ="row in Result.Headers">
{{row}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="item in Result.Data ">
<td v-for="row in Result.Headers">
{{item[row]}}
</td>
</tr>
</tbody>
</table>
</div>
Javascript code
this.Result.Headers = Object.keys(result.data[0]);
this.Result.Data = result.data;
But this code only worked for the first time. second time data didn't get updated. So I updated JavaScript code to following code.
Vue.set(self.Result, 'Headers', []);
Vue.set(self.Result, 'Result', []);
this.Result.Headers = Object.keys(result.data[0]);
this.Result.Data = result.data;
Vue does not allow dynamically adding new root-level reactive properties to an already created instance. That I got to know from following post.
vue.js is not updating the DOM after updating the array
Thank You All !!!

Vue v-for expand only clicked data

I have a Vue project with Firebase. I am using v-for for getting data from Firebase database and I have a "description" value. When users click anywhere on tr I want to expand and show only clicked value's description. But in my code; when I click tbody expand all description values. How can I fix this?
My code:
<tbody v-for="item in items" :key="item.id" #click="isClicked = !isClicked">
<tr >
<td>
{{item.name}}
</td>
<td>
{{item.surname}}
</td>
<td>
{{item.explanation}}
</td>
<td>
<span #click="isDelete(item)">X</span>
</td>
</tr>
<tr v-if="isClicked === true">
{{item.desc}}
</tr>
</tbody>
Thank for helping.

Get the index of the loop:
v-for="(item, index) in items"
Make a function which accepts the index as an argument:
setActiveRow(index)
Assign the index to the isClicked variable:
setActiveRow(index) {
this.isClicked = index
}
Now use that as your click function and compare the isClicked variable in your row:
<tbody v-for="(item, index) in items" :key="item.id" #click="setActiveRow(index)">
And then only show the specific row if the index matches:
<tr v-if="isClicked === index">
<td> {{ item.desc }} </td>
</tr>

First you need to understand what actually your code is doing, you are listening to click at tbody, and on click of that you are setting the flag isClicked as true/false, and all your items are v-if(ed) at single flag i.e., isClicked. So whenever the flag changes every v-if will also react, that is why every description is shown, which definitely is not desired.
Listening to click on tbody is wrong you should listen to click at every tr-s, so that you can actually know which tr is clicked. Now on click of any tr, store the id of that tr and display the description of the respective item.
Well there is a small work around you can actually do in your code to make it work as you wanted.
Here is the modified code.
<tbody v-for="item in items" :key="item.id">
<tr #click="isClicked = item.id">
<td>
{{item.name}}
</td>
<td>
{{item.surname}}
</td>
<td>
{{item.explanation}}
</td>
<td>
<span #click="isDelete(item)">X</span>
</td>
</tr>
<tr v-if="isClicked === item.id">
{{item.desc}}
</tr>
</tbody>
I hope it helps.

ng repeat in table using Angularjs

The Array I use is [{"cell":["jobcode","resume_number","score"]},{"cell":["jc100","rc1",80]},{"cell":["jc100","rc123",70]}]
And I came up with javascript code as
var cell=response;
for (var i in cell) {
for(var j in cell[i])
{
console.log(cell[i][j]);
profiles.push(cell[i][j]);
$scope.profiles=profiles;
for(k in cell[i][j])
{
resumes.push(cell[i][j]);
console.log("resume length"+resumes.length);
$scope.columns=resumes;
console.log(JSON.stringify($scope.columns));
}
}
}
And html is
<tr ng-repeat="profile in profiles track by $index" >
<td ng-repeat="col in columns track by $index">
<label >{{col.cell}}</label>
</td>
</tr>
And ended up enter image description here
I have no idea to proceed further. I need to organize those data as a table. Please help.

Your data contains an array of objects which contains another array. Therefore, you need to extract each object from outer array and then go down to inner one.
If you need this data only to organise them in a table, then you can simply use the following code:
Your Controller code:
$scope.cell = response;
Your HTML :
<tr ng-repeat="profile in cell track by $index" >
<td ng-repeat="col in profile.cell track by $index">
<label >{{col}}</label>
</td>
</tr>
In case you need to store each array object, then you can use forEach loop:
Your controller code:
var cell=[{"cell":["jobcode","resume_number","score"]}, {"cell":["jc100","rc1",80]}, {"cell":["jc100","rc123",70]}];
angular.forEach(cell, function(data){
$scope.profiles.push(data);
});
Your HTML :
<table>
<tr ng-repeat="profile in profiles track by $index" >
<td ng-repeat="col in profile.cell track by $index">
<label >{{col}}</label>
</td>
</tr>
</table>

Try the following code. Take header as separate part from json and display header first then start ng-repeat from index first
<table border="1">
<tr>
<td>
{{columns[0].cell[0]}}
</td>
<td>
{{columns[0].cell[1]}}
</td>
<td>
{{columns[0].cell[2]}}
</td>
</tr>
<tr ng-repeat="col in columns" ng-if="$index>0">
<td>
{{columns[$index].cell[0]}}
</td>
<td>
{{columns[$index].cell[1]}}
</td>
<td>
{{columns[$index].cell[2]}}
</td>
</tr>
</table>

How to make a custom HTML id by evaluating an expression

I try to make a version of "tic tac toe" with AngularJS and be as minimalistic as possible. The only solution for my problem is to assign every button a unique ID (f+i).
HTML
<table>
<tr ng-repeat="f in [5,10,15]">
<!-- numbers chosen for unique combos-->
<td ng-repeat="i in [0,1,2]">
<button ng-click="toTrue()" >
<div >
{{getXO()}}
</div>
</button>
</td>
</tr>
</table>
JavaScript
$scope.XObool=false;
$scope.toTrue = function() {
if(!$scope.XObool){
$scope.XObool=true;
}
else if($scope.XObool) {
$scope.XObool=false;
}
};
$scope.getXO = function(){
if($scope.XObool){
return 'X';
}
else {
return 'O';
}
};

ng-repeat gives you several variables to work with, namely $index. In your case you'll want something like:
<button id="{{$index}}" ...>
More info on the ng-repeat docs.
Second Option
Use the f and i variables to create unique IDs.
<table ng-app>
<tr ng-repeat="f in [5,10,15]" data-id="{{$index}}">
<td ng-repeat="i in [0,1,2]">
<button id={{'id' + (i+f)}} ng-click="toTrue()">
{{'id'+(i+f)}}
</button>
</td>
</tr>
</table>
Here's a demo.

You don't need to assign each button a unique ID.
Instead, you can pass your f and i variables into your functions to track the board state:
<table>
<tr ng-repeat="f in [0,1,2]">
<!-- numbers chosen for unique combos-->
<td ng-repeat="i in [0,1,2]">
<button ng-click="setState(f, i)">
<div >
{{ getXO(f,i) }}
</div>
</button>
</td>
</tr>
</table>
Working fiddle here: http://jsfiddle.net/m76w3kf5/

try markup binding with {{}} or $index
<div id="{{someObject.id}}" class="some-class" ng-repeat="f in [ array ]">
..
</div>
or a slightly extended example with $index, listing thumbnails in array with clicks to reference position by index
<tr ng-repeat="array in thumbnails track by $index">
<td ng-repeat="object in array track by object.id"
ng-click="tableClickHandler($index, object)">
<img class="user-thumbnail" src="{{object.src}}">
</td>
</tr>

Ng-init if array not yet created

I'm trying to build a template for a application and want to display a dynamic list with names. so i got this code to show the list and add/remove rows;
<table ng-init="page.businessRows = []">
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Phone</th>
</tr>
</thead>
<tr ng-repeat="row in page.businessRows">
<td>
<input type="text" ng-model="row.name" />
</td>
<td>
<input type="text" ng-model="row.contact" />
</td>
<td>
<input type="text" ng-model="row.phone" />
</td>
<td>
<button ng-click="page.businessRows.splice($index,1)">
Remove
</button>
</td>
</tr>
</table>
<button class="btn" ng-click="page.businessRows.push({})">addRow</button>
the thing as that when this template is loaded page.busnessRows will most likely be loaded with rows so i want to change the ng-init to only create the empty array if businessRows is not initialised.
I have tried ng-init="page.businessRows = page.businessRows.length < 1 ? [] : page.businessRows but it did not work. How am i inteded to do conditions in jsangular expressions?
All help appreciated. Thanks in advance

You can do this instead:
<table ng-init="page.businessRows = page.businessRows || []">
Update
I look at the parser code of AngularJS and notice that version 1.2 (currently RC) supports ternary expression. So if you use AngularJS 1.2, this will also work (although more verbose than the above code):
<table ng-init="page.businessRows = page.businessRows == null ? [] : page.businessRows">
See demo here.
However, your original code might not work if page.businessRows is null, because the parser will fail to dereference length property of null. So just be careful there.

I don't think the ng-init will evaluate conditional statements properly. But you could refactor the condition into a controller function and call the function from ng-init.
<table ng-init="initializeBusinessRows(page.businessRows)">
The just put your conditional evaluation in the function on the controller scope.

I think you're trying to solve the wrong problem.
The problem is that you're allowing an action to occur before the data is loaded or ready. A secondary problem is you're using an expression in an ng-click where a scope function or controller function should be.
So...
Disable that button if the form isn't ready.
Use your controller to control these interactions.
So here's an example of the controller. The $timeout was added to simulate a delayed load of data into your $scope.page variable.
app.controller('MyCtrl', function($scope, $timeout, $window) {
//Timeout to simulate the asynchronous load
//of the page object on the $scope
$timeout(function(){
$scope.page = {
businessRows: []
};
}, 2000);
//scope method to add a row.
$scope.addRow = function (){
//for safety's sake, check to see if the businessRows array is there.
if($scope.page && angular.isArray($scope.page.businessRows)) {
$scope.page.businessRows.push({});
}
};
//scope method to remove a row
$scope.removeRow = function(index, row) {
if($window.confirm('Are you sure you want to delete this row?')) {
$scope.page.businessRows.splice(index, 1);
}
};
});
... and the HTML view (notice the ng-disabled and the ng-click) (and lack of ng-init):
<div ng-controller="MyCtrl">
<table>
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in page.businessRows">
<td>
<input type="text" ng-model="row.name" />
</td>
<td>
<input type="text" ng-model="row.contact" />
</td>
<td>
<input type="text" ng-model="row.phone" />
</td>
<td>
<button ng-click="removeRow($index, row)">
Remove
</button>
</td>
</tr>
</tbody>
</table>
<button class="btn" ng-disabled="!page" ng-click="addRow()">addRow</button>
</div>
Also, here's the obligatory Plunker for you to see this in action.