Develop Reference

VueJS: JSON objects are not showing in my code

I have API that stores JSON data as shown in JSON body below... I wanted to show the data amount stored in installments but it didn't work good because its showing me each amount value two times and I couldn't figure out the problem here.
{
"response": [{
"floors": [{
"flats": [{
"status": "sold",
"price": "150000",
"currency": "USD",
"end_date": "Not Set",
"buyer": "ella",
"buyer_phone_number": "002822128",
"receipt_number_field": "553108012022",
"size_unit": "M",
"_id": "61d9b61397e87e39832a5abb",
"flat_number": 1,
"description": "This is a newly created flat.",
"city": "NY",
"payment": {
"installment_payment": {
"installments": [{
"amount": "1344",
"date": "2022-01-13",
"is_paid": false
},
{
"amount": "444",
"date": "2022-01-24",
"is_paid": false
},
{
"amount": "44444",
"date": "2022-01-17",
"is_paid": false
}
],
"remaining": "150000"
},
"paid_amount": "1234"
},
"floor": "61d9b61397e87e39832a5aba",
"building": "61d9b61397e87e39832a5ab9",
"size": "176.25",
"directions": " south",
"createdAt": "2022-01-08T16:04:43.557Z",
"updatedAt": "2022-01-08T16:22:29.220Z",
"__v": 0
},
my code:
<div v-for="(flat,index) in Flats" :key="index">
<div v-for="(find,indexT) in flat.payment" :key="indexT" >
<div v-if="flat.payment.installment_payment">
<div v-for="(find,indexT) in flat.payment.installment_payment.installments" :key="indexT">
<div v-if="find.amount >0">
<p> {{find.amount}}$ amount </p>
</div>
</div>
</div>
</div>
</div>
p.S: I stored my API data in array Flats

This will probably work, but it's untested.
You generally do not want to use v-if inside of v-for; instead, you should filter the data first and use the result in the v-for loop. [reference]
Also, since each flat has an _id field, you can use that instead of the index for the top level :key attribute.
<div v-for="flat in flatsWithPayments" :key="flat._id">
<div v-for="(installment, index) in getInstallmentsWithPaymentGTZero(flat.payment.installment_payment.installments)" :key="index">
<p> {{installment.amount}}$ amount </p>
</div>
</div>
Obviously, replace Flats with your data, but also note that in order to compare the payment amount, it needs to be converted with either Number(), parseInt() or parseFloat()
// Flats = { ... }
export default {
computed: {
flatsWithPayments() {
return Flats.filter(f => f.payment != undefined)
}
},
methods: {
getInstallmentsWithPaymentGTZero(installments) {
return installments.filter(i => Number(i.amount) > 0)
}
}
}

How to create and populate multiple tables from multidimensional array using javascript

I am trying to create and populate multiple tables from a multidimensional array. My array is a multidimensional array that looks like below:
{
"John Snow": [
{
"user_id": "4",
"id": "28",
"clock_in": "2019-06-03 14:32:14",
"clock_out": "2019-06-04 14:32:14",
"time": "24.00",
"first_name": "John",
"last_name": "Snow"
},
{
"user_id": "4",
"id": "29",
"clock_in": "2019-06-04 20:47:18",
"clock_out": "2019-06-05 18:47:18",
"time": "22.00",
"first_name": "John",
"last_name": "Snow"
}
],
"Frank Thomas": [
{
"user_id": "6",
"id": "30",
"clock_in": "2019-06-03 06:32:04",
"clock_out": "2019-06-05 14:05:04",
"time": "55.55",
"first_name": "Frank",
"last_name": "Thomas"
}
]
}
I am not sure how to loop through this with javascript, I'm guessing I will need to nest a for loop but not sure how to structure it.
I was able to loop through and populate a single table just fine when my array structure was a single array with no keys using the below code:
<div id="tables"></div>
<script type="text/javascript">
function search_data(){
var fromDate = $('#from_date').val();
var toDate = $('#to_date').val();
var userId = $('#employee_option').val();
$.ajax({
url:"<?php echo base_url(); ?>clock/search_data",
method:"post",
dataType:"JSON",
data:{fromDate:fromDate, toDate:toDate, userId:userId},
success:function(data){
console.log(data)
var html = '<table class="table table-striped table-condensed table-responsive" id="myTable"><thead><tr><th>Employee</th><th>Time In</th><th>Time Out</th><th>Total Time</th><th>Action</th></tr></thead><tbody>';
for(var count = 0; count < data.length; count++){
html += '<tr>';
html += '<td class="table_data" data-row_id="'+data[count].id+'" data-column_name="id" >'+data[count].first_name+" "+data[count].last_name+'</td>';
html += '<td><input type="text" class="dateedit" data-row_id="'+data[count].id+'" data-column_name="clock_in" value="'+data[count].clock_in+'"></td>';
html += '<td><input type="text" class="dateedit" data-row_id="'+data[count].id+'" data-column_name="clock_out" value="'+data[count].clock_out+'"></td>';
html += '<td class="table_data" data-row_id="'+data[count].id+'" data-column_name="time">'+data[count].time+'</td>';
html += '<td><button type="button" name="delete_btn" id="'+data[count].id+'" class="btn btn-xs btn-danger btn_delete"><span class="glyphicon glyphicon-trash"></span></button></td></tr>';
}
$('#tables').html(html);
$('.dateedit').each(function(){
$(this).datetimepicker({
format: "YYYY-MM-DD H:mm:ss",
sideBySide: true
});
});
}
});
}
</script>
Any help would be appreciated, hopefully this makes sense.
Here is a picture of what I have with a basic array:
Here is what I am trying to accomplish:

I would loop over the employees and pass them to another function to print out each employee... because I find nested loops hard to understand. easier to maintain & modify separate functions, IMO.
Note: I am a PHP dev who does minimal javascript, so don't expect my code to be up to snuff. I think this does what you want.
let employees = {
"John Snow": [
{
"user_id": "4",
"id": "28",
"clock_in": "2019-06-03 14:32:14",
"clock_out": "2019-06-04 14:32:14",
"time": "24.00",
"first_name": "John",
"last_name": "Snow"
},
{
"user_id": "4",
"id": "29",
"clock_in": "2019-06-04 20:47:18",
"clock_out": "2019-06-05 18:47:18",
"time": "22.00",
"first_name": "John",
"last_name": "Snow"
}
],
"Frank Thomas": [
{
"user_id": "6",
"id": "30",
"clock_in": "2019-06-03 06:32:04",
"clock_out": "2019-06-05 14:05:04",
"time": "55.55",
"first_name": "Frank",
"last_name": "Thomas"
}
]
};
function get_employee_table(employeeName, employees){
let str = "<table><tr><td>Employee Name</td><td>Clock In</td><td>Clock Out</td></tr>";
for (let index in employees[employeeName]){
let clock = employees[employeeName][index];
str +="<tr><td>"+(clock['first_name']+" "+clock['last_name'])+"</td>"
+ "<td>"+clock['clock_in']+"</td>"
+ "<td>"+clock['clock_out']+"</td>"
+ "</tr>";
}
str +="</table>";
return str;
}
for (let employee in employees){
document.getElementById("employee_table_demo").innerHTML = document.getElementById("employee_table_demo").innerHTML +
get_employee_table(employee,employees);
}
<div id="employee_table_demo"></div>
Now... here's where I share my opinion. I think you probably could have done this on your own. I had a hard time figuring out how to correctly loop over the objects, since the forin gave me the key, rather than the value. But the actual operation wasn't very complex. I realize we're all at different stages in our skill set, and if you're newer this could have seemed very perplexing. It seems like the kind of problem, though, that just required more elbow grease and maybe pushing through some frustration. T'was a nice learning experience for me though. And a good way to avoid working on my own projects lol.

Use a for..in loop to loop through the object and forEach through the array.
for(let row in data) {
data[row].forEach(cell => {
...
}
}

DataTable with button, append element to list

I am using the datatables plugin from jquery and I have added to my datatable a button. When pressing the button I would like to add the elements title to an unordered list element.
Find below my minimum viable example:
const results = {
"generalInfo": [{
"title": "title1",
"permalink": "www.link.com",
"manufacturer": "manufacturer1",
"img": "https://images-na.ssl-images-test.com/images/asdfIdR/5adf1vELadfZeiMML.jpg",
"curreny": "$",
"price": "64.00",
"availability": "Usually ships in 24 hours",
},
{
"title": "title2",
"permalink": "www.link.com",
"manufacturer": "manufacturer2",
"img": "https://images-na.ssl-images-test.com/images/I/51adfkLhadsfgACH0L.jpg",
"curreny": "$",
"price": "59.99",
"availability": "Usually ships in 24 hours",
}
]
}
//transform data set
let dataSet = results.generalInfo.map((item, i) => [
i + 1,
`<img src="${item.img}" alt="${item.title}" height="42" width="42">
<a href="<?php the_permalink();?>">
${item.title}
</a>`,
item.manufacturer,
`<div>${item.currency} ${item.price}</div>`,
item.availability,
`<button id="addButton" type="button" onClick="${this.addToResults.bind(item)}">
Add
</button>`,
`<a class="btn btn-primary" target="_blank" role="button">
Buy
</a>`
])
$('#table_id').DataTable({
data: dataSet,
destroy: true,
columns: [{
title: "#"
},
{
title: "Title"
},
{
title: "Manufacturer"
},
{
title: "Price"
},
{
title: "Availability"
},
{
title: ""
},
{
title: ""
}
]
})
function addToResults(item) {
$("ul").append(`<li>${item.title}</li>`);
}
<link href="http://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<table id="table_id" class="display" style="width:100%"></table>
<h1>Results:</h1>
<ul>
</ul>
When I press the button I get the an error message and the text is not appended.
Any suggestions what I am doing wrong?

Instead of binding the item to your inline JS handler (which I really discourage people from doing, because inline JS is just plain bad), what you actually want is simply a reference back to the results.generalInfo array so that you can pull the correct item out from it.
In that case, this should suffice:
Assign a class, not an ID (IDs must be unique) to your button, say <button class="addButton" ... />.
Store an unchanging reference to the item in question. This is as simple as storing the index in the data- attribute, e.g. <button data-item-index="${i}" class="addButton" ... />
Bind a click event handler to that class
In the click event handler, retrieve the value from data-item-index and use it as a key to access the original item found in results.generalInfo. Remember that data- attributes always return string , so use the + operate to force cast it to an integer:
$('#table_id').on('click', 'button.addButton', function() {
const itemIndex = +$(this).data('item-index');
const item = results.generalInfo[itemIndex];
$("ul").append(`<li>${item.title}</li>`);
});
See proof-of-concept snippet below:
const results = {
"generalInfo": [{
"title": "title1",
"permalink": "www.link.com",
"manufacturer": "manufacturer1",
"img": "https://images-na.ssl-images-test.com/images/asdfIdR/5adf1vELadfZeiMML.jpg",
"curreny": "$",
"price": "64.00",
"availability": "Usually ships in 24 hours",
},
{
"title": "title2",
"permalink": "www.link.com",
"manufacturer": "manufacturer2",
"img": "https://images-na.ssl-images-test.com/images/I/51adfkLhadsfgACH0L.jpg",
"curreny": "$",
"price": "59.99",
"availability": "Usually ships in 24 hours",
}
]
}
//transform data set
let dataSet = results.generalInfo.map((item, i) => [
i + 1,
`<img src="${item.img}" alt="${item.title}" height="42" width="42">
<a href="#">
${item.title}
</a>`,
item.manufacturer,
`<div>${item.currency} ${item.price}</div>`,
item.availability,
`<button class="addButton" type="button" data-item-index="${i}">
Add
</button>`,
`<a class="btn btn-primary" target="_blank" role="button">
Buy
</a>`
]);
$('#table_id').on('click', 'button.addButton', function() {
const item = results.generalInfo[+$(this).data('item-index')];
$("ul").append(`<li>${item.title}</li>`);
});
$('#table_id').DataTable({
data: dataSet,
destroy: true,
columns: [{
title: "#"
},
{
title: "Title"
},
{
title: "Manufacturer"
},
{
title: "Price"
},
{
title: "Availability"
},
{
title: ""
},
{
title: ""
}
]
});
<link href="http://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<table id="table_id" class="display" style="width:100%"></table>
<h1>Results:</h1>
<ul>
</ul>

Dom Traversal Complex Table Layout

I a have a webpage with a complex table structure. The entire code is right here --> (index.php)
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<?php
// this turns the json object into an array
$json_string = file_get_contents("info.json");
$json = json_decode($json_string, true);
?>
<div id="scroll_box">
<table border="1" cellpadding="10" id="container">
<tr>
<td>
<table class="organizer">
<?php foreach($json as $key => $value): ?>
<!-- this is what needs to be repeated -->
<tr><td class="index"> <?php echo $key ?> </td></tr>
<thead class="sticky" align="center"><tr><th> <?php echo $value["name"] ?></th></tr></thead>
<tbody>
<tr>
<td>
<table class="spell_container">
<?php
foreach ($value["items"] as $key => $value) {
echo '<tr><td><table class="table-bordered spell_shorthand">'.
'<tr><td>Name</td><td class="name">'.$value["name"].'</td></tr>'.
'<tr><td>Type</td><td class="type">'.$value["type"].'</td></tr>'.
'</table>'.
'</td>'.
'<td class="description">'.$value["description"].'</td>'.
'<td><div class="btn-group"><button class="learn">Learn</button></div></td>'.
'</tr>';
}
?>
</table>
</td>
</tr>
</tbody>
<?php endforeach; ?>
</table>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(".learn").on('click', function(){
var the_name = $(this).closest("tr").find("table.spell_shorthand").find("td.name").text();
var the_type = $(this).closest("tr").find("table.spell_shorthand").find("td.type").text();
var the_description = $(this).closest("tr").find("td.description").text();
var the_index = $(this).closest("table.organizer").find("td.index").text();
console.log(the_name);
console.log(the_type);
console.log(the_description);
console.log(the_index);
});
</script>
</body>
</html>
and the JSON data that is being used looks like this --> (info.json)
[
{
"name": "level0",
"items": [
{
"name": "item1",
"type": "type1",
"description": "this is item 1"
},
{
"name": "item2",
"type": "type2",
"description": "this is item 2"
},
{
"name": "item2",
"type": "type2",
"description": "this is item 3"
}
]
},
{
"name": "Level1",
"items": [
{
"name": "item4",
"type": "type4",
"description": "this is item 4"
},
{
"name": "item5",
"type": "type5",
"description": "this is item 5"
}
]
},
{
"name": "Level2",
"items": [
{
"name": "item6",
"type": "type6",
"description": "this is item 6"
}
]
}
]
Now. All of my console.log statements in the js script work perfectly except for the one that deals with "the_index" ... for whatever reason, it is returning all of the instances of index (0, 1, 2) when really it should just be returning the index of the header that is the parent of the button that is clicked.
I encourage you to take these two files and see for yourself what I'm talking about.
Any insight as to why clicking a button under the first index (0) would return (0 1 2) would be appreciated, thank you.

Try running an index on your tables in the loop like so:
<?php
$num_row = 0;
foreach ($value["items"] as $key => $value) {
echo '<tr id="row_'.$num_row.'"><td><table class="table-bordered spell_shorthand">'.
'<tr><td>Name</td><td class="name">'.$value["name"].'</td></tr>'.
'<tr><td>Type</td><td class="type">'.$value["type"].'</td></tr>'.
'</table>'.
'</td>'.
'<td class="description">'.$value["description"].'</td>'.
'<td><div class="btn-group"><button class="learn" data-row-id="#row_'.$num_row.'">Learn</button></div></td>'.
'</tr>';
$num_row = $num_row + 1;
}
?>
You can revise your click event to be something like below using jQuery. This will simplify things quite a bit.
$(".learn").on('click', function(){
var row_selector = $(this).data('row-id');
var the_name = $(row_selector + ' .name').text();
var the_type = $(row_selector + ' .type').text();
var the_description = $(row_selector + ' .description').text();
var the_index = $(row_selector + ' .index').text();
});

Using nested ng-repeat with dynamic ng-model as object

Okay let me be honest as i am a beginner in angular i am not sure how to frame this question i will try my best to explain this question.
Pic 1 :
As you see in the above pic i have a situation where I have a list of classes, and each class will have no of sections under it. you can see a blue button on each row on clicking which i need to know which 'section' was selected.
This is the problem statement.
Now here is the HTML I have for this
<table class="table table-hover">
<tbody>
<tr>
<th>Syllabus</th>
<th>{{phrase.className}}</th>
<th>Select Section</th>
<th>{{phrase.Operations}}</th>
</tr>
<tr ng-repeat="class in classes| filter:searchText">
<td id="syl">
<span ng-repeat="(sid, syllabi) in syllabus" ng-if="sid == class.classAcademicYear">
{{ syllabi.yearTitle}}
</span>
</td>
<td id="cls">{{class.className}}</td>
<td id="sec">
<div class="form-group">
<select class="form-control" name="student_section" ng-model="selectedSection">
<option ng-selected='class.sections[$index].id' ng-repeat="(key, section) in class.sections" value="{{section.id}}">{{section.sectionName}}</option>
</select>
</div>
</td>
<td id="vew">
<button ng-click="edit(class.id)" type="button" class="btn btn-info btn-flat" title="{{phrase.ReadSchedule}}" tooltip><i class="fa fa-fw fa-th-list"></i></button>
</td>
</tr>
<tr ng-show="!classes.length">
<td class="noTableData" colspan="3">{{phrase.NoClasses}}</td>
</tr>
</tbody>
</table>
Here we see a nseted ng-repeat where i am creating table rows based on the list of classes, now this class object also holds the section object inside as you can see inner ng-repeat uses that classes.sections to iterate the options
Now the classes json object is as shown below
[{
"id": 11,
"className": "Class-1 (STATE)",
"classAcademicYear": 2,
"classSubjects": "[\"1\",\"2\",\"3\",\"4\",\"5\",\"6\"]",
"dormitoryId": null,
"sections": [{
"id": 11,
"sectionName": "Section -1 (STATE)",
"sectionTitle": "section title -1",
"classId": 11,
"teacherId": "[\"10\",\"11\",\"12\",\"13\",\"14\",\"15\"]"
}]
}, {
"id": 12,
"className": "Class-2",
"classAcademicYear": 2,
"classSubjects": "[\"0\"]",
"dormitoryId": null,
"sections": [{
"id": 12,
"sectionName": "Section -1",
"sectionTitle": "section title -1",
"classId": 12,
"teacherId": "[\"0\"]"
}]
}, {
"id": 13,
"className": "Class-3",
"classAcademicYear": 2,
"classSubjects": "[\"0\"]",
"dormitoryId": null,
"sections": [{
"id": 13,
"sectionName": "Section -1",
"sectionTitle": "section title -1",
"classId": 13,
"teacherId": "[\"0\"]"
}]
}, {
"id": 14,
"className": "Class-4",
"classAcademicYear": 2,
"classSubjects": "[\"0\"]",
"dormitoryId": null,
"sections": [{
"id": 14,
"sectionName": "Section -1",
"sectionTitle": "section title -1",
"classId": 14,
"teacherId": "[\"0\"]"
}]
}]
What I am trying to do is set a ng-model for the inner select dropdown element that is dynamic , something like below so that every time the section is selected i can set the blue button action to whatever section id is.
ng-model="selectedSection[class.id]"
which is not working.
I know this might not be sufficient information but if some one is interested to help solve me this i can share further details.

For checking what ng-repeat line was selected you should send values $index and $parent.$index (if you have nested ng-repeat).
<button ng-click="edit($index, $parent.$index)" type="button">
Does it help?