Develop Reference

Grabbing data from an array using for loop to populate a table

Problem
I'm trying to iterate over an array of objects using a for loop, but instead of getting all the items in the array that I actually see when I console.log(arr[i].Sand) I get the same number eleven times in my HTML.
script.js
$(function(){
$.ajax({
url: "https://sheetsu.com/apis/fef35fba",
method: "GET",
dataType: "json",
}).then(function(spreadsheet){
// Array of objects
var arr = spreadsheet.result;
for (i = 1; i < arr.length; i++) {
console.log(arr[i].Sand); // Just the volume of sand in tonnes
var sand = arr[i].Sand // Volume of Sand in tonnes
var salt = arr[i].Salt // Volume of Salt in tonnes
var snow = arr[i].Snow // Snow Removal total in dollars
// Changes the numbers in the table
$(".sand").html(sand);
}
})
});
spreadsheet.result
index.html
<table>
<thead>
<tr>
<th class="year"></th>
<th>
<img src="img/sand-2.png" alt="" class="icons">
<p>Volume of Sand</p>
<p class="paren">(in tonnes)</p>
</th>
<th>
<img src="img/salt-3.png" alt="" class="icons">
<p>Volume of Salt</p>
<p class="paren">(in tonnes)</p>
</th>
<th>
<img src="img/snow-3.png" alt="" class="icons">
<p>Snow Removal</p>
<p class="paren">(total in dollars)</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="year">2016</th>
<td class="sand">-<span class="asterisk">*</span></td>
<td class="salt">-<span class="asterisk">*</span></td>
<td class="snow">-<span class="asterisk">*</span></td>
</tr>
<tr>
<td class="year">2015</th>
<td class="sand">-</td>
<td class="salt">-</td>
<td class="snow">-</td>
</tr>
<tr>
<td class="year">2014</th>
<td class="sand">-</td>
<td class="salt">-</td>
<td class="snow">-</td>
</tr>
<tr>
<td class="year">2013</th>
<td class="sand">-</td>
<td class="salt">-</td>
<td class="snow">-</td>
</tr>
<tr>
<td class="year">2012</th>
<td class="sand">-</td>
<td class="salt">-</td>
<td class="snow">-</td>
</tr>
<tr>
<td class="year">2011</th>
<td class="sand">-</td>
<td class="salt">-</td>
<td class="snow">-</td>
</tr>
<tr>
<td class="year">2010</th>
<td class="sand">-</td>
<td class="salt">-</td>
<td class="snow">-</td>
</tr>
<tr>
<td class="year">2009</th>
<td class="sand">-</td>
<td class="salt">-</td>
<td class="snow">-</td>
</tr>
<tr>
<td class="year">2008</th>
<td class="sand">-</td>
<td class="salt">-</td>
<td class="snow">-</td>
</tr>
<tr>
<td class="year">2007</th>
<td class="sand">-</td>
<td class="salt">-</td>
<td class="snow">-</td>
</tr>
<tr class="last">
<td class="year">2006</th>
<td class="sand">-</td>
<td class="salt">-</td>
<td class="snow">-</td>
</tr>
</tbody>
</table>

while I was generating the code to answer this, someone changed your ajax call.
Here's the code reworked so it should help.
$(function(){
$.ajax({
url: "https://sheetsu.com/apis/fef35fba",
method: "GET",
dataType: "json",
}).then(function(spreadsheet){
// Array of objects
var arr = spreadsheet.result;
for (i =0; i < arr.length; i++) {
console.log(arr[i].Sand); // Just the volume of sand in tonnes
sand = arr[i].Sand // Volume of Sand in tonnes
salt = arr[i].Salt // Volume of Salt in tonnes
snow = arr[i].Snow // Snow Removal total in dollars
year = arr[i].Year; //We need the year to find the right row
// Changes the numbers in the table
$("tr").each(function(){
//We need to find the correct TR object.
//Remove Any spacing outside the html to make sure we don't get anything extra.
// We need to locate the ROW that has the right year so we can populate ONLY it's columns. an id or class based off year would have made this easier and less resource expensive.
if($(this).find(".year").html().trim() == year){
$(this).find(".sand").html(sand);
$(this).find(".salt").html(salt);
$(this).find(".snow").html(snow);
}
});
}
})
});
Here is a JSFiddle to show it:
https://jsfiddle.net/g6vn4Lf6/

