Skip to content

Instantly share code, notes, and snippets.

@melissamcewen

melissamcewen/index.html

Created February 22, 2019 14:30
Show Gist options
  • Save melissamcewen/85004ae46b4bc71b658c0de1197213b0 to your computer and use it in GitHub Desktop.
Save melissamcewen/85004ae46b4bc71b658c0de1197213b0 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">
"use strict";
var 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"
};
var 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;
}, {});
}
var groupedClothing = groupBy(records, 'Color');
console.log(groupedClothing);
var labels = [];
var data = [];
var niceResponse = {};
//expected
// white 1
//blue 2
// black 2
for (var color in groupedClothing) {
labels.push(color);
data.push(groupedClothing[color].length);
}
niceResponse.data = data;
niceResponse.labels = labels;
</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');
console.log(groupedClothing)
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);
}
niceResponse.data = data;
niceResponse.labels = labels;
</script></body>
</html>
Raw
jsbin.qagixik.js
"use strict";
var 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"
};
var 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;
}, {});
}
var groupedClothing = groupBy(records, 'Color');
console.log(groupedClothing);
var labels = [];
var data = [];
var niceResponse = {};
//expected
// white 1
//blue 2
// black 2
for (var color in groupedClothing) {
labels.push(color);
data.push(groupedClothing[color].length);
}
niceResponse.data = data;
niceResponse.labels = labels;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment