jQuery - output this list of objects in 3 columns

jQuery - output this list of objects in 3 columns - javascript

Can someone tell me how to output this list of objects in 3 columns and sort the list alphabetically? I tried else if but...
CSS:
.main {
float:left;
width:150px;
background:#9c9;
}
.center {
float:left;
width:150px;
background:#c9c;
}
HTML:
<head>
<script type="text/javascript">
var data = [
{name: "Dan", age: 25, desc: "test"},
{name: "Aary", age: 15, desc: "description"},
{name: "Bary", age: 15, desc: "description"},
{name: "Cary", age: 15, desc: "description"},
{name: "Dary", age: 15, desc: "description"},
{name: "Fary", age: 15, desc: "description"},
{name: "Tom", age: 18, desc: "haaha"}
];
function findName(personName){
return $.grep(data, function(item){
return item.name == personName;
});
}
function details(personName)
{
var person = findName(personName.toString())[0];
$('#description').html(person.desc);
}
</script>
</head>
<body>
<div>
<div class='main'>
</div>
<div class='center'>
</div>
<div id="description">
</div>
</div>
</body>
JS:
$(function () {
for (var i = 0; i < data.length; i++) {
if (i % 2 == 0) {
$('.main').append("<a onclick='javascript:details(\"" + data[i].name + "\")'>" + data[i].name + " <strong>(" + data[i].age + ")</strong>" + "</a></br>");
} else {
$('.center').append("<a onclick='javascript:details(\"" + data[i].name + "\")'>" + data[i].name + " <strong>(" + data[i].age + ")</strong>" + "</a></br>");
}
}
});
http://jsfiddle.net/KKYZj/8/

You just need to add another div column: <div class='right'></div>
And then change your javascript to:
$(function () {
data.sort(function (a, b) { return a.name > b.name; });
for (var i = 0; i < data.length; i++)
{
var target = [$('.main'), $('.center'), $('.right')][i % 3];
target.append("<a onclick='javascript:details(\"" + data[i].name + "\")'>" + data[i].name + " <strong>(" + data[i].age + ")</strong>" + "</a></br>");
}
});

Look here.
Ok. I put all data items in same containers with float: left; property. When need to break line and start new row of items we put <br style="clear: both"> element depending on condition if(i%3 == 0) where 3 is column count. Also I modified click handlers for elements.
js:
var data = [
{name: "Dan", age: 25, desc: "test"},
{name: "Aary", age: 15, desc: "description"},
{name: "Bary", age: 15, desc: "description"},
{name: "Cary", age: 15, desc: "description"},
{name: "Dary", age: 15, desc: "description"},
{name: "Fary", age: 15, desc: "description"},
{name: "Tom", age: 18, desc: "haaha"}
];
function findName(personName){
return $.grep(data, function(item){
return item.name == personName;
});
}
$(function() {
for(var i=1;i<data.length;i++)
{
var dataItem = "<a href='#' class='dataItem' data-description='" + data[i].desc + "'>" + data[i].name + " <strong>(" + data[i].age + ")</strong>" + "</a>";
$('.main').append(dataItem);
if(i%3 == 0) {
$('.main').append("</br>") ;
}
}
var description = $('#description');
$('a.dataItem').on('click', function(e){
description.text($(this).data('description'));
})
});
html:
<div>
<div class='main'>
</div>
<div id='description'></div>
</div>
css:
.main a{
display: block;
float:left;
width:150px;
background:#9c9;
}
Don`t need to put js code and html, body, head tags in html area

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

Knex how to build an array POSTGRES query

i try to query some data with knex.js using this:
let query = knex
.select(
'project.custom_answer.id',
'project.custom_answer.content',
'project.custom_answer.is_private',
knex.raw(
'CASE ' +
'WHEN proposal.custom_question.id IS NULL THEN NULL ' +
'ELSE json_build_object(' +
"'id', proposal.custom_question.id," +
"'content', proposal.custom_question.content," +
"'is_mandatory', proposal.custom_question.is_mandatory," +
"'is_private', proposal.custom_question.is_private," +
"'has_media', proposal.custom_question.has_media," +
"'category', proposal.custom_question.category," +
"'type', proposal.custom_question.type," +
"'proposal'," +
'CASE ' +
'WHEN proposal.proposal.id IS NULL THEN NULL ' +
'ELSE json_build_object(' +
"'id', proposal.proposal.id," +
"'is_private', proposal.proposal.is_private," +
"'slug', proposal.proposal.slug," +
"'name', proposal.proposal.name" +
')' +
'END' +
') ' +
'END as custom_question'
)
)
.select([
knex.raw(
'CASE ' +
'WHEN proposal.custom_answer.id IS NULL THEN NULL ' +
'ELSE ARRAY_AGG(json_build_object(' +
"'id', proposal.custom_answer.id," +
"'content', proposal.custom_answer.content" +
'))' +
'END as custom_answer'
),
])
.modify(querybuildUtils.mediaBuilder, 'project.custom_answer.media_id')
.join(
'proposal.custom_question',
'proposal.custom_question.id',
'project.custom_answer.custom_question_id'
)
.leftJoin(
'proposal.custom_answer',
'proposal.custom_answer.custom_question_id',
'proposal.custom_question.id'
)
.join('proposal.proposal', 'proposal.proposal.id', 'proposal.custom_question.proposal_id')
// .modify(joinUserAsObject,"project.answer.member_id")
.from('project.custom_answer')
.limit(100)
.whereIn('project.custom_answer.id', arrayId)
// .where("project.custom_answer.is_private", "false")
.orderBy('project.custom_answer.created_at', 'desc')
.groupBy(
'project.custom_answer.id',
'proposal.custom_question.id',
'proposal.custom_answer.id',
'proposal.proposal.id'
);
I want to get my custom_question with the first knex.raw and create an array for my custom_answer with the second knex.raw.
My issue here is that create an array for each custom_question AND custom_answer so now my data look like:
custom_answers: [
{
content: "",
custom_answer: [{id: 59, content: "A1"}]
custom_question: {id: 236, content: "Q1" ....}
...
},
{
content: "",
custom_answer: [{id: 60, content: "A2"}]
custom_question: {id: 236, content: "Q1" ....}
...
},
]
And that what i want:
custom_answers: [
{
content: "",
custom_answer: [
{id: 59, content: "A1"},
{id: 60, content: "A2"},
]
custom_question: {id: 236, content: "Q1" ....}
...
}
]

How can i create a Div Construct from a JS Array?

I try actually to create a Simple Div Constrct based on a JS Array...
Unfortunately my Way below just shows up the Last Group / Element of the Array, what must be changed to create a repeating Div Construct for each Array Element?
Generated REsult should be like:
<div id="accordion">
<h3>'val.labelfromelement1'</h3>
<div class="notimportant">'val.Namefromelement1'</div>
<h3>'val.labelfromelement2'</h3>
<div class="notimportant">'val.Namefromelement2'</div>
<h3>'val.labelfromelement3'</h3>
<div class="notimportant">'val.Namefromelement3'</div>
<h3>'val.labelfromelement4'</h3>
<div class="notimportant">'val.Namefromelement4'</div>
</div>
Here is my actual Code:
var myData = [
{
label: "erster",
id: 0,
Name:"Ein Name"
},
{
label: "zweiter",
id: 1,
Name:"Der zweite Name"
},
{
label: "dritter",
id: 2,
Name:"Dritter Name"
}
]
$(document).ready(function(e) {
$.each(myData, function (i, val) {
myAccordion = "<h3>" + val.label + "</h3><div>" + val.Name + "</div>";
});
$("#myAccordionDiv").html(myAccordion);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div id="myAccordionDiv">
</div>
</body>
as you can see, it should result in an accordion that will be automatic increase if a we create a new element in the array (The Array is from a chart)
Any Suggestion? Thank you for your help!

The reason you only see the last one is because you never initialize the variable myAccordionDiv and append each html string in the iterations to it.
Fiddle: http://jsfiddle.net/hz0b6k71/
var myAccordion = "";
$.each(myData, function (i, val) {
myAccordion += "<h3>" + val.label + "</h3><div>" + val.Name + "</div>";
});
$("#myAccordionDiv").html(myAccordion);

Your code is good but you have to append all the content of array to"myAccordion" var.
If you change your js code like this it will work.
$(document).ready(function(e) {
var myAccordion;
$.each(myData, function (i, val) {
myAccordion += "<h3>" + val.label + "</h3><div>" + val.Name + "</div>";
});
$("#myAccordionDiv").html(myAccordion);
});
I hope that will help you

Try appending variable myAccordion to #myAccordianDiv element within $.each()
var myData = [{
label: "erster",
id: 0,
Name: "Ein Name"
}, {
label: "zweiter",
id: 1,
Name: "Der zweite Name"
}, {
label: "dritter",
id: 2,
Name: "Dritter Name"
}
];
$(document).ready(function(e) {
$.each(myData, function(i, val) {
var myAccordion = "<h3>" + val.label + "</h3><div>" + val.Name + "</div>";
// append `myAccordion` string to `#myAccordionDiv`
$("#myAccordionDiv").append(myAccordion);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div id="myAccordionDiv">
</div>
</body>

Here's an approach with raw javascript:
http://jsbin.com/nofiqiweri/edit?html,js,console,output
you were not storing the data into the myAccordion variable properly.
var myData = [
{
label: "erster",
id: 0,
Name:"Ein Name"
},
{
label: "zweiter",
id: 1,
Name:"Der zweite Name"
},
{
label: "dritter",
id: 2,
Name:"Dritter Name"
}
];
var myAccordion;
for (var i=0; i<myData.length; i++) {
myAccordion += '<h3>'+myData[i].label+'</h3><div>'+myData[i].Name+'</div>';
}
document.getElementById('myAccordionDiv').innerHTML(myAccordion);

Bts something like that, could get it run in those few minuts: :/ But look for AngularJS and fill an Object or even better JSON-Object into a table.
Some good Tutorials for this:
http://www.w3schools.com/angular/angular_tables.asp
http://jsfiddle.net/mjaric/pj5br/
var myData = [{
label: "erster",
id: 0,
Name: "Ein Name"
}, {
label: "zweiter",
id: 1,
Name: "Der zweite Name"
}, {
label: "dritter",
id: 2,
Name: "Dritter Name"
}
]
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.names = myData;);
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>BlaBlaBla</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-controller="customersCtrl">
<div ng-repeat="x in names">
<h3>{{x.Name}}</h3>
</div>
</div>
</body>
</html>

Filter a part of String

I have an array and its data shows on a table. Live Code
Filter by date or by name are working well.
I write some more code to show "No Data Found" if users enter a name, which is not on the list, but somehow it doesn't work.
Is there any way to write a code which will show a result if users enter only last name or first name, that matches last names or first names on the list?
Please give a hand. Thanks!
HTML
<p>From: <input class="datepicker" id="dateFrom" type="text"> To: <input class="datepicker" id="dateTo" type="text"><button class="buttApply">APPLY</button></p>
Search by Name<input type="text" id="searchByName"><button type="button" id="byNamebutton">SEARCH</button><span id="errmsg"></span>
<div class="text"></div>
<table id="myTable" border="1" width="300" cellpadding="5">
</table>
JS
$( ".datepicker" ).datepicker();
var dateList =[
{
name: "Mike Jenson",
email: "mike_j#yesware.com",
phone: "9433550193",
joined: "05/23/2014",
},
{
name: "Jim Stevens",
email: "jim_s#yesware.com",
phone: "1299331944",
joined: "05/22/2014"
},
{
name: "Paul Smith",
email: "paul_s#yesware.com",
phone: "4351289654",
joined: "04/14/2014"
},
{
name: "Sarah Andrews",
email: "sarah_a#yesware.com",
phone: "1299332944",
joined: "03/15/2014"
},
{
name: "Edward O'Brien",
email: "edward_ob#yesware.com",
phone: "4782456897",
joined: "03/27/2014"
},
{
name: "Nicole Plano",
email: "nicole_p#yesware.com",
phone: "6657831564",
joined: "03/30/2013"
},
{
name: "Peter Min",
email: "peter_m#yesware.com",
phone: "8893923938",
joined: "01/07/2013"
},
{
name: "Aaron Jackson",
email: "aaron_j#yesware.com",
phone: "6174896315",
joined: "04/11/2014"
}
];
$('#byNamebutton').click(
function()
{
var Namefilter = dateList.filter(function(NameItem)
{
if(NameItem.name == $('#searchByName').val())
{
return NameItem.name == $('#searchByName').val();
}
else
{
$('#mytable').append('No data found!');
}
});
refreshTable(Namefilter);
}
);
$('.buttApply').click(
function()
{
var filtered = dateList.filter(function(item){
return item.joined >= $('#dateFrom').val() && item.joined <= $('#dateTo').val();
});
refreshTable(filtered);
}
);
function refreshTable(list){
$("#myTable").html("");
for (var i=0; i< list.length; i++)
{
var tr="<tr>";
var td1 = "<td>" + list[i]["name"] + "</td>";
var td2 = "<td>" + list[i]["email"] + "</td>";
var td3 = "<td>" + list[i]["phone"] + "</td>";
var td4 = "<td>" + list[i]["joined"] + "</td></tr>";
$('#myTable').append(tr+td1+td2+td3+td4);
}
}
refreshTable(dateList);

If you want your search by name to work by containing phrase and ignore case sensitive:
return NameItem.name.toLowerCase().indexOf($('#searchByName').val().toLowerCase()) != -1;
As for the no data found, you just need to include this in the end of your reFreshTable function:
if(list.length==0){
$('#myTable').html("No Data Found");
}
JSFiddle: https://jsfiddle.net/juvian/WWscZ/9/
I would also recommend If your data is not very large to change your $('#byNamebutton').click( for a $('#searchByName').keyup( to make it more responsive, as it filters as you type

For #1 add at line 91,
if ($('#myTable').html() == "") {
var tr="<tr>";
var td1 = "<td colspan=4>No Results Found</td></tr>";
$('#myTable').append(tr+td1);
}
This addresses your #2 question:
indexOf returns the position of the string in the other string. If not found, it will return -1:
On line 59, use this instead:
return NameItem.name.indexOf($('#searchByName').val()) > -1;
It will search for partial instead of entire matches. So if you search for "Mike" or "Jensen" it will return "Mike Jensen".

JSON Parser with jquery.TokenInput (format)

I have a problem with jquery.tokenInput.
This is my tokenInput code:
$(".search-betrocket").tokenInput("http://www.websitehere.com/web/search", {
searchDelay: 2000,
minChars: 3,
tokenLimit: 5,
hintText: "Buscador inteligente...",
noResultsText: "Sin resultados",
searchingText: "Buscando...",
theme: "facebook",
queryParam: "txt",
propertyToSearch: "NickName",
resultsFormatter: function(item){ return "<li>" + "<img src='" + Users.Avatar + "' title='" + item.first_name + " " + item.last_name + "' height='25px' width='25px' />" + "<div style='display: inline-block; padding-left: 10px;'><div class='full_name'>" + item.first_name + " " + item.last_name + "</div><div class='email'>" + item.email + "</div></div></li>" },
tokenFormatter: function(item) { return "<li><p>" + item.first_name + " <b style='color: red'>" + item.last_name + "</b></p></li>" }
});
The problem is de parser...
jquery not know much as to understand the json parser returned objects.
This is my code JSON result _GET request
{
Users: [
{
Id: 264,
NickName: "SirBet",
Avatar: "19b452bf3fe83e17de82b67e518361d2",
Ranking: 3233,
FirstName: "Sir",
LastName: "Bettor",
Gender: "H",
Location: "Valencia",
Description: "Acepto todo tipo de retos :)",
CountryId: 1,
Country: "EspaÃ±a",
CountryISO: "ES",
PrivacyUpdated: 0
}
]
}
What is not is how to navigate the json object to function properly.
Ie enter via $val['Users']['0']['Nickname'] format but jquery / json.
Does anyone help me?

if ur json is...
[{Id:1, NickName:xxxx, Avatar: "19b452bf3fe83e17de82b67e518361d2", Ranking: 3233}]
then..
$.each(data, function(a, b) {
alert (b.Id);
alert (b.NickName);
alert (b.Avatar);
alert (b.Ranking);
});

We Keep Coding

JavaScript is the programming language of the Web.

jQuery - output this list of objects in 3 columns - javascript

Related

nested object is not inserted into table using javascript

Knex how to build an array POSTGRES query

How can i create a Div Construct from a JS Array?

Filter a part of String

JSON Parser with jquery.TokenInput (format)

Categories

Resources