This line:
$(".sand").html(sand);
Finds all elements with class="sand" and then sets the inner html of all of them to the value of sand. Instead you need to label each row of the table with html (eg <tr class="year-2015">), then you can select the right td element by using something like $(".year-2015 .sand").

First, you should change the key of the year in your json response to "year" instead of ""
Then you should associate that year with the tr's in some way, such as
<tr year='2016'>
Then in your for loop you can select just the .sand element that is a child of the correct tr.
$("tr[year='" + arr[i].year + "'] .sand").html(sand)

perhaps you should dynamically add a row for each of the results you receive from your ajax call like shown below:
$(document).ready(function() {
var arrayResults = [
{ Year: '2016', Sand: '123', Salt: '234', Snow: '345' },
{ Year: '2015', Sand: '222', Salt: '333', Snow: '444' },
{ Year: '2014', Sand: '555', Salt: '111', Snow: '888' },
{ Year: '2013', Sand: '121', Salt: '232', Snow: '343' },
{ Year: '2012', Sand: '454', Salt: '565', Snow: '676' }
];
for(var i = 0; i < arrayResults.length; i++) {
var newRow = '<tr>';
newRow += '<td class="year">' + arrayResults[i].Year + '</td>';
newRow += '<td class="sand">' + arrayResults[i].Sand + '</td>';
newRow += '<td class="salt">' + arrayResults[i].Salt + '</td>';
newRow += '<td class="snow">' + arrayResults[i].Snow + '</td>';
newRow += '</tr>';
$('tbody').append(newRow);
}
});
th, td {
border: 1px solid black;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr><th>year</th><th>sand</th><th>salt</th><th>snow</th></tr>
</thead>
<tbody>
</tbody>
</table>

Group the names when age are the same in javascript

I am getting a list of members using jQuery and iterating over each of them to get a name and age. What I want to do is store the names together if they have the same age. Something like:
{
31: { John, Mary },
24: { Paul, Peter }
}
I can't seem to store them correctly.
EDIT:
This is what I have so far:
$('span.members a').each(function () {
$.ajax({
url: $(this).attr('href'),
success: function (result) {
name = $(result).find('tr td:contains("Username:")').next().text().trim();
age = $(result).find('tr td:contains("Age:")').next().text().trim();
}
});
});
EDIT:
This is the source HTML:
<table cellpadding="0" cellspacing="0" border="0" width="96%" class="box" id="testProf" style="border-spacing:0;">
<tr>
<td class="top" colspan="4">
JohnRandall
</td>
</tr>
<tr>
<td style="padding:4px" width="100" height="1" align="left">
Username:
</td>
<td style="padding:4px" height="1">
JohnRandall
</td>
<td style="padding:4px" width="130" height="1">
Add as friend
</td>
<td width="300" style="padding:0px;margin:0;overflow:hidden;" rowspan="11" valign="top"><img src="//id.crimecdn.com/0gd74.jpg" width="300" style="display: block;max-height:2000px;"></td>
</tr>
<tr class="odd">
<td style="padding:4px" align="left" height="1">
Status:
</td>
<td style="padding:4px" height="1">
<span style="color:#00ff00;" title="Online Now">•</span> <span style="color:#00ff00;">Online</span>
</td>
<td style="padding:4px" height="1">
Add as enemy
</td>
</tr>
<tr>
<td style="padding:4px" align="left" height="1">
Crew: </td>
<td height="1">
<img src="//id.crimecdn.com/o7yft.jpg" width="59" height="33" style="border:0;display: block;">
</td>
<td style="padding:4px" height="1">
Send message
</td>
</tr>
<tr class="odd">
<td style="padding:4px" align="left" height="1">
Wealth:
</td>
<td style="padding:4px" height="1">
Dangerously Healthy (?)
</td>
<td style="padding:4px" height="1">
Send money
</td>
</tr>
<tr>
<td style="padding:4px" align="left" height="1">
Age:
</td>
<td style="padding:4px" height="1">
28
</td>
<td style="padding:4px" height="1">
Send escrow
</td>
</tr>
<tr class="odd">
<td style="padding:4px" align="left" height="1">
Gender:
</td>
<td style="padding:4px" height="1">
Male
</td>
<td style="padding:4px" height="1">
Kill search
</td>
</tr>
<tr>
<td style="padding:4px" align="left" height="1">
Last Active:
</td>
<td style="padding:4px" height="1">
Just now
</td>
<td style="padding:4px" height="1">
Compare
</td>
</tr>
<tr class="odd">
<td style="padding:4px" align="left" height="1">
Date Joined:
</td>
<td style="padding:4px" height="1">
2015-12-16
</td>
<td style="padding:4px" height="1">
!--overlord2.php?id=lookup&prefill=JohnRandall-->
</td>
</tr>
<tr>
<td style="padding:4px" align="left" height="1">
Messages:
</td>
<td style="padding:4px" height="1">
2
</td>
<td style="padding:4px" height="1">
</td>
</tr>
<tr>
<td class="backdrop" style="padding: 4px;" colspan="3" height="1">
<img src="//caviar.dtmcdn.com/render/45865/12"> Edit my profile<p class="royal">Player quote</p>
</td>
</tr>
<tr>
<td colspan="3" valign="top" style="background-color:#2a2a2a !important;padding: 0 !important;">
<div style="width:480px; overflow:hidden;">
92
</div>
</td>
</tr>

Step 1 : the target datastructure :
There are two issues with your data structure :
You're forgetting to put the names between quotes. John should be "John". Mary should be "Mary". etc.
You're trying to use an object for [ "John", "Mary" ] and [ "Paul", "Peter" ], where you should be using an array.
So, the data structure you're looking for, is this :
{
31 : [ "John", "Mary" ],
24 : [ "Paul", "Peter" ]
}
Step 2 : fetching the data from the HTML input :
I suggest you make this small adjustment to your JavaScript code :
var source = [];
$('span.members a').each(function () {
$.ajax({
url: $(this).attr('href'),
success: function (result) {
source.push({
name : $(result).find('tr td:contains("Username:")').next().text().trim(),
age : $(result).find('tr td:contains("Age:")').next().text().trim()
});
}
});
});
(see also this Fiddle)
This fetches the data from your HTML input and puts it into a data structure that looks like this :
var source = [{
name : "Paul",
age : 24
}, {
name : "Mary",
age : 31
}, {
name : "Peter",
age : 24
}, {
name : "John",
age : 31
}];
Step 3 : converting to the right data structure :
Once you fetched all the data, you only need to convert your data from the source data structure to the target data structure, which is as simple as this :
var convert = function(source) {
var output = {};
for(var i = 0; i < source.length; i++) {
if(output[source[i].age]) {
output[source[i].age].push(source[i].name);
} else {
output[source[i].age] = [source[i].name];
}
}
return output;
}
(see also this Fiddle)
Putting the pieces of the puzzle together :
You have to wait with executing your convert function until all of your Ajax calls have finished.
For example, you could do something like ...
if (source.length === numberOfMembers) {
target = convert(source);
}
... right behind the source.push(...) statement.
So if you put all the pieces of the puzzle together, you should get something like this :
var source = [];
var target;
var $members = $('span.members a');
var numberOfMembers = $members.size();
var convert = function(source) {
var output = {};
for(var i = 0; i < source.length; i++) {
if(output[source[i].age]) {
output[source[i].age].push(source[i].name);
} else {
output[source[i].age] = [source[i].name];
}
}
return output;
}
$members.each(function () {
$.ajax({
url: $(this).attr('href'),
success: function (result) {
source.push({
name : $(result).find('tr td:contains("Username:")').next().text().trim(),
age : $(result).find('tr td:contains("Age:")').next().text().trim()
});
if (source.length === numberOfMembers) {
target = convert(source);
}
}
});
});

This should give you some idea of what to do:
abcArr = [["Paul", 24], ["Mary", 31], ["Peter",24],["John",31]];
var items = {}, base, key;
$.each(abcArr, function(index, val) {
key = val[1];
users = [];
if (items[key]) {
items[key].push(val[0]);
}
else {
users.push(val[0])
items[key] = users;
}
});
var outputArr = [];
$.each(items, function(key, val) {
outputArr.push([key, val]);
});
// outputArr contains the result
document.body.innerHTML = JSON.stringify(outputArr);
https://jsfiddle.net/rennomarcus/7Lvy0w1t/
I got the idea from this topic: jquery array group by

Iterating over arraylist of arraylist using ng-repeat in angularjs

I am having a Json arraylist which contains another arraylist. I need to iterate over both these arraylists and display records in table.
This is what i have tried so far.
I tried using two ng-repeats in same tr.But it didnt work
<tr class="ng-scope"
ng-repeat="msgcounts in pastdata" ng-repeat="past in msgcounts.arrayList_Jsons" >
<td class="numeric">{{ 1}}</td>
<td class="numeric">{{ past.aggregator}}</td>
<td class="numeric">{{past.loadedCount}}</td>
<td class="numeric">{{past.sentCount}}</td>
<td>{{past.sentCount}}</td>
<td >{{past.failedCount}}</td>
<td class="numeric">{{past.replyCount}}</td> <td class="numeric">{{msgcounts.date}}</td>
</tr>
I tried creating a div in tr tag
<tr class="ng-scope"
ng-repeat="msgcounts in pastdata">
<div ng-repeat="past in msgcounts.arrayList_Jsons" >
<td class="numeric">{{ 1}}</td>
<td class="numeric">{{ past.aggregator}}</td>
<td class="numeric">{{past.loadedCount}}</td>
<td class="numeric">{{past.sentCount}}</td>
<td>{{past.sentCount}}</td>
<td >{{past.failedCount}}</td>
<td class="numeric">{{past.replyCount}}</td>
</div>
<td class="numeric">{{msgcounts.date}}</td>
<tr>
Here is the sample data:
{
[
{date1,[{1,1,1,1},{2,2,2,2}]},
{date2,[{1,1,1,1},{2,2,2,2}]},
{date3,[{1,1,1,1},{2,2,2,2}]},
]
}
Please suggest me what can be done in this case.
Html should look like this

you can't set two ng-repeats on one element,
and a div cannot be a direct child of a tr.
you could maybe use another tbody tag to solve this:
<tbody ng-repeat="msgcounts in pastdata">
<tr ng-repeat="past in msgcounts.arrayList_Jsons">
<td class="numeric">{{1}}</td>
<td class="numeric">{{ past.aggregator}}</td>
<td class="numeric">{{past.loadedCount}}</td>
<td class="numeric">{{past.sentCount}}</td>
<td>{{past.sentCount}}</td>
<td>{{past.failedCount}}</td>
<td class="numeric">{{past.replyCount}}</td>
<td class="numeric">{{msgcounts.date}}</td>
</tr>
</tbody>

If your data looks like the following :
$scope.groupDetails = [{
groupingNumber: '1',
groupDetails: [{
sequence: '1',
text: 'test 1',
}]
},
{
groupingNumber: '2',
groupDetails: [{
sequence: '1',
text: 'test 2',
}, {sequence: '2',
text: 'test 3', }]
},
{
groupingNumber: '3',
groupDetails: [{
sequence: '3',
text: 'test 4',
}]
}
];
In the front end you can write something like this :
<div ng-repeat="grouping in groupDetails">
<div ng-repeat = "groupSequence in grouping.groupDetails">
<div>{{groupSequence.text}}</div>
</div>
</div>

Populating a drop down box using javascript from server side files

I have a small site that has a dropdown box which I hope I can populate from a folder on a hosted server, each item in the dropdown box should represent the file name of each file in the folder.
This is then linked to a button which will call a function load selected data into a script to visualize.
I am currently unsure about loading the file list into the application.
so far I have:
drop down list (note: using jade):
select#dataSetChoice
the function to run a script based on the contents of the drop down box:
function loadDataSet(){
var dataSet = dataSetChoice.options[dataSetChoice.selectedIndex].text;
initialize(dataSet);
}
the button event:
button(onclick='loadDataSet()') Load data
all I need to do down is populate the drop box list based on the contents of this folder:
http://localhost/data/
Edit: html directory listing as requested
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>Index of /pje40</title>
</head>
<body>
<h1>Index of /pje40</h1>
<table>
<tr>
<th valign="top">
<img src="/icons/blank.gif" alt="[ICO]">
</th>
<th>
Name
</th>
<th>
Last modified
</th>
<th>
Size
</th>
<th>
Description
</th>
</tr>
<tr>
<th colspan="5"><hr></th>
</tr>
<tr>
<td valign="top">
<img src="/icons/back.gif" alt="[PARENTDIR]">
</td>
<td>
Parent Directory
</td>
<td> </td>
<td align="right"> - </td>
<td> </td>
</tr>
<tr>
<td valign="top">
<img src="/icons/unknown.gif" alt="[ ]">
</td>
<td>
week1
</td>
<td align="right">
2013-12-06 19:28
</td>
<td align="right">119K</td>
<td> </td>
</tr>
<tr>
<td valign="top">
<img src="/icons/unknown.gif" alt="[ ]">
</td>
<td>
week2
</td>
<td align="right">
2013-12-06 19:28
</td>
<td align="right">119K</td>
<td> </td>
</tr>
<tr>
<td valign="top">
<img src="/icons/unknown.gif" alt="[ ]">
</td>
<td>
week3
</td>
<td align="right">
2013-12-06 19:28
</td>
<td align="right">119K</td>
<td> </td>
</tr>
<tr>
<th colspan="5"><hr></th>
</tr>
</table>
<address>Apache/2.4.7 (Win32) OpenSSL/1.0.1e PHP/5.5.6 Server at localhost Port 80</address>
</body>
</html>
Should the jquery look similar to this:
script(src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js')
var returned_html = $.trim($('http://localhost/pje40/').html());
var trs = $(returned_html).find('tr');
trs.splice(0, 2);
trs.splice(trs.length - 1, 1);
var directory_list = [];
for(var i = 0; i < trs.length; i++)
{
var tds = $(trs[i]).find('td');
directory_list.push({
"icon": $(tds[0]).find('img').attr('src'),
"name": $(tds[1]).find('a').html(),
"href": $(tds[1]).find('a').attr('href'),
"last_modified": $(tds[2]).html(),
"size": $(tds[3]).html(),
"description": $(tds[4]).html()
});
}
alert(directory_list.length);

Well here is the sketch of what can be done with your problem. I have used jQuery to somehow ease DOM traversion
// Lets say `returned_html` it what came from server
var returned_html = $.trim($('#returned_html').html());
// We need to find all TRs and drop first two and the last one
var trs = $(returned_html).find('tr');
trs.splice(0, 2);
trs.splice(trs.length - 1, 1);
// Now we should have 4 lines (with to Parent Directory one).
// Lets create list
var directory_list = [];
for(var i = 0; i < trs.length; i++)
{
var tds = $(trs[i]).find('td');
directory_list.push({
"icon": $(tds[0]).find('img').attr('src'),
"name": $(tds[1]).find('a').html(),
"href": $(tds[1]).find('a').attr('href'),
"last_modified": $(tds[2]).html(),
"size": $(tds[3]).html(),
"description": $(tds[4]).html()
});
}
You'll get in directory_list:
[
{
description: " ",
href: "/",
icon: "/icons/back.gif",
last_modified: " ",
name: "Parent Directory",
size: " - "
},
{
description: " ",
href: "week1",
icon: "/icons/unknown.gif",
last_modified: "↵ 2013-12-06 19:28↵ ",
name: "week1",
size: "119K"
},
{
description: " ",
href: "week2",
icon: "/icons/unknown.gif",
last_modified: "↵ 2013-12-06 19:28↵ ",
name: "week2",
size: "119K"
},
{
description: " ",
href: "week3",
icon: "/icons/unknown.gif",
last_modified: "↵ 2013-12-06 19:28↵ ",
name: "week3",
size: "119K"
}
]
As you can see it still needs some post processing.
Fiddle to play with.
Update
You can get directory listing with
$.get('http://localhost/pje40/', function(html) {
process_listing(html);
});
You should proccess returned data in callback because $.get() is async by default.
But you can run into cross domain request problem here. Please read about CORS.
The other way would be to create hidden iframe and load http://localhost/pje40/. Then do some thing like I've done in my first fiddle.
Needless to say that process_listing() in this case is
function process_listing(returned_html)
{
// We need to find all TRs and drop first two and the last one
var trs = $(returned_html).find('tr');
trs.splice(0, 2);
trs.splice(trs.length - 1, 1);
// Now we should have 4 lines (with to Parent Directory one).
// Lets create list
var directory_list = [];
for(var i = 0; i < trs.length; i++)
{
var tds = $(trs[i]).find('td');
directory_list.push({
"icon": $(tds[0]).find('img').attr('src'),
"name": $(tds[1]).find('a').html(),
"href": $(tds[1]).find('a').attr('href'),
"last_modified": $(tds[2]).html(),
"size": $(tds[3]).html(),
"description": $(tds[4]).html()
});
}
}

Knockout js template, filter first element of observable array

Hi I'm trying to make the first element of my observableArray hidden, the following doesn't appear to be working, any ideas?
data-bind="ifnot: $root.typedData[0]===$data"
http://jsfiddle.net/Lx8jR/
<table border="1" style="width:90%">
<tr>
<td data-bind="text: typedData()[0].name"></td>
<td data-bind="text: typedData()[0].type"></td>
</tr>
<tr>
<td>
<table data-bind="foreach: typedData()">
<tr>
<td data-bind="text: name"></td>
</tr>
</table>
</td>
<td>
<table data-bind="foreach: typedData()">
<tr data-bind="ifnot: $root.typedData[0]===$data">
<td data-bind="text: type">
</td>
<td data-bind="text: $index">
</td>
</tr>
</table>
</td>
</tr>
</table>
var ViewModel = function() {
var self = this;
this.typedData = ko.observableArray([
{ name: "Bungle", type: "Bear" },
{ name: "George", type: "Hippo" },
{ name: "Zippy", type: "Unknown" }
]).indexed();
}

Looks like you missed a () on that line.
ifnot: $root.typedData[0]===$data
becomes
ifnot: $root.typedData()[0]===$data
http://jsfiddle.net/Lx8jR/1/
A simple mistake I've made a few dozen times.
If you get into the habit of using ko.utils.unwrapObservable this becomes less of an issue. If you use that function on a non-observable, it still succeeds.
... ko.utils.unwrapObservable($root.typedData)[0]
And for reference, there's an article on KnockMeOut which suggests a few other standards that help simplify our templates and bindings.

typedData is an observableArray, so in your comparison you would want to do (add ()):
$root.typedData()[0] === $data