Display Array Data in Table - javascript

I have a div with id="result", I want to show my data in this div tag.
How to append this table data.
I did not understand in table data tag table is in the string so how it works
function displayAddress() {
if (flag == 0) {
tabledata = "<table style='position: fixed; background-color:lightgrey; border: 1px solid black; border-collapse: collapse; margin-top: 25px;' border = '1'><tr><th>Name</th><th>Type</th><th>Address</th><th>Email</th><th>Mobile</th><th>Location</th></tr>";
}
for (i = 0; i < dataArray.length; i++) {
var tempname = dataArray[i].Name;
var temptype = dataArray[i].Type;
var tempaddress = dataArray[i].Address;
var tempemail = dataArray[i].Email;
var tempmobile = dataArray[i].Mobile;
var templocation = dataArray[i].Location;
//Please fill the required code to store the values in tabledata.
}
console.log(tabledata);
if (flag == 0) {
//Please fill the required code to store the table data in result.
document.getElementById("name").value = "";
document.getElementsByName("type").checked = false;
document.getElementById("address").value = "";
document.getElementById("email").value = "";
document.getElementById("mobile").value = "";
document.getElementById("location").value = "";
}
count = 0;
}

This is one way
const dataArray = [{
"Name": "Joe",
"Type": "Contractor",
"Address": "Address 1",
"Email": "Email#email.com",
"Mobile": "0123456789",
"Location": "At home"
},
{
"Name": "Jane",
"Type": "Contractor",
"Address": "Address 2",
"Email": "Email#email.com",
"Mobile": "1234567890",
"Location": "At home"
}
];
const tb = document.getElementById("tb");
let tr = [];
dataArray.forEach(item => {
tr.push('<tr><td>' + item.Name + '</td>')
tr.push('<td>' + item.Type + '</td>')
tr.push('<td>' + item.Address + '</td>')
tr.push('<td>' + item.Email + '</td>')
tr.push('<td>' + item.Mobile + '</td>')
tr.push('<td>' + item.Location + '</td></tr>')
})
tb.innerHTML = tr.join("");
document.getElementById("result").classList.remove("hide"); // show
#table1 {
position: fixed;
background-color: lightgrey;
border: 1px solid black;
border-collapse: collapse;
margin-top: 25px;
}
#table1 tr td {
border: 1px solid black;
}
.hide { display:none; }
<div id="result" class="hide">
<table id="table1">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Address</th>
<th>Email</th>
<th>Mobile</th>
<th>Location</th>
</tr>
</thead>
<tbody id="tb"></tbody>
</table>
</div>
Alternative method using template literals
dataArray.forEach(item => {
tr.push(`<tr>
<td>${item.Name}</td>
<td>${item.Type}</td>
<td>${item.Address}</td>
<td>${item.Email}</td>
<td>${item.Mobile}</td>
<td>${item.Location}</td>
</tr>`);
})

for mysself I do that [very shorter] way.
All the documentation is here -> https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement
const resultDiv = document.getElementById('result')
, myTable = resultDiv.appendChild(document.createElement('table')) // create the TABLE
, rowList =
[ { lib:'Names', key: 'Name' }, { lib:'Types', key:'Type' }
, { lib:'Address', key: 'Address' }, { lib:'eMails', key:'Email' }
, { lib:'phone', key: 'Mobile' }, { lib:'Locations', key:'Location' }
];
// sample data
const dataArray =
[ { Name: "Joe", Type: "Contractor", Address: "Address 1", Email: "Email_1#email.com", Mobile: "0123456789", Location: "At home"}
, { Name: "Jane", Type: "Contractor", Address: "Address 2", Email: "Email_2#email.com", Mobile: "0987654321", Location: "someWhere"}
]
;
dataArray.forEach(item=>
{
let newRow = myTable.insertRow()
rowList.forEach(rowName=>newRow.insertCell().textContent = item[rowName.key])
})
// make header part at last
let theHeader = myTable.createTHead().insertRow()
rowList.forEach(rowName=>theHeader.insertCell().textContent = rowName.lib)
/* cosmetic part */
table {
border-collapse: collapse;
margin-top: 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
thead {
background-color: aquamarine;
}
tbody {
background-color: #b4c5d8;
}
td {
border: 1px solid grey;
padding: .3em .7em;
}
<div id="result"></div>

there are two ways, the easy version is
document.getElementById("element").innerHTML = yourArray[0]
document.getElementById("element").innerHTML = yourArray[1]
document.getElementById("element").innerHTML = yourArray[2]
...
second way is map() method
yourArray.map(item => {
elements.innerHTML = item
});
if you use a framework (like Vue, React) second way is more easier
dont work try this
var email = yourArray[0]
var password = yourArray[1]
var table = "<table><tr> <td>" + email + "</td><td>" + password "</td></tr></table>

Related

nested object is not inserted into table using javascript

I am new to javaScript
here in this code, I'm trying to add companyDetails(nested object of productDetails) in the table by its id.
Like, for id 1 I want to add companyDetails then in the input field of id enter id 1 and insert details in the given input fields
so my problem is that companyDetails(date,address,companyName)is not displayed in the table after adding its value for entered id
let productDetails = [
{
id: "1",
partNo: "10",
productName: "bag",
size: "30",
color: ["Blue"],
description: "sky bags ",
},
{
id: "2",
partNo: "15",
productName: "bottle",
size: "10",
color: ["Green", "Orange"],
description: "plastic and still",
},
{
id: "4",
partNo: "20",
productName: "lunchbox",
size: "20",
color: ["Blue", "Red"],
description: "fresh food",
},
{
id: "3",
partNo: "40",
productName: "pen",
size: "10",
color: ["Red", "Blue"],
description: "gel pen ",
}, {
id: "5",
partNo: "35",
productName: "notebook",
size: "30",
color: ["Blue", "Red", "Orange"],
description: "Writing",
}
]
/** * function to add company details */
function addCompanyDetails() {
let data = (document.getElementById('productId').value);
let date1 = document.getElementById('date').value;
let Caddress = document.getElementById('address').value;
let Cname = (document.getElementById('companyName').value);
if (data === '') {
message("enter id for search");
}
for (let i = 0; i < productDetails.length; i++) {
let companyDetails = productDetails[i].companyDetails ? productDetails[i].companyDetails : { date: "", address: "", companyName: "" };
let p = companyDetails;
if ((productDetails[i].id) == (data)) {
p.companyName = Cname ;
p.date = date1 ;
p.address = Caddress;
console.log(p.companyName);
console.log(p.date);
console.log(p.address);
}
displayData();
clearInputData();
}
}
/** * this function display the data in table */
function displayData() {
objectArray = Object.values(productDetails);
display(objectArray, clearInputData);
}
/** * this function is for get the value from form */
function getValue() {
let id = document.getElementById('productId').value;
let date = document.getElementById('date').value;
let address = document.getElementById('address').value;
let companyName = document.getElementById('companyName').value;
return { id, date, address, companyName };
}
/** * Function is to display the data in table */
function display(productStore, callBack) {
messageTable(" ");
let data = productDetails;
let table = "<table border = 1 cellpadding = 10 ><th colspan=7 >Product Details</th><th colspan=7 >company Details</th><tr><th>Product Id</th><th>Part No</th><th>Name</th><th>Size</th><th>Color</th><th>Description</th><th>weight</th><th>Date</th><th>Address</th><th>Company name</th></tr>";
for (let i = 0; i < data.length; i++) {
if (data[i].productWeight === undefined) {
data[i].productWeight = " ";
} else { }
if (data[i].date === undefined) {
data[i].date = " ";
} else { }
if (data[i].address === undefined) {
data[i].address = " ";
} else { }
let companyDetails = data[i].companyDetails ? data[i].companyDetails : { date: "", address: "", companyName: "" };
table += "<tr><td>" + data[i].id + "</td>";
table += "<td>" + data[i].partNo + "</td>";
table += "<td>" + data[i].productName + "</td>";
table += "<td>" + data[i].size + "</td>";
table += "<td>" + data[i].color + "</td>";
table += "<td>" + data[i].description + "</td>";
table += "<td>" + data[i].productWeight + "</td>";
table += "<td>" + companyDetails.date + "</td>";
table += "<td>" + companyDetails.address + "</td>";
table += "<td>" + companyDetails.companyName + "</td>";
}
messageTable(table);
clearInputData();
}
/** * function is to print the table */
function messageTable(data) {
document.getElementById("messageTableA").innerHTML = data;
}
/** * this function is to clear the data */
function clearInputData() {
document.getElementById("productId").value = "";
document.getElementById("address").value = "";
document.getElementById("date").value = "";
document.getElementById("companyName").value = "";
}
<!DOCTYPE html>
<html>
<head>
<script src="add.js"></script>
<style>
th,
td,
p,
input {
font-family: Arial, Helvetica, sans-serif;
}
table,
th,
td {
border: solid 1px #DDD;
border-collapse: collapse;
padding: 10px 10px;
text-align: center;
}
th {
font-weight: bold;
}
</style>
</head>
<body onload="display()">
<h2>Product Details:</h2>
<form action="">
<label for="id">Id: </label> <input type="number" id="productId" required> <input type="button"
value="autofill" onclick="auto()"><br><br>
<label for="EstablishDate">Establish Date:</label> <input type="date" id="date" required><br><br>
<label for="address">Address:</label><br><br> <textarea name="address" id="address" cols="30"
rows="10"></textarea><br><br>
<label for="CompanyName">Company Name:</label> <input type="text" id="companyName" required><br><br>
<input type="button" value="add company details" onclick="addCompanyDetails()"><br><br>
<p id="result"></p>
<p id="demo"></p>
<p id="messageTableA"></p>
</form>
</body>
</html>
Here I am adding the Information of company with Specific ID to its respectice Product id
like productDetails[i].address = Caddress; in addCompanyDetails() function and then
in display function I have replaced companyDetails.address to data[i].address .
But be sure it will lose its data when you reload the page .
let productDetails = [
{
id: "1",
partNo: "10",
productName: "bag",
size: "30",
color: ["Blue"],
description: "sky bags ",
},
{
id: "2",
partNo: "15",
productName: "bottle",
size: "10",
color: ["Green", "Orange"],
description: "plastic and still",
},
{
id: "4",
partNo: "20",
productName: "lunchbox",
size: "20",
color: ["Blue", "Red"],
description: "fresh food",
},
{
id: "3",
partNo: "40",
productName: "pen",
size: "10",
color: ["Red", "Blue"],
description: "gel pen ",
}, {
id: "5",
partNo: "35",
productName: "notebook",
size: "30",
color: ["Blue", "Red", "Orange"],
description: "Writing",
}
]
/** * function to add company details */
function addCompanyDetails() {
let data = (document.getElementById('productId').value);
let date1 = document.getElementById('date').value;
let Caddress = document.getElementById('address').value;
let Cname = (document.getElementById('companyName').value);
if (data === '') {
message("enter id for search");
}
for (let i = 0; i < productDetails.length; i++) {
let companyDetails = productDetails[i].companyDetails ? productDetails[i].companyDetails : { date: "", address: "", companyName: "" };
let p = companyDetails;
if ((productDetails[i].id) == (data)) {
p.companyName = Cname ;
productDetails[i].date = date1 ;
productDetails[i].address = Caddress;
productDetails[i].companyName=Cname;
}
displayData();
clearInputData();
}
}
/** * this function display the data in table */
function displayData(companyDetails) {
objectArray = Object.values(productDetails);
display(objectArray, companyDetails,clearInputData);
}
/** * this function is for get the value from form */
function getValue() {
let id = document.getElementById('productId').value;
let date = document.getElementById('date').value;
let address = document.getElementById('address').value;
let companyName = document.getElementById('companyName').value;
return { id, date, address, companyName };
}
/** * Function is to display the data in table */
function display(productStore,callBack) {
messageTable(" ");
let data = productDetails;
let table = "<table border = 1 cellpadding = 10 ><th colspan=7 >Product Details</th><th colspan=7 >company Details</th><tr><th>Product Id</th><th>Part No</th><th>Name</th><th>Size</th><th>Color</th><th>Description</th><th>weight</th><th>Date</th><th>Address</th><th>Company name</th></tr>";
for (let i = 0; i < data.length; i++) {
if (data[i].productWeight === undefined) {
data[i].productWeight = " ";
} else { }
if (data[i].companyName === undefined) {
data[i].companyName = " ";
} else { }
if (data[i].date === undefined) {
data[i].date = " ";
} else { }
if (data[i].address === undefined) {
data[i].address = " ";
} else { }
table += "<tr><td>" + data[i].id + "</td>";
table += "<td>" + data[i].partNo + "</td>";
table += "<td>" + data[i].productName + "</td>";
table += "<td>" + data[i].size + "</td>";
table += "<td>" + data[i].color + "</td>";
table += "<td>" + data[i].description + "</td>";
table += "<td>" + data[i].productWeight + "</td>";
table += "<td>" + data[i].date + "</td>";
table += "<td>" + data[i].address + "</td>";
table += "<td>" + data[i].companyName + "</td>";
}
messageTable(table);
clearInputData();
}
/** * function is to print the table */
function messageTable(data) {
document.getElementById("messageTableA").innerHTML = data;
}
/** * this function is to clear the data */
function clearInputData() {
document.getElementById("productId").value = "";
document.getElementById("address").value = "";
document.getElementById("date").value = "";
document.getElementById("companyName").value = "";
}
<!DOCTYPE html>
<html>
<head>
<script src="home.js"></script>
<style>
th,
td,
p,
input {
font-family: Arial, Helvetica, sans-serif;
}
table,
th,
td {
border: solid 1px #DDD;
border-collapse: collapse;
padding: 10px 10px;
text-align: center;
}
th {
font-weight: bold;
}
</style>
</head>
<body onload="display()">
<h2>Product Details:</h2>
<form action="">
<label for="id">Id: </label> <input type="number" id="productId" required> <input type="button"
value="autofill" onclick="auto()"><br><br>
<label for="EstablishDate">Establish Date:</label> <input type="date" id="date" required><br><br>
<label for="address">Address:</label><br><br> <textarea name="address" id="address" cols="30"
rows="10"></textarea><br><br>
<label for="CompanyName">Company Name:</label> <input type="text" id="companyName" required><br><br>
<input type="button" value="add company details" onclick="addCompanyDetails()"><br><br>
<p id="result"></p>
<p id="demo"></p>
<p id="messageTableA"></p>
</form>
</body>
</html>
getObjById takes in an array of objects and the id you are looking for and returns the object that has your requested id in the given array
//if the id requested does not exist in the array you gave, it returns undefined
function getObjById(arr,id){return arr.filter(a=>a.id==id)[0]}
//example usage(valid/existing id)
console.log(getObjById(productDetails,"1"))
//example usage(invalid/non-existing id)
console.log(getObjById(productDetails,"99"))
//because I have == and not === 1=="1"
console.log(getObjById(productDetails,1))
<script>
//just where I have the array to save line space for the function
let productDetails = [
{
id: "1",
partNo: "10",
productName: "bag",
size: "30",
color: ["Blue"],
description: "sky bags ",
},
{
id: "2",
partNo: "15",
productName: "bottle",
size: "10",
color: ["Green", "Orange"],
description: "plastic and still",
},
{
id: "4",
partNo: "20",
productName: "lunchbox",
size: "20",
color: ["Blue", "Red"],
description: "fresh food",
},
{
id: "3",
partNo: "40",
productName: "pen",
size: "10",
color: ["Red", "Blue"],
description: "gel pen ",
}, {
id: "5",
partNo: "35",
productName: "notebook",
size: "30",
color: ["Blue", "Red", "Orange"],
description: "Writing",
}
]
</script>
let productDetails = [
{
id: "1",
partNo: "10",
productName: "bag",
size: "30",
color: ["Blue"],
description: "sky bags ",
},
{
id: "2",
partNo: "15",
productName: "bottle",
size: "10",
color: ["Green", "Orange"],
description: "plastic and still",
},
{
id: "4",
partNo: "20",
productName: "lunchbox",
size: "20",
color: ["Blue", "Red"],
description: "fresh food",
},
{
id: "3",
partNo: "40",
productName: "pen",
size: "10",
color: ["Red", "Blue"],
description: "gel pen ",
}, {
id: "5",
partNo: "35",
productName: "notebook",
size: "30",
color: ["Blue", "Red", "Orange"],
description: "Writing",
}
]
/** * function to add company details */
function addCompanyDetails() {
let data = (document.getElementById('productId').value);
let Name = (document.getElementById('companyName').value);
let Cdate = (document.getElementById('date').value);
let Caddress = (document.getElementById('address').value);
if (data === '') {
message("enter id for search");
}
for (let i = 0; i < productDetails.length; i++) {
if ((productDetails[i].id) == (data)) {
productDetails[i].companyDetails = {
date: "",
companyName: "",
address: ""
}
productDetails[i].companyDetails.companyName = Name;
productDetails[i].companyDetails.date = Cdate;
productDetails[i].companyDetails.address = Caddress;
console.log(productDetails[i].companyDetails.companyName);
}
displayData();
clearInputData();
}
}
/** * this function display the data in table */
function displayData() {
objectArray = Object.values(productDetails);
display(objectArray, clearInputData);
}
/** * this function is for get the value from form */
function getValue() {
let id = document.getElementById('productId').value;
let date = document.getElementById('date').value;
let address = document.getElementById('address').value;
let companyName = document.getElementById('companyName').value;
return { id, date, address, companyName };
}
/** * Function is to display the data in table */
function display(productStore, callBack) {
messageTable(" ");
let data = productDetails;
let table = "<table border = 1 cellpadding = 10 ><th colspan=7 >Product Details</th><th colspan=7 >company Details</th><tr><th>Product Id</th><th>Part No</th><th>Name</th><th>Size</th><th>Color</th><th>Description</th><th>weight</th><th>Date</th><th>Address</th><th>Company name</th></tr>";
for (let i = 0; i < data.length; i++) {
if (data[i].productWeight === undefined) {
data[i].productWeight = " ";
} else { }
if (data[i].date === undefined) {
data[i].date = " ";
} else { }
if (data[i].address === undefined) {
data[i].address = " ";
} else { }
let companyDetails = data[i].companyDetails ? data[i].companyDetails : { date: "", address: "", companyName: "" };
table += "<tr><td>" + data[i].id + "</td>";
table += "<td>" + data[i].partNo + "</td>";
table += "<td>" + data[i].productName + "</td>";
table += "<td>" + data[i].size + "</td>";
table += "<td>" + data[i].color + "</td>";
table += "<td>" + data[i].description + "</td>";
table += "<td>" + data[i].productWeight + "</td>";
table += "<td>" + companyDetails.date + "</td>";
table += "<td>" + companyDetails.address + "</td>";
table += "<td>" + companyDetails.companyName + "</td>";
}
messageTable(table);
clearInputData();
}
/** * function is to print the table */
function messageTable(data) {
document.getElementById("messageTableA").innerHTML = data;
}
/** * this function is to clear the data */
function clearInputData() {
document.getElementById("productId").value = "";
document.getElementById("address").value = "";
document.getElementById("date").value = "";
document.getElementById("companyName").value = "";
}
<!DOCTYPE html>
<html>
<head>
<script src="add.js"></script>
<style>
th,
td,
p,
input {
font-family: Arial, Helvetica, sans-serif;
}
table,
th,
td {
border: solid 1px #DDD;
border-collapse: collapse;
padding: 10px 10px;
text-align: center;
}
th {
font-weight: bold;
}
</style>
</head>
<body onload="display()">
<h2>Product Details:</h2>
<form action="">
<label for="id">Id: </label> <input type="number" id="productId" required> <input type="button"
value="autofill" onclick="auto()"><br><br>
<label for="EstablishDate">Establish Date:</label> <input type="date" id="date" required><br><br>
<label for="address">Address:</label><br><br> <textarea name="address" id="address" cols="30"
rows="10"></textarea><br><br>
<label for="CompanyName">Company Name:</label> <input type="text" id="companyName" required><br><br>
<input type="button" value="add company details" onclick="addCompanyDetails()"><br><br>
<p id="result"></p>
<p id="demo"></p>
<p id="messageTableA"></p>
</form>
</body>
</html>
now its completely working without removing nested object

how can we display different legends container for same graph(sunburst drill down)? in Amcharts4

I was trying to add two legends containers for the same graph(sunburst drill-down). one on the left side and another on the right side of the graph.
After lots of research, I found the solution but it was for piechart not for sunburst drill down. I want the same solution for sunburst drill down.
Below is the Image of the solution which I found.
enter image description here
code for above image:
Js, CSS, HTML
/**
* ---------------------------------------
* This demo was created using amCharts 4.
*
* For more information visit:
* https://www.amcharts.com/
*
* Documentation is available at:
* https://www.amcharts.com/docs/v4/
* ---------------------------------------
*/
am4core.useTheme(am4themes_animated);
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.PieChart);
// Add data
chart.data =
[{
"country": "Lithuania",
"litres": 501.9
}, {
"country": "Czechia",
"litres": 301.9
}, {
"country": "Ireland",
"litres": 201.1
}, {
"country": "Germany",
"litres": 165.8
}, {
"country": "Australia",
"litres": 139.9
}, {
"country": "Austria",
"litres": 128.3
}, {
"country": "UK",
"litres": 99
}, {
"country": "Belgium",
"litres": 60
}, {
"country": "The Netherlands",
"litres": 50
}];
// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "litres";
pieSeries.dataFields.category = "country";
pieSeries.labels.template.disabled = true;
radius = am4core.percent(95);
chart.legend = new am4charts.Legend();
chart.legend.position = "left";
chart.legend.scrollable = true;
// Create custom legend
chart.events.on("ready", function(event) {
// populate our custom legend when chart renders
chart.customLegend = document.getElementById('legend');
pieSeries.dataItems.each(function(row, i) {
var color = chart.colors.getIndex(i);
var percent = Math.round(row.values.value.percent * 100) / 100;
var value = row.value;
legend.innerHTML += '<div class="legend-item" id="legend-item-' + i + '" onclick="toggleSlice(' + i + ');" onmouseover="hoverSlice(' + i + ');" onmouseout="blurSlice(' + i + ');" style="color: ' + color + ';"><div class="legend-marker" style="background: ' + color + '"></div>' + row.category + '<div class="legend-value">' + value + ' | ' + percent + '%</div></div>';
});
});
function toggleSlice(item) {
var slice = pieSeries.dataItems.getIndex(item);
if (slice.visible) {
slice.hide();
}
else {
slice.show();
}
}
function hoverSlice(item) {
var slice = pieSeries.slices.getIndex(item);
slice.isHover = true;
}
function blurSlice(item) {
var slice = pieSeries.slices.getIndex(item);
slice.isHover = false;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 530px;
height: 450px;
font-size: 11px;
border: 1px solid #eee;
float: left;
}
#legend {
width: 200px;
height: 450px;
border: 1px solid #eee;
margin-left: 10px;
float: left;
}
#legend .legend-item {
margin: 10px;
font-size: 15px;
font-weight: bold;
cursor: pointer;
}
#legend .legend-item .legend-value {
font-size: 12px;
font-weight: normal;
margin-left: 22px;
}
#legend .legend-item .legend-marker {
display: inline-block;
width: 12px;
height: 12px;
border: 1px solid #ccc;
margin-right: 10px;
}
#legend .legend-item.disabled .legend-marker {
opacity: 0.5;
background: #ddd;
}
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
<div id="legend"></div>
I tried to solve my problem with the above solution but it didn't work.
Below are the details for my changes :
enter image description here
/**
* ---------------------------------------
* This demo was created using amCharts 4.
*
* For more information visit:
* https://www.amcharts.com/
*
* Documentation is available at:
* https://www.amcharts.com/docs/v4/
* ---------------------------------------
*/
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// create chart
var chart = am4core.create("chartdiv", am4plugins_sunburst.Sunburst);
chart.padding(0, 0, 0, 0);
chart.radius = am4core.percent(98);
data1 = [{
name: "First",
children: [
{ name: "A1", value: 100 },
{ name: "A2", value: 60 }
]
},
{
name: "Second",
children: [
{ name: "B1", value: 135 },
{ name: "B2", value: 98 }
]
},
{
name: "Third",
children: [
{
name: "C1",
children: [
{ name: "EE1", value: 130 },
{ name: "EE2", value: 87 },
{ name: "EE3", value: 55 }
]
},
{ name: "C2", value: 148 },
{
name: "C3", children: [
{ name: "CC1", value: 53 },
{ name: "CC2", value: 30 }
]
},
{ name: "C4", value: 26 }
]
},
{
name: "Fourth",
children: [
{ name: "D1", value: 415 },
{ name: "D2", value: 148 },
{ name: "D3", value: 89 }
]
},
{
name: "Fifth",
children: [
{
name: "E1",
children: [
{ name: "EE1", value: 33 },
{ name: "EE2", value: 40 },
{ name: "EE3", value: 89 }
]
},
{
name: "E2",
value: 148
}
]
}];
let dt1 = [];
for(var i=0;i<data1.length;i++){
dt1[i] = {"name":data1[i].name,"fill":"#72A6B2"};
}
chart.data = data1;
chart.colors.step = 2;
chart.fontSize = 11;
chart.innerRadius = am4core.percent(20);
// define data fields
chart.dataFields.value = "value";
chart.dataFields.name = "name";
chart.dataFields.children = "children";
var level0SeriesTemplate = new am4plugins_sunburst.SunburstSeries();
chart.seriesTemplates.setKey("0", level0SeriesTemplate)
// this makes labels to be hidden if they don't fit
level0SeriesTemplate.labels.template.truncate = true;
level0SeriesTemplate.labels.template.hideOversized = true;
level0SeriesTemplate.showOnInit = false;
level0SeriesTemplate.usePercentHack = false;
level0SeriesTemplate.radius = am4core.percent(100);
level0SeriesTemplate.innerRadius = am4core.percent(0);
let selectedState = level0SeriesTemplate.states.create("selected");
selectedState.properties.opacity = 0.7;
level0SeriesTemplate.defaultState.properties.radius = am4core.percent(100);
var currentlySelected;
level0SeriesTemplate.slices.template.events.on("over", function(event) {
if(event.target.dataItem.sunburstDataItem.children){
event.target.cursorOverStyle = am4core.MouseCursorStyle.pointer;
}
})
level0SeriesTemplate.slices.template.events.on("hit", function(event) {
zoomOutButton.show();
var hitSlice = event.target;
if (hitSlice.dataItem.sunburstDataItem.children) {
var series = event.target.dataItem.component;
if (!series.dummyData) {
series.tooltip.disabled = true;
hitSlice.dataItem.label.radius = (hitSlice.radius - hitSlice.pixelInnerRadius) - 7;
hitSlice.dataItem.label.bent = true;
hitSlice.dataItem.label.rotation = -180;
currentlySelected = hitSlice;
series.dummyData = true;
series.setState("selected");
hitSlice.dataItem.sunburstDataItem.series.show();
series.slices.each(function(slice) {
if (slice != event.target) {
slice.dataItem.hide();
}
})
}
else {
drillUp(hitSlice);
}
}
})
level0SeriesTemplate.labels.template.adapter.add("rotation", function(rotation, target) {
target.maxWidth = target.dataItem.slice.radius - target.dataItem.slice.innerRadius - 10;
target.maxHeight = Math.abs(target.dataItem.slice.arc * (target.dataItem.slice.innerRadius + target.dataItem.slice.radius) / 2 * am4core.math.RADIANS);
return rotation;
})
var level1SeriesTemplate = level0SeriesTemplate.clone();
level1SeriesTemplate.hidden = true;
level1SeriesTemplate.innerRadius = am4core.percent(10);
chart.seriesTemplates.setKey("1", level1SeriesTemplate)
level1SeriesTemplate.fillOpacity = 0.75;
var level2SeriesTemplate = level0SeriesTemplate.clone();
level2SeriesTemplate.hidden = true;
level2SeriesTemplate.innerRadius = am4core.percent(20);
chart.seriesTemplates.setKey("2", level2SeriesTemplate)
level0SeriesTemplate.hiddenInLegend = false;
level1SeriesTemplate.hiddenInLegend = true;
level2SeriesTemplate.hiddenInLegend = true;
var zoomOutButton = chart.seriesContainer.createChild(am4core.ZoomOutButton);
zoomOutButton.visible = false;
zoomOutButton.horizontalCenter = "middle";
zoomOutButton.verticalCenter = "middle";
zoomOutButton.events.on("hit", function() {
drillUp(currentlySelected)
})
function drillUp(slice) {
collapse(slice);
var series = slice.dataItem.component;
series.tooltip.disabled = false;
series.dummyData = false;
series.setState("default");
series.slices.each(function(slice) {
if (slice != event.target) {
slice.dataItem.show();
}
})
if (series.parentDataItem.seriesDataItem) {
currentlySelected = series.parentDataItem.seriesDataItem.slice;
}
else {
zoomOutButton.hide();
}
}
function collapse(slice) {
slice.dataItem.label.bent = false;
slice.dataItem.label.radius = 10;
if (slice.dataItem.sunburstDataItem.children) {
slice.dataItem.sunburstDataItem.children.each(function(child) {
child.seriesDataItem.component.setState("hidden");
collapse(child.seriesDataItem.slice);
})
}
}
/* var legend = new am4charts.Legend();
legend.position = "right";
legend.scrollable = true;
legend.parent = chart.chartContainer;
legend.background.fill = am4core.color("#000");
legend.background.fillOpacity = 0.05;
legend.width = 120;
legend.align = "right";
legend.data = dt1; */
/*
[{
"name": "2016",
"fill":"#72A6B2"
}, {
"name": "2017",
"fill": "#667E93"
}, {
"name": "2018",
"fill": "#488BB2"
}];*/
chart.legend = new am4charts.Legend();
//chart.legend.parent = chart.chartContainer;
//chart.legend.itemContainers.template.togglable = true;
chart.legend.position = "left";
chart.legend.scrollable = true;
// Create custom legend
chart.events.on("ready", function(event) {
// populate our custom legend when chart renders
chart.customLegend = document.getElementById('legend');
/* level0SeriesTemplate.slices.dataItems.each(function(row, i) { */
level0SeriesTemplate.dataItems.each(function(row, i) {
var color = chart.colors.getIndex(i);
var percent = Math.round(row.values.value.percent * 100) / 100;
var value = row.value;
legend.innerHTML += '<div class="legend-item" id="legend-item-' + i + '" onclick="toggleSlice(' + i + ');" onmouseover="hoverSlice(' + i + ');" onmouseout="blurSlice(' + i + ');" style="color: ' + color + ';"><div class="legend-marker" style="background: ' + color + '"></div>' + row.name + '<div class="legend-value">' + value + ' | ' + percent + '%</div></div>';
});
});
function toggleSlice(item) {
var slice = level0SeriesTemplate.dataItems.getIndex(item);
if (slice.visible) {
slice.hide();
}
else {
slice.show();
}
}
function hoverSlice(item) {
var slice = level0SeriesTemplate.slices.getIndex(item);
slice.isHover = true;
}
function blurSlice(item) {
var slice = level0SeriesTemplate.slices.getIndex(item);
slice.isHover = false;
}
/* var legendContainer = am4core.create("legend", am4core.Container);
legendContainer.width = am4core.percent(100);
legendContainer.height = am4core.percent(100);
legend = new am4charts.Legend();
legend.parent = legendContainer;
legend.position = "middle";
legend.valign = "middle";
legend.data = dt1;
legend.scrollable = true;
let Label1 = legendContainer.createChild(am4core.Label);
//Label1.height = 50;
Label1.fontWeight = "600";
Label1.align = "left";
Label1.paddingTop = 6;
Label1.paddingBottom = 6;
Label1.text = "Non-Reco Analytics"; */
/*
chart.legend.data = [{
"name": "2016",
"fill":"#72A6B2"
}, {
"name": "2017",
"fill": "#667E93"
}, {
"name": "2018",
"fill": "#488BB2"
}]; */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 530px;
height: 450px;
font-size: 11px;
border: 1px solid #eee;
float: left;
}
#legend {
width: 200px;
height: 450px;
border: 1px solid #eee;
margin-left: 10px;
float: left;
}
#legend .legend-item {
margin: 10px;
font-size: 15px;
font-weight: bold;
cursor: pointer;
}
#legend .legend-item .legend-value {
font-size: 12px;
font-weight: normal;
margin-left: 22px;
}
#legend .legend-item .legend-marker {
display: inline-block;
width: 12px;
height: 12px;
border: 1px solid #ccc;
margin-right: 10px;
}
#legend .legend-item.disabled .legend-marker {
opacity: 0.5;
background: #ddd;
}
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/plugins/sunburst.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
<div id="legend"></div>
objective: I want legends for the 1st layer of the sunburst on the right side and the 2nd layer on the left side of the chart.
I hope you get enough understanding of my problem.

Looping through an array of objects to display information

I am on a Team Treehouse challenge.
My challenge is to create an array of objects which contains the students info, make a search database for it so when you search for the student, the student will appear.
The additional challenge is to print out the both students if there is 2 students of same name. I also tried adding another little challenge to list all students if user typed "list".
My code:
var message = '';
var student;
var search;
var list;
function print(message) {
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = message;
}
function getStudentInfo (student) {
var report = '<h2>Student: ' + student.name + '</h2>';
report += '<p>Track: ' + student.track + '</p>';
report += '<p>Points: ' + student.points + '</p>';
report += '<p>Achievements: ' + student.achievements + '</p>';
return report;
}
while (true) {
search = prompt("Search Student records: Type a name [Martin] or [quit] to exit");
if (search === null || search.toLowerCase() === "quit") {
break;
}
for (var i = 0; i < students.length; i += 1) {
student = students [i];
if (search.toLowerCase() === student.name.toLowerCase()) {
message = getStudentInfo(student);
print(message);
break;
} else if (search.toLowerCase() === "list") {
list = '<h2>Student: ' + student.name + '</h2>';
list += '<p>Track: ' + student.track + '</p>';
list += '<p>Points: ' + student.points + '</p>';
list += '<p>Achievements: ' + student.achievements + '</p>';
print (list);
}
}
}
var students = [
{
name: 'Dave',
track: 'Front End Development',
achievements: 158,
points: 14730
},
{
name: 'Jody',
track: 'iOS Development with Swift',
achievements: '175',
points: '16375'
},
{
name: 'Jordan',
track: 'PHP Development',
achievements: '55',
points: '2025'
},
{
name: 'John',
track: 'Learn WordPress',
achievements: '40',
points: '1950'
},
{
name: 'Jordan',
track: 'Rails Development',
achievements: '5',
points: '350'
}
];
A couple of notable things:
This is poor use of a while loop and using while (true) tends to be error-prone leading to infinite loops. The point of having a prompt in a loop would be to continually expect additional input from the user, but since you break; out of every loop I don't believe that is your goal. You actually don't need a while construct at all.
You don't need so many variables to keep track of the program's state. It's fine to repeat students[i] twice rather than making a new variable for it, and you can store the user's input as toLowerCase() right away since that's all you'll ever be checking.
Unless multiple places in your code need to output to the UI, you don't need a separate function for outputting the message. You can just build up the message and output it at the end of the script. My hunch is that this build-up of the final output is your biggest point of confusion, and the extra function call adds to that.
Overall though, it looks like you were pretty close - the following code is actually shorter than what you had and mainly changes how the output message is built.
(function() {
var students = [
{
name: 'Dave',
track: 'Front End Development',
achievements: 158,
points: 14730
},
{
name: 'Jody',
track: 'iOS Development with Swift',
achievements: '175',
points: '16375'
},
{
name: 'Jordan',
track: 'PHP Development',
achievements: '55',
points: '2025'
},
{
name: 'John',
track: 'Learn WordPress',
achievements: '40',
points: '1950'
},
{
name: 'Jordan',
track: 'Rails Development',
achievements: '5',
points: '350'
}
];
var i = 0;
var input = '';
var output = '';
function getStudentInfo (student) {
var report = '<h2>Student: ' + student.name + '</h2>';
report += '<p>Track: ' + student.track + '</p>';
report += '<p>Points: ' + student.points + '</p>';
report += '<p>Achievements: ' + student.achievements + '</p>';
return report;
}
input = prompt("Search Student records: Type a name [Martin] or [quit] to exit").toLowerCase();
if (input === 'quit' || input.length === 0) {
return; // or display some message to 'output'
}
for (i = 0; i < students.length; i++) {
if (input === 'list') {
output += getStudentInfo(students[i]);
} else if (input === students[i].name.toLowerCase()) {
output += getStudentInfo(students[i]);
}
}
document.getElementById('output').innerHTML = output;
})();
#import url('http://necolas.github.io/normalize.css/3.0.2/normalize.css');
/*General*/
body {
background: #fff;
max-width: 980px;
margin: 0 auto;
padding: 0 20px;
font: Helvetica Neue, Helvectica, Arial, serif;
font-weight: 300;
font-size: 1em;
line-height: 1.5em;
color: #8d9aa5;
}
a {
color: #3f8aBf;
text-decoration: none;
}
a:hover {
color: #3079ab;
}
a:visited {
color: #5a6772;
}
h1, h2, h3 {
font-weight: 500;
color: #384047;
}
h1 {
font-size: 1.8em;
margin: 60px 0 40px;
}
h2 {
font-size: 1em;
font-weight: 300;
margin: 0;
padding: 30px 0 10px 0;
}
#home h2 {
margin: -40px 0 0;
}
h3 {
font-size: .9em;
font-weight: 300;
margin: 0;
padding: 0;
}
h3 em {
font-style: normal;
font-weight: 300;
margin: 0 0 10px 5px;
padding: 0;
color: #8d9aa5;
}
ol {
margin: 0 0 20px 32px;
padding: 0;
}
#home ol {
list-style-type: none;
margin: 0 0 40px 0;
}
li {
padding: 8px 0;
display: list-item;
width: 100%;
margin: 0;
counter-increment: step-counter;
}
#home li::before {
content: counter(step-counter);
font-size: .65em;
color: #fff;
font-weight: 300;
padding: 2px 6px;
margin: 0 18px 0 0;
border-radius: 3px;
background:#8d9aa5;
line-height: 1em;
}
.lens {
display: inline-block;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid #8d9aa5;
border-radius: 5px;
position: absolute;
margin: 5px 0 0 -19px;
}
#color div {
width: 50px;
height: 50px;
display: inline-block;
border-radius: 50%;
margin: 5px;
}
span {
color: red;
}
<h1>Students</h1>
<div id="output"></div>

Knockout GridView How to Delete Line?

Here is my HTLM Page:
<!DOCTYPE html>
<script src="Scripts/knockout-3.4.2.js" type="text/javascript"></script>
<script src="Scripts/jquery-3.1.1.min.js"></script>
<script src="Scripts/knockout.simpleGrid.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Knockout GridView Örnek</title>
<style>
body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; }
.ko-grid { margin-bottom: 1em; width: 25em; border: 1px solid silver; background-color:White; }
.ko-grid th { text-align:left; background-color: Black; color:White; }
.ko-grid td, th { padding: 0.4em; }
.ko-grid tr:nth-child(odd) { background-color: #DDD; }
.ko-grid-pageLinks { margin-bottom: 1em; }
.ko-grid-pageLinks a { padding: 0.5em; }
.ko-grid-pageLinks a.selected { background-color: Black; color: White; }
.liveExample { height:20em; overflow:auto }
li { list-style-type: disc; margin-left: 20px; }
</style>
</head>
<body>
<div data-bind='simpleGrid: gridViewModel'></div>
<div>Ad: </div> <input data-bind="value: Ad" /> <br />
<div>Satılan: </div> <input data-bind="value: Satis" /> <br />
<div>Fiyat: </div> <input data-bind="value: tutar" /> <br />
<button data-bind='click: addItem'>
Add item
</button>
<button data-bind='click: deleteFirst'>Delete first Row</button>
<button data-bind='click: deleteLast'>Delete Last Row</button>
<button data-bind='click: sortByName'>
Sort by name
</button>
<button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
Jump to first page
</button>
</body>
</html>
Here is my JavaScript:
<script type="text/javascript">
var initialData = [
{ name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
{ name: "Speedy Coyote", sales: 89, price: 190.00 },
{ name: "Furious Lizard", sales: 152, price: 25.00 },
{ name: "Indifferent Monkey", sales: 1, price: 99.95 },
{ name: "Brooding Dragon", sales: 0, price: 6350 },
{ name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
{ name: "Optimistic Snail", sales: 420, price: 1.50 }
];
var PagedGridModel = function (items) {
this.items = ko.observableArray(items);
this.sortByName = function () {
this.items.sort(function (a, b) {
return a.name < b.name ? -1 : 1;
});
};
this.jumpToFirstPage = function () {
this.gridViewModel.currentPageIndex(0);
};
this.deleteFirst = function () {
this.items.shift();
}
this.deleteLast = function () {
this.items.pop();
}
this.removeGift = function (item) {
this.initialData.remove(item);
};
this.gridViewModel = new ko.simpleGrid.viewModel({
data: this.items,
columns: [
{ headerText: "Item Name", rowText: "name" },
{ headerText: "Sales Count", rowText: "sales" },
{ headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
],
pageSize: 4
});
this.Ad = ko.observable("");
this.Satis = ko.observable("");
this.tutar = ko.observable("");
this.addItem = function () {
if (this.Ad() != "" && this.Satis() != "" && this.tutar() != "") {
this.tutar(Number(this.tutar()));
this.Satis(Number(this.Satis()));
this.items.push({ name: this.Ad(), sales: this.Satis(), price: this.tutar() });
this.Ad("");
this.Satis("");
this.tutar("");
}
}.bind(this);
};
ko.applyBindings(new PagedGridModel(initialData));
</script>
Here is my Grid JS:
(function () {
// Private function
function getColumnsForScaffolding(data) {
if ((typeof data.length !== 'number') || data.length === 0) {
return [];
}
var columns = [];
for (var propertyName in data[0]) {
columns.push({ headerText: propertyName, rowText: propertyName });
}
return columns;
}
ko.simpleGrid = {
// Defines a view model class you can use to populate a grid
viewModel: function (configuration) {
this.data = configuration.data;
this.currentPageIndex = ko.observable(0);
this.pageSize = configuration.pageSize || 5;
// If you don't specify columns configuration, we'll use scaffolding
this.columns = configuration.columns || getColumnsForScaffolding(ko.unwrap(this.data));
this.itemsOnCurrentPage = ko.computed(function () {
var startIndex = this.pageSize * this.currentPageIndex();
return ko.unwrap(this.data).slice(startIndex, startIndex + this.pageSize);
}, this);
this.maxPageIndex = ko.computed(function () {
return Math.ceil(ko.unwrap(this.data).length / this.pageSize) - 1;
}, this);
}
};
// Templates used to render the grid
var templateEngine = new ko.nativeTemplateEngine();
templateEngine.addTemplate = function (templateName, templateMarkup) {
document.write("<script type='text/html' id='" + templateName + "'>" + templateMarkup + "<" + "/script>");
};
templateEngine.addTemplate("ko_simpleGrid_grid", "\
<table class=\"ko-grid\" cellspacing=\"0\">\
<thead>\
<tr data-bind=\"foreach: columns\">\
<th data-bind=\"text: headerText\"></th>\
</tr>\
</thead>\
<tbody data-bind=\"foreach: itemsOnCurrentPage\">\
<tr data-bind=\"foreach: $parent.columns\">\
<td data-bind=\"text: typeof rowText == 'function' ? rowText($parent) : $parent[rowText] \"></td>\
<td>Delete</td>\
</tr>\
</tbody>\
</table>");
templateEngine.addTemplate("ko_simpleGrid_pageLinks", "\
<div class=\"ko-grid-pageLinks\">\
<span>Page:</span>\
<!-- ko foreach: ko.utils.range(0, maxPageIndex) -->\
<a href=\"#\" data-bind=\"text: $data + 1, click: function() { $root.currentPageIndex($data) }, css: { selected: $data == $root.currentPageIndex() }\">\
</a>\
<!-- /ko -->\
</div>");
// The "simpleGrid" binding
ko.bindingHandlers.simpleGrid = {
init: function () {
return { 'controlsDescendantBindings': true };
},
// This method is called to initialize the node, and will also be called again if you change what the grid is bound to
update: function (element, viewModelAccessor, allBindings) {
var viewModel = viewModelAccessor();
// Empty the element
while (element.firstChild)
ko.removeNode(element.firstChild);
// Allow the default templates to be overridden
var gridTemplateName = allBindings.get('simpleGridTemplate') || "ko_simpleGrid_grid",
pageLinksTemplateName = allBindings.get('simpleGridPagerTemplate') || "ko_simpleGrid_pageLinks";
// Render the main grid
var gridContainer = element.appendChild(document.createElement("DIV"));
ko.renderTemplate(gridTemplateName, viewModel, { templateEngine: templateEngine }, gridContainer, "replaceNode");
// Render the page links
var pageLinksContainer = element.appendChild(document.createElement("DIV"));
ko.renderTemplate(pageLinksTemplateName, viewModel, { templateEngine: templateEngine }, pageLinksContainer, "replaceNode");
}
};
})();
I want like this
But Delete not working and repeat 3 times always 1 line. I want it 1 Line 1 delete and I want to delete it. How I can do this ? I need your help guys. Thank you in advance.

Javascript - Fixing searching system?

Down below, there's two pieces of codes. For infinite scroll & search system. Everything works, but the problem with the search system is that, if I search something, then it messes up positioning of the cards or boxes. They should be on one line, if you search them, but those a bit up etc.. I also have added an picture about that. 2nd problem is that, I have an Infinite scroll on my site, but I think I would have to change the search system to search from JSON Data, so it would work correctly? By that I mean, You type something into search, click enter then it searches matches from the JSON and then shows them in that container. I hope I was clear enough about my problem and I hope someone can help me out to solve it :). Thanks to everyone! :)
Here's some CSS as well:
main.css - http://pastebin.com/Tgds0kuJ
zmd-hierarchical-display - http://pastebin.com/Fn5JBpaQ
Materialize - http://pastebin.com/ZxSGZtc8
Here's picture of normal piece: http://prntscr.com/b3yrwa
Here's picture if I search them: http://prntscr.com/b3yrub
Here's the infinite scroll & cards
var perPage = 50;
function paginate(items, page) {
var start = perPage * page;
return items.slice(start, start + perPage);
}
var condition = '';
function renderItems(pageItems) {
pageItems.forEach(function(item, index, arr) {
var message = 'BitSkins Price: $' + Math.round(item.bprice) + '';
if (item.price !== null) {
if (item.bprice === '') {
message = 'Item never sold on BitSkins!';
}
if (item.name != 'Operation Phoenix Case Key' && item.name != 'CS:GO Case Key' && item.name != 'Winter Offensive Case Key' && item.name != 'Revolver Case Key' && item.name != 'Operation Vanguard Case Key' && item.name != 'Operation Wildfire Case Key' && item.name != 'Shadow Case Key' && item.name != 'Operation Breakout Case Key' && item.name != 'Chroma Case Key' && item.name != 'Huntsman Case Key' && item.name != 'Falchion Case Key' && item.name != 'Chroma 2 Case Key') {
$("#inventory").html($("#inventory").html() + "<li class='col 2 zoomIn animated' style='padding:8px;font-weight:bold;font-size:13.5px'><div class='card item-card waves-effect waves-light' style='margin:0%;min-height:295px;width:245.438px;border-radius: 0px;height: 295px;box-shadow: inset 0px 0px 25px 2px #232323;border: 1px solid black' id='" + item.id + "'><div class='iteam' style='text-decoration: underline;text-align: left;font-size: 14.5px;color: #E8E8E8;font-family: Roboto;position: relative;right: -3px;'>" + item.name + "</div><div class='condition' style='text-align: left;color: #E8E8E8;font-family: Roboto;position: relative;left: 3px;'>" + item.condition + "</div><div class='center-align' style='position: relative;padding:0%;top: -33px;'><img title=\"" + item.originalname + "\" draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/" + item.iconurl + "/235fx235f'></div><div class='secondarea' style='position: relative;top: -129px;background: rgba(0, 0, 0,0.15);display: block;height: 163px;'><div class='buyer-price center-align' style='font-size:22.5px;font-family: Arial Black;color:#E8E8E8'>$" + Math.round(item.price) + "<div class='bitskinscomp' style='font-weight: normal;font-size:12px;font-family: Roboto;font: bold;'>" + message + "</div></div><a class='btn waves-effect waves-light' style='position:relative;left:-5px;top:50px' href='" + item.inspect + "' target='_blank'>Inspect</a><a class='btn waves-effect waves-light' style='position:relative;right:-5px;top:50px' id='purchaseButton'>Cart</a></div></li>");
}
}
});
}
var win = $(window);
var page = 0;
renderItems(paginate(items, page));
win.scroll(function() {
if ($(document).height() - win.height() == win.scrollTop()) {
page++;
renderItems(paginate(items, page));
}
});
JavaScript search system
$('#SearchItemsFromList').keyup(function() {
var valThis = $(this).val().toLowerCase();
if (valThis === "") {
$('#inventory > li > div').show();
} else {
$('#inventory > li > div').each(function() {
var text = $(this).text().toLowerCase();
(text.indexOf(valThis) >= 0) ? $(this).show(): $(this).hide();
});
}
});
Overview
First off, I have no visibility to the
...messes up positioning of the cards or boxes...
since I do not know what your CSS consists of so I simply made some guesses on that. I suspect it may be due to the actual rendering of your items somehow. To assist in this I removed all the CSS from the injected markup as injecting those "style" attributes is not best practice and frankly difficult to debug as you seem to have experienced. I made an attempt but you will need to adjust the CSS I have provided as it simply does not have all yours in it.
To assist with this, I simply did a "replace" with the current page rather than append each time and then face the challenge of end of scroll/start and deal with the search disruption of that.
I removed the injection of duplicate id on the button and instead used a class injection instead. This will resolve the issue of the invalid HTML which would cause unexpected results at some point that would be very difficult to debug.
The more difficult issue is the dynamic nature of your items array when searching the on-page object list. This I have addressed by creation of a "view candidate list called currentSearch which I have taken the liberty of adding to a name called myApp.data as myApp.data.currentSearch.
Speaking of the namespace, I did that to avoid multiple global objects. I also did that with my custom functions as a best practice.
Here is my sample markup that I used:
<div id="search">
<input id="SearchItemsFromList" type="text" />
</div>
<ul id="inventory">
</ul>
CSS
Here is the CSS which in great part was extracted from the style properties. I took the liberty of naming them poorly as first-style-thing class, second-style-thing etc. which simply coordinate to the injected sequence of elements. This has the additional benefit of reducing the injection string size as well.
.li-style-thing {
padding: 8px;
font-weight: bold;
font-size: 13.5px;
}
.first-style-thing {
margin: 0%;
min-height: 295px;
width: 245.438px;
border-radius: 0px;
height: 295px;
box-shadow: inset 0px 0px 25px 2px #232323;
border: 1px solid black;
}
.second-style-thing {
text-decoration: underline;
text-align: left;
font-size: 14.5px;
color: #E8E8E8;
font-family: Roboto;
position: relative;
right: -3px;
}
.third-style-thing {
text-align: left;
color: #E8E8E8;
font-family: Roboto;
position: relative;
left: 3px;
}
.fourth-style-thing {
position: relative;
padding: 0%;
top: -33px;
}
.fifth-style-thing {
position: relative;
top: -129px;
background: rgba(0, 0, 0, 0.15);
display: block;
height: 163px;
}
.sixth-style-thing {
font-size: 22.5px;
font-family: Arial Black;
color: #E8E8E8;
}
.seventh-style-thing {
font-weight: normal;
font-size: 12px;
font-family: Roboto;
font: bold;
}
.eighth-style-thing {
position: relative;
left: -5px;
top: 50px;
}
.ninth-style-thing {
position: relative;
right: -5px;
top: 50px;
}
.btn {
position: relative;
display: block;
height: 1.5em;
width: 5em;
color: cyan;
background-color: blue;
font-weight: bold;
text-align: center;
padding-top: 0.5em;
margin: 1em;
text-decoration: none;
text-transform: uppercase;
}
#inventory {
display: block;
position: relative;
top: 1em;
left: 0em;
border: solid lime 1px;
}
#inventory li {
background-color: #888888;
}
#inventory li {
display: inline-block;
float: left;
}
.purchaseButton {
right: -8em;
top: 0;
}
#search {
height: 4em;
width: 100%;
background-color: #00aaaa;
padding: 1em;
}
Code:
About the code, note the items object which I simply made from reverse engineering your injection code and likely needs adjusted to your exact object properties.
Note the debounce function which addresses an issue where you might fire the scroll/mouse wheel events too often. I added a "throttle" which you might use instead, borrowed from here: https://remysharp.com/2010/07/21/throttling-function-calls Speaking of, I added the "wheel" event to the "scroll" event so that if you are at the top/bottom of the scroll the mouse wheel can also fire the scroll when no scroll actually occurs. I did not address other possible challenges such as the down/up arrow when the scroll is at the top/bottom; I will leave that up to you to address based upon your needs.
Note that upon a "search" event when typing, I reset the currentSearch list.
I left some console.log in place which you can remove - but allows you to see the page and some event fire logging.
Here is a sample so you can try this all out https://jsfiddle.net/MarkSchultheiss/hgfhh2y7/3/
var myApp = myApp || {};
myApp.data = {
currentSearch: [],
pageStart: 0,
pageEnd: 0,ma
perPage: 3,
page: 0,
lastScroll: 0,
scrollDelay: 250,
outputContainer: $('#inventory'),
excludes: ['Operation Phoenix Case Key', 'CS:GO Case Key', 'Winter Offensive Case Key', 'Revolver Case Key', 'Operation Vanguard Case Key', 'Operation Wildfire Case Key', 'Shadow Case Key', 'Operation Breakout Case Key', 'Chroma Case Key', 'Huntsman Case Key', 'Falchion Case Key', 'Chroma 2 Case Key']
};
myApp.func = {
contains: function(myArray, searchTerm, property) {
var found = [];
var len = myArray.length;
for (var i = 0; i < len; i++) {
if (myArray[i][property].toLowerCase().indexOf(searchTerm.toLowerCase()) > -1) found.push(myArray[i]);
}
return found;
},
paginate: function(items) {
myApp.data.pageStart = myApp.data.perPage * myApp.data.page;
myApp.data.pageEnd = myApp.data.pageStart + myApp.data.perPage;
if (myApp.data.pageEnd > items.length) {
myApp.data.pageEnd = items.length;
myApp.data.pageStart = myApp.data.pageEnd - myApp.data.perPage >= 0 ? myApp.data.pageEnd - myApp.data.perPage : 0;
}
console.log("Page:" + myApp.data.page + " Start:" + myApp.data.pageStart + " End:" + myApp.data.pageEnd + " max:" + items.length);
return items;
},
debounce: function(fn, delay) {
var timer = null;
return function() {
var context = this,
args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(context, args);
}, delay);
};
},
throttle: function(fn, threshhold, scope) {
threshhold || (threshhold = 250);
var last,
deferTimer;
return function() {
var context = scope || this;
var now = +new Date,
args = arguments;
if (last && now < last + threshhold) {
// hold on to it
clearTimeout(deferTimer);
deferTimer = setTimeout(function() {
last = now;
fn.apply(context, args);
}, threshhold);
} else {
last = now;
fn.apply(context, args);
}
}
},
renderItems: function(pageItems) {
// $("#inventory").html("");
console.log('renderStart Items:' + pageItems.length);
console.log(myApp.data.pageStart + ":" + myApp.data.pageEnd);
var renderList = pageItems.filter(function(itemValue) {
return !!(myApp.data.excludes.indexOf(itemValue) == -1)
}).slice(myApp.data.pageStart, myApp.data.pageEnd);
console.log(renderList);
var newContent = "";
renderList.forEach(function(item, index, arr) {
var message = 'BitSkins Price: $' + Math.round((item.bprice * 1));
if (item && item.price !== null) {
if (item.bprice === '') {
message = 'Item never sold on BitSkins!';
}
if (myApp.data.excludes.indexOf(item.name) == -1) {
newContent += "<li class='col 2 zoomIn animated'><div class='card item-card waves-effect waves-light first-style-thing' id='" + item.id + "'><div class='iteam second-style-thing' >" + item.name + "</div><div class='condition third-style-thing'>" + item.condition + "</div><div class='center-align fourth-style-thing' ><img title='" + item.originalname + "' draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/" + item.iconurl + "/235fx235f'></div><div class='secondarea fifth-style-thing'><div class='buyer-price center-align sixth-style-thing'>$" + Math.round(item.price) + "<div class='bitskinscomp seventh-style-thing'>" + message + "</div></div><a class='btn waves-effect waves-light eighth-style-thing' href='" + item.inspect + "' target='_blank'>Inspect</a><a class='btn waves-effect waves-light purchaseButton'>Cart</a></div></li>";
}
}
myApp.data.outputContainer.html(newContent);
});
}
};
var items = [{
id: "123",
name: "freddy Beer",
condition: "worn",
originalname: "beer stein",
price: 10.22,
bprice: "34.33",
iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og",
inspect: "http://example.com/myinspect/4"
}, {
id: "123",
name: "freddy Beer",
condition: "worn",
originalname: "beer stein",
price: 10.22,
bprice: "34.33",
iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og",
inspect: "http://example.com/myinspect/4"
}, {
id: "123",
name: "freddy Beer",
condition: "worn",
originalname: "beer stein",
price: 10.22,
bprice: "34.33",
iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og",
inspect: "http://example.com/myinspect/4"
}, {
id: "123",
name: "freddy Beer",
condition: "worn",
originalname: "beer stein",
price: 10.22,
bprice: "34.33",
iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og",
inspect: "http://example.com/myinspect/4"
}, {
id: "123",
name: "Operation Phoenix Case Key",
condition: "worn",
originalname: "Operation Phoenix Case Key",
price: 10.22,
bprice: "34.33",
iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og",
inspect: "http://example.com/myinspect/4"
}, {
id: "234",
name: "Johnson Wax",
condition: "waxy",
originalname: "Ear wax",
price: 2244.22,
bprice: "",
iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og",
inspect: "http://example.com/myinspect/4"
}, {
id: "45245",
name: "Door Knob | Green",
condition: "green tint",
originalname: "Green door knob",
price: 35.68,
bprice: "",
iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXU5A1PIYQNqhpOSV-fRPasw8rsQEl9Jg9SpIW1KgRrg6GGJWRBtI-ykYTak6WhN76JlWgFsJN1j72SotWiigbi-0BqYjuncdDDdRh-Pw9UqwY-SA",
inspect: "http://example.com/myinspect/4"
}, {
id: "45245red",
name: "Door Knob | Red",
condition: "red tint",
originalname: "Red door knob",
price: 35.68,
bprice: "",
iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXU5A1PIYQNqhpOSV-fRPasw8rsQEl9Jg9SpIW1KgRrg6GGJWRBtI-ykYTak6WhN76JlWgFsJN1j72SotWiigbi-0BqYjuncdDDdRh-Pw9UqwY-SA",
inspect: "http://example.com/myinspect/4"
}, {
id: "45245red",
name: "Door Knob | Red",
condition: "red tint",
originalname: "Red door knob",
price: 35.68,
bprice: "",
iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXU5A1PIYQNqhpOSV-fRPasw8rsQEl9Jg9SpIW1KgRrg6GGJWRBtI-ykYTak6WhN76JlWgFsJN1j72SotWiigbi-0BqYjuncdDDdRh-Pw9UqwY-SA",
inspect: "http://example.com/myinspect/4"
}, {
id: "45245blue",
name: "Door Knob | Blue",
condition: "blue tint",
originalname: "Blue door knob",
price: 35.68,
bprice: "",
iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXU5A1PIYQNqhpOSV-fRPasw8rsQEl9Jg9SpIW1KgRrg6GGJWRBtI-ykYTak6WhN76JlWgFsJN1j72SotWiigbi-0BqYjuncdDDdRh-Pw9UqwY-SA",
inspect: "http://example.com/myinspect/4"
}, {
id: "45245Brown",
name: "Door Knob | Brown",
condition: "brown tint",
originalname: "Brown door knob",
price: 35.68,
bprice: "34.23",
iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXU5A1PIYQNqhpOSV-fRPasw8rsQEl9Jg9SpIW1KgRrg6GGJWRBtI-ykYTak6WhN76JlWgFsJN1j72SotWiigbi-0BqYjuncdDDdRh-Pw9UqwY-SA",
inspect: "http://example.com/myinspect/4"
}, {
id: "45245Malt",
name: "Beer malt | Brown",
condition: "brown tint",
originalname: "Brown Beer Malt ",
price: 35.68,
bprice: "34.23",
iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og",
inspect: "http://example.com/myinspect/4"
}, {
id: "4Beef",
name: "Beefeaters Mug | Brown",
condition: "new tint",
originalname: "Brown Beefeaters mug",
price: 35.68,
bprice: "34.23",
iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og",
inspect: "http://example.com/myinspect/4"
}];
myApp.data.outputContainer.on('customRenderEvent', function() {
myApp.func.renderItems(myApp.func.paginate(myApp.data.currentSearch));
});
$('#SearchItemsFromList').on('keyup', function() {
var valThis = $(this).val();
if (valThis === "") {
// item-card
// items hold the things to pageinate
// currentSearch holds the filtered items
myApp.data.currentSearch = items;
} else {
// "name" is the matching property in the object
myApp.data.currentSearch = myApp.func.contains(items, valThis, "name");
}
myApp.data.outputContainer.trigger('customRenderEvent');
console.log("keyup len:" + myApp.data.currentSearch.length);
}).trigger('keyup'); // trigger for initial display
$(window).on('scroll wheel', myApp.func.debounce(function(event) {
// set the page on scroll up/down
if ($(this).scrollTop() == 0) {
myApp.data.page > 0 ? myApp.data.page-- : myApp.data.page = 0;
} else {
myApp.data.page++;
}
myApp.func.renderItems(myApp.func.paginate(myApp.data.currentSearch));
}, myApp.data.scrollDelay));
Final note on the code, you have a quite long, difficult to maintain conditional which I replaced by added an array with the exclusions and then the code uses it with a filter: .filter(function(itemValue) {
return !!(myApp.data.excludes.indexOf(itemValue) == -1)
})

Categories