Skip to content

Instantly share code, notes, and snippets.

@melissamcewen

melissamcewen/index.html

Created February 22, 2019 14:51
Show Gist options
  • Save melissamcewen/d14a3ecc7d71babf2d2333c7ec7a96f6 to your computer and use it in GitHub Desktop.
Save melissamcewen/d14a3ecc7d71babf2d2333c7ec7a96f6 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/qagixik
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
let myData = {
"records": [
{
"id": "recm2Wx0ia2Sy4CWu",
"fields": {
"Name": "White Mandarin Collar jacket",
"Capsule": "Boho",
"Type": "outer",
"subtype": [
"mandarin collar"
],
"Color": "white",
"Source": [
"Vintage"
],
"Status": "Active",
"Fit rating": 5,
"Like rating": 3,
"Round 5": 0.8048316418,
"Appropriate": [
"Business Casual"
],
"Temp": [
"All"
],
"Worn Old": 4,
"Skip Old": 1,
"Skip": 0,
"Worn": 0,
"Days Since Last Worn": 31,
"Days Since Last Skipped": 31
},
"createdTime": "2019-01-20T20:42:58.000Z"
},
{
"id": "recQvVBeu04nHrrxf",
"fields": {
"Name": "Eileen fisher black dress",
"Capsule": "Minimalist",
"Type": "dress",
"subtype": [
"swing dress"
],
"Color": "black",
"Source": [
"Eileen Fisher",
"Thrift"
],
"Date Acquired": "2018-08-20",
"Price": 30,
"Status": "Active",
"Fit rating": 5,
"Like rating": 4,
"Round 5": 0.8027309842,
"Appropriate": [
"Business Casual",
"Home"
],
"Temp": [
"All"
],
"Last Worn Old": "2019-01-07",
"Worn Old": 6,
"Skip Old": 1,
"Skip": 0,
"Worn": 0,
"Days Since Last Worn": 31,
"Days Since Last Skipped": 31
},
"createdTime": "2019-01-20T20:42:58.000Z"
},
{
"id": "reczzfZpd20G0UiuX",
"fields": {
"Name": "Houndstooth blue ponte dress",
"Capsule": "Retro",
"Type": "dress",
"subtype": [
"a-line dress"
],
"Color": "blue",
"Pattern": [
"Houndstooth"
],
"Source": [
"Target"
],
"Status": "Active",
"Fit rating": 5,
"Like rating": 5,
"Round 5": 0.7951577545,
"Appropriate": [
"Business Casual",
"Home"
],
"Temp": [
"All"
],
"Last Worn Old": "2018-09-12",
"Worn Old": 4,
"Skip Old": 2,
"Skip": 0,
"Worn": 0,
"Days Since Last Worn": 31,
"Days Since Last Skipped": 31
},
"createdTime": "2019-01-20T20:42:58.000Z"
},
{
"id": "recQvVBeu04nHrrxf",
"fields": {
"Name": "Eileen fisher black dress",
"Capsule": "Minimalist",
"Type": "dress",
"subtype": [
"swing dress"
],
"Color": "black",
"Source": [
"Eileen Fisher",
"Thrift"
],
"Date Acquired": "2018-08-20",
"Price": 30,
"Status": "Active",
"Fit rating": 5,
"Like rating": 4,
"Round 5": 0.8027309842,
"Appropriate": [
"Business Casual",
"Home"
],
"Temp": [
"All"
],
"Last Worn Old": "2019-01-07",
"Worn Old": 6,
"Skip Old": 1,
"Skip": 0,
"Worn": 0,
"Days Since Last Worn": 31,
"Days Since Last Skipped": 31
},
"createdTime": "2019-01-20T20:42:58.000Z"
},
{
"id": "reczzfZpd20G0UiuX",
"fields": {
"Name": "Houndstooth blue ponte dress",
"Capsule": "Retro",
"Type": "dress",
"subtype": [
"a-line dress"
],
"Color": "blue",
"Pattern": [
"Houndstooth"
],
"Source": [
"Target"
],
"Status": "Active",
"Fit rating": 5,
"Like rating": 5,
"Round 5": 0.7951577545,
"Appropriate": [
"Business Casual",
"Home"
],
"Temp": [
"All"
],
"Last Worn Old": "2018-09-12",
"Worn Old": 4,
"Skip Old": 2,
"Skip": 0,
"Worn": 0,
"Days Since Last Worn": 31,
"Days Since Last Skipped": 31
},
"createdTime": "2019-01-20T20:42:58.000Z"
}
],
"offset": "reczzfZpd20G0UiuX"
};
let records = myData.records;
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce#Grouping_objects_by_a_property
function groupBy(objectArray, property) {
return objectArray.reduce(function (acc, obj) {
var key = obj['fields'][property];
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(obj);
return acc;
}, {});
}
let groupedClothing = groupBy(records, 'Color');
let labels = [];
let data = [];
let niceResponse = {}
//expected
// white 1
//blue 2
// black 2
/*for (let color in groupedClothing) {
labels.push(color);
data.push(groupedClothing[color].length);
}
*/
for (let color in groupedClothing) {
niceResponse[color] = groupedClothing[color].length
}
console.log(niceResponse)
</script>
<script id="jsbin-source-javascript" type="text/javascript">let myData = {
"records": [
{
"id": "recm2Wx0ia2Sy4CWu",
"fields": {
"Name": "White Mandarin Collar jacket",
"Capsule": "Boho",
"Type": "outer",
"subtype": [
"mandarin collar"
],
"Color": "white",
"Source": [
"Vintage"
],
"Status": "Active",
"Fit rating": 5,
"Like rating": 3,
"Round 5": 0.8048316418,
"Appropriate": [
"Business Casual"
],
"Temp": [
"All"
],
"Worn Old": 4,
"Skip Old": 1,
"Skip": 0,
"Worn": 0,
"Days Since Last Worn": 31,
"Days Since Last Skipped": 31
},
"createdTime": "2019-01-20T20:42:58.000Z"
},
{
"id": "recQvVBeu04nHrrxf",
"fields": {
"Name": "Eileen fisher black dress",
"Capsule": "Minimalist",
"Type": "dress",
"subtype": [
"swing dress"
],
"Color": "black",
"Source": [
"Eileen Fisher",
"Thrift"
],
"Date Acquired": "2018-08-20",
"Price": 30,
"Status": "Active",
"Fit rating": 5,
"Like rating": 4,
"Round 5": 0.8027309842,
"Appropriate": [
"Business Casual",
"Home"
],
"Temp": [
"All"
],
"Last Worn Old": "2019-01-07",
"Worn Old": 6,
"Skip Old": 1,
"Skip": 0,
"Worn": 0,
"Days Since Last Worn": 31,
"Days Since Last Skipped": 31
},
"createdTime": "2019-01-20T20:42:58.000Z"
},
{
"id": "reczzfZpd20G0UiuX",
"fields": {
"Name": "Houndstooth blue ponte dress",
"Capsule": "Retro",
"Type": "dress",
"subtype": [
"a-line dress"
],
"Color": "blue",
"Pattern": [
"Houndstooth"
],
"Source": [
"Target"
],
"Status": "Active",
"Fit rating": 5,
"Like rating": 5,
"Round 5": 0.7951577545,
"Appropriate": [
"Business Casual",
"Home"
],
"Temp": [
"All"
],
"Last Worn Old": "2018-09-12",
"Worn Old": 4,
"Skip Old": 2,
"Skip": 0,
"Worn": 0,
"Days Since Last Worn": 31,
"Days Since Last Skipped": 31
},
"createdTime": "2019-01-20T20:42:58.000Z"
},
{
"id": "recQvVBeu04nHrrxf",
"fields": {
"Name": "Eileen fisher black dress",
"Capsule": "Minimalist",
"Type": "dress",
"subtype": [
"swing dress"
],
"Color": "black",
"Source": [
"Eileen Fisher",
"Thrift"
],
"Date Acquired": "2018-08-20",
"Price": 30,
"Status": "Active",
"Fit rating": 5,
"Like rating": 4,
"Round 5": 0.8027309842,
"Appropriate": [
"Business Casual",
"Home"
],
"Temp": [
"All"
],
"Last Worn Old": "2019-01-07",
"Worn Old": 6,
"Skip Old": 1,
"Skip": 0,
"Worn": 0,
"Days Since Last Worn": 31,
"Days Since Last Skipped": 31
},
"createdTime": "2019-01-20T20:42:58.000Z"
},
{
"id": "reczzfZpd20G0UiuX",
"fields": {
"Name": "Houndstooth blue ponte dress",
"Capsule": "Retro",
"Type": "dress",
"subtype": [
"a-line dress"
],
"Color": "blue",
"Pattern": [
"Houndstooth"
],
"Source": [
"Target"
],
"Status": "Active",
"Fit rating": 5,
"Like rating": 5,
"Round 5": 0.7951577545,
"Appropriate": [
"Business Casual",
"Home"
],
"Temp": [
"All"
],
"Last Worn Old": "2018-09-12",
"Worn Old": 4,
"Skip Old": 2,
"Skip": 0,
"Worn": 0,
"Days Since Last Worn": 31,
"Days Since Last Skipped": 31
},
"createdTime": "2019-01-20T20:42:58.000Z"
}
],
"offset": "reczzfZpd20G0UiuX"
};
let records = myData.records;
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce#Grouping_objects_by_a_property
function groupBy(objectArray, property) {
return objectArray.reduce(function (acc, obj) {
var key = obj['fields'][property];
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(obj);
return acc;
}, {});
}
let groupedClothing = groupBy(records, 'Color');
let labels = [];
let data = [];
let niceResponse = {}
//expected
// white 1
//blue 2
// black 2
/*for (let color in groupedClothing) {
labels.push(color);
data.push(groupedClothing[color].length);
}
*/
for (let color in groupedClothing) {
niceResponse[color] = groupedClothing[color].length
}
console.log(niceResponse)
</script></body>
</html>
Raw
jsbin.qagixik.js
let myData = {
"records": [
{
"id": "recm2Wx0ia2Sy4CWu",
"fields": {
"Name": "White Mandarin Collar jacket",
"Capsule": "Boho",
"Type": "outer",
"subtype": [
"mandarin collar"
],
"Color": "white",
"Source": [
"Vintage"
],
"Status": "Active",
"Fit rating": 5,
"Like rating": 3,
"Round 5": 0.8048316418,
"Appropriate": [
"Business Casual"
],
"Temp": [
"All"
],
"Worn Old": 4,
"Skip Old": 1,
"Skip": 0,
"Worn": 0,
"Days Since Last Worn": 31,
"Days Since Last Skipped": 31
},
"createdTime": "2019-01-20T20:42:58.000Z"
},
{
"id": "recQvVBeu04nHrrxf",
"fields": {
"Name": "Eileen fisher black dress",
"Capsule": "Minimalist",
"Type": "dress",
"subtype": [
"swing dress"
],
"Color": "black",
"Source": [
"Eileen Fisher",
"Thrift"
],
"Date Acquired": "2018-08-20",
"Price": 30,
"Status": "Active",
"Fit rating": 5,
"Like rating": 4,
"Round 5": 0.8027309842,
"Appropriate": [
"Business Casual",
"Home"
],
"Temp": [
"All"
],
"Last Worn Old": "2019-01-07",
"Worn Old": 6,
"Skip Old": 1,
"Skip": 0,
"Worn": 0,
"Days Since Last Worn": 31,
"Days Since Last Skipped": 31
},
"createdTime": "2019-01-20T20:42:58.000Z"
},
{
"id": "reczzfZpd20G0UiuX",
"fields": {
"Name": "Houndstooth blue ponte dress",
"Capsule": "Retro",
"Type": "dress",
"subtype": [
"a-line dress"
],
"Color": "blue",
"Pattern": [
"Houndstooth"
],
"Source": [
"Target"
],
"Status": "Active",
"Fit rating": 5,
"Like rating": 5,
"Round 5": 0.7951577545,
"Appropriate": [
"Business Casual",
"Home"
],
"Temp": [
"All"
],
"Last Worn Old": "2018-09-12",
"Worn Old": 4,
"Skip Old": 2,
"Skip": 0,
"Worn": 0,
"Days Since Last Worn": 31,
"Days Since Last Skipped": 31
},
"createdTime": "2019-01-20T20:42:58.000Z"
},
{
"id": "recQvVBeu04nHrrxf",
"fields": {
"Name": "Eileen fisher black dress",
"Capsule": "Minimalist",
"Type": "dress",
"subtype": [
"swing dress"
],
"Color": "black",
"Source": [
"Eileen Fisher",
"Thrift"
],
"Date Acquired": "2018-08-20",
"Price": 30,
"Status": "Active",
"Fit rating": 5,
"Like rating": 4,
"Round 5": 0.8027309842,
"Appropriate": [
"Business Casual",
"Home"
],
"Temp": [
"All"
],
"Last Worn Old": "2019-01-07",
"Worn Old": 6,
"Skip Old": 1,
"Skip": 0,
"Worn": 0,
"Days Since Last Worn": 31,
"Days Since Last Skipped": 31
},
"createdTime": "2019-01-20T20:42:58.000Z"
},
{
"id": "reczzfZpd20G0UiuX",
"fields": {
"Name": "Houndstooth blue ponte dress",
"Capsule": "Retro",
"Type": "dress",
"subtype": [
"a-line dress"
],
"Color": "blue",
"Pattern": [
"Houndstooth"
],
"Source": [
"Target"
],
"Status": "Active",
"Fit rating": 5,
"Like rating": 5,
"Round 5": 0.7951577545,
"Appropriate": [
"Business Casual",
"Home"
],
"Temp": [
"All"
],
"Last Worn Old": "2018-09-12",
"Worn Old": 4,
"Skip Old": 2,
"Skip": 0,
"Worn": 0,
"Days Since Last Worn": 31,
"Days Since Last Skipped": 31
},
"createdTime": "2019-01-20T20:42:58.000Z"
}
],
"offset": "reczzfZpd20G0UiuX"
};
let records = myData.records;
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce#Grouping_objects_by_a_property
function groupBy(objectArray, property) {
return objectArray.reduce(function (acc, obj) {
var key = obj['fields'][property];
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(obj);
return acc;
}, {});
}
let groupedClothing = groupBy(records, 'Color');
let labels = [];
let data = [];
let niceResponse = {}
//expected
// white 1
//blue 2
// black 2
/*for (let color in groupedClothing) {
labels.push(color);
data.push(groupedClothing[color].length);
}
*/
for (let color in groupedClothing) {
niceResponse[color] = groupedClothing[color].length
}
console.log(niceResponse)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment