Develop Reference

Json array prints out as a string? Not array? [duplicate]

This question already has answers here:
How to compute the sum and average of elements in an array? [duplicate]
(35 answers)
Closed 1 year ago.
I'm currently getting my data from an API. It stores the weight log of animal checkups as shown below.
Currently I'm storing it in a html tag:
<h3 className='dogWeight'>Average: {item.weight}%</h3>
But it prints the numbers together as a string (i.e 100102103). Is there anyway I can add all numbers in the array to just show the Average?
{
"dog":[
{
"weight":[
"78",
"100",
"92",
"86",
"89",
"88",
"91",
"87"
],
"id":"1",
},
{
"weight":[
"75",
"89",
"95",
"93",
"99",
"82",
"89",
"76"
],
"id":"2",
},

You can loop over data.dog and reduce the weight values by accumulating the parsed integer weight values and dividing by the length of the weight array.
const data = {
"dog": [{
"id": "1",
"weight": [ "78", "100", "92", "86", "89", "88", "91", "87" ],
}, {
"id": "2",
"weight": [ "75", "89", "95", "93", "99", "82", "89", "76" ],
}]
};
const avg = vals => vals.reduce((sum, x) => sum + parseInt(x, 10), 0) / vals.length;
data.dog.forEach(({ id, weight }) =>
console.log(`ID: ${id}, Avg Weight: ${avg(weight).toFixed(2)}%`));
.as-console-wrapper { top: 0; max-heightL 100% !important; }

how to transform array of object using reduce of map?

I am trying to transform array of object to different format.I also take reference from this url
Group js objects by multiple properties
But not able to solve the problem
I have a input array of object which have class and sections I need to transform or filter student in different format on basis of class and section.
here is my code
https://jsbin.com/nidudisuza/edit?js,output
let expectedout = [
{
class: 1,
sections: [{
"section": "B",
students: [ {
"name": "Test",
"class": 1,
"gender": "M",
"section": "B",
"rollNumber": "123111",
"sports": [
"Badminton",
"Chess"
],
"age": 7
}]
}]
},
{
class: 3,
sections: [{
"section": "B",
students: [{
"name": "Rahul",
"class": 3,
"gender": "M",
"section": "B",
"rollNumber": "1231",
"sports": [
"Badminton",
"Chess"
],
"age": 7
}]
}]
},
{
class: 5,
sections: [{
"section": "C",
students: [
{
"name": "Rajat",
"class": 5,
"gender": "M",
"section": "C",
"rollNumber": "123122",
"sports": [
"Chess"
],
"age": 9
}
]
}]
}
]
const input = [{
"name": "Rahul",
"class": 3,
"gender": "M",
"section": "B",
"rollNumber": "1231",
"sports": [
"Badminton",
"Chess"
],
"age": 7
},
{
"name": "Rajat",
"class": 5,
"gender": "M",
"section": "C",
"rollNumber": "123122",
"sports": [
"Chess"
],
"age": 9
},
{
"name": "Test",
"class": 1,
"gender": "M",
"section": "B",
"rollNumber": "123111",
"sports": [
"Badminton",
"Chess"
],
"age": 7
},
]
function abc() {
// let output =
// data.map((i) => {
// let obj = {};
// obj.class = i.class;
// obj.sections = [];
// obj.sections.push({
// section:obj.section,
// students:[obj]
// })
// return obj;
// })
let output =input.reduce((acc,i)=>{
let cls = i.class;
const found = acc.some(el => el.class === cls);
let obj = {
section:i.section,
students:[]
}
found.sections.students.push[i]
},[])
return output
}
console.log(abc())
}

I'd go for a 2 step process:
Reorganize the values to be mapped by an index (both for class and sections)
Then flatten out everything in arrays; depending on what you're doing having a dictionary could also be convenient.
Below you can find the function that makes the dictionary, in the snippet there is also the second step that transforms the dictionary values in arrays.
function abc() {
let output = input.reduce((ac, x) => {
let keyCl = x.class
let keySec = x.section
let orgClass = ac[keyCl]
let sections = orgClass && orgClass.sections || {}
let oldSec = sections && sections[keySec]
let sectionBase = oldSec || {
section: keySec,
students: []
}
sectionBase.students = [...(oldSec ? .students || []), x]
return {
...ac,
// we organize classes to be indexed in an obj,
// we can flat this out later
[keyCl]: {
class: keyCl,
sections: {
...sections,
// like for classes we organize sections by key
[keySec]: sectionBase
}
}
}
}, {})
return output
}
let expectedout = [{
class: 1,
sections: [{
"section": "B",
students: [{
"name": "Test",
"class": 1,
"gender": "M",
"section": "B",
"rollNumber": "123111",
"sports": [
"Badminton",
"Chess"
],
"age": 7
}]
}]
},
{
class: 3,
sections: [{
"section": "B",
students: [{
"name": "Rahul",
"class": 3,
"gender": "M",
"section": "B",
"rollNumber": "1231",
"sports": [
"Badminton",
"Chess"
],
"age": 7
}]
}]
},
{
class: 5,
sections: [{
"section": "C",
students: [
{
"name": "Rajat",
"class": 5,
"gender": "M",
"section": "C",
"rollNumber": "123122",
"sports": [
"Chess"
],
"age": 9
}
]
}]
}
]
const input = [{
"name": "Rahul",
"class": 3,
"gender": "M",
"section": "B",
"rollNumber": "1231",
"sports": [
"Badminton",
"Chess"
],
"age": 7
},
{
"name": "Rajat",
"class": 5,
"gender": "M",
"section": "C",
"rollNumber": "123122",
"sports": [
"Chess"
],
"age": 9
},
{
"name": "Test",
"class": 1,
"gender": "M",
"section": "B",
"rollNumber": "123111",
"sports": [
"Badminton",
"Chess"
],
"age": 7
},
]
function abc() {
let output = input.reduce((ac, x) => {
let keyCl = x.class
let keySec = x.section
let orgClass = ac[keyCl]
let sections = orgClass && orgClass.sections || {}
let oldSec = sections && sections[keySec]
let sectionBase = oldSec || {
section: keySec,
students: []
}
sectionBase.students = [...(oldSec && oldSec.students || []), x]
return {
...ac,
// we organize classes to be indexed in an obj,
// we can flat this out later
[keyCl]: {
class: keyCl,
sections: {
...sections,
// like for classes we organize sections by key
[keySec]: sectionBase
}
}
}
}, {})
return output
}
let res = abc()
console.log('with keys', res)
let onlyValues = Object.values(res).map(x => ({ ...x,
sections: Object.values(x.sections)
}))
console.log('only values', onlyValues)

Using Array#reduce to build an Object with the collected data. Foreach object look in the accumulated object if there exists an prperty for this class. If not create one and add to this the groundstructure for this class.
Afterwards add in both cases to the students array a new entry for this student.
After creating by this the object use Object#entries to take only the values of the object to get the ished array.
function modify(data) {
let res= Object.values(data.reduce((acc, cur) => {
if (!acc[cur.class]) {
acc[cur.class] = {
class: cur.class,
sections: [{
"section": cur.section,
students: []
}]
};
}
acc[cur.class].sections[0].students.push(cur);
return acc;
},{}));
return res;
}
const data = [{
"name": "Rahul",
"class": 3,
"gender": "M",
"section": "B",
"rollNumber": "1231",
"sports": [
"Badminton",
"Chess"
],
"age": 7
},
{
"name": "Rajat",
"class": 5,
"gender": "M",
"section": "C",
"rollNumber": "123122",
"sports": [
"Chess"
],
"age": 9
},
{
"name": "Test",
"class": 1,
"gender": "M",
"section": "B",
"rollNumber": "123111",
"sports": [
"Badminton",
"Chess"
],
"age": 7
},
]
console.log(modify(data));

Angular nested filters by checkbox

I'm trying to build a small schedule app, which displays events happening on one of two days. Users are currently able to filter the category/topic of the events by checkboxes.
Here is a demo: http://jsfiddle.net/qx3cD/201/
I want to create a nested filter, that first allows users to choose either Day 1 or Day 2, and then filters through those results by category.
Is there a way to perform a nested filter with Angular?
JS
function MyCtrl($scope) {
$scope.showAll = true;
$scope.checkChange = function() {
for(t in $scope.categoryArray){
if($scope.categoryArray[t].on){
$scope.showAll = false;
return;
}
}
$scope.showAll = true;
};
$scope.myFunc = function(a) {
if($scope.showAll) { return true; }
var sel = false;
for(cat in $scope.categoryArray){
var t = $scope.categoryArray[cat];
console.log(t);
if(t.on){
if(a.category.indexOf(t.name) == -1){
return false;
}else{
sel = true;
}
}
}
return sel;
};
$scope.categoryArray = [{ name: "A", on: false}, {name:"B", on: false}, {name:"C", on: false}, {name:"D", on: false}, {name:"E", on: false}, {name:"F", on: false}, {name:"G", on: false}, {name:"H", on: false}];
$scope.sessionArray = [{
"time": "9:00",
"day": "day 1",
"name": "Session One",
"category": ["A", "B", "E", "D"]
}, {
"time": "10:00",
"day": "day 1",
"name": "Session Two",
"category": ["A", "B", "C", "D"]
}, {
"time": "11:00",
"day": "day 1",
"name": "Session Three",
"category": ["G", "F", "D", "E"]
}, {
"time": "12:00",
"day": "day 1",
"name": "Intermission A",
"category": ["A", "B", "C", "D"]
}, {
"time": "13:00",
"day": "day 1",
"name": "Session Four",
"category": ["H", "A", "E"]
}, {
"time": "9:00",
"day": "day 2",
"name": "Session Five",
"category": ["D", "E", "B", "G"]
}, {
"time": "11:00",
"day": "day 2",
"name": "Session Six",
"category": ["A", "E", "C"]
}, {
"time": "12:00",
"day": "day 2",
"name": "Session Seven",
"category": ["G", "H", "B", "C"]
}]
HTML
<li ng-repeat="cat in categoryArray">
<label>
<input type="checkbox" ng-model="cat.on" ng-change="checkChange()" />{{cat.name}}</label>
</li>
<hr>
<h1><strong>Category:</strong></h1>
<div ng-repeat="sessionItem in sessionArray | filter:myFunc | orderBy: 'id'" class="ng-scope">
<h3>{{sessionItem.name}}</h3>
</div>
DEMO

To nest another filter just add another pipe | and use the "filter" filter normally.
<div ng-repeat="sessionItem in sessionArray | filter:myFunc | filter:theFilter | orderBy: 'id'">
Check the EXAMPLE here.

Filtering Array within a store record

I have a JSON object in a store that looks like the below. I am dynamically filtering values based on selections in a property grid. I am not filtering on the top level values (personName, primaryRole etc) but instead I want to drill down into the array of periods I have. For instance, I want to filter each record in the store for "periods" > "periodName".
I'm not sure how to do this, as it's not something I have come across before. Using combo.getStore().filter('periodName', gridvalues.periodName); does not work as it doesn't find the periodName, and I cannot simply use periods.periodName unfortunately.
"id": "531b0633-c9f5-4cbe-be69-5df4944b6e9b",
"personName": "Ben",
"primaryRole": "SWE",
"secondaryRole": "SWE",
"periods": [
{
"personName": "Ben",
"periodName": "Week 24",
"teamName": "Tango",
"experience": 2,
"periodNumber": 24,
"id": "71d514c2-a39f-40b7-af9e-51fbf30b2a48"
},
{
"personName": "Ben",
"periodName": "Week 25",
"teamName": "-",
"experience": "-",
"periodNumber": 25,
"id": "49505fb2-97df-4f45-a11d-bb22c110a422"
},
{
"personName": "Ben",
"periodName": "Week 26",
"teamName": "-",
"experience": "-",
"periodNumber": 26,
"id": "97f2b272-c23c-4320-a1ce-09dadf0c6b5d"
},
"id": "7037ad16-dcbe-4326-8547-65108c03c874",
"personName": "Luke",
"primaryRole": "Product Owner",
"secondaryRole": "SWE",
"periods": [
{
"personName": "Luke",
"periodName": "Week 24",
"teamName": "Tango",
"experience": 3,
"periodNumber": 24,
"id": "e3184bef-c330-4219-ae21-8b65efcde77c"
},
{
"personName": "Luke",
"periodName": "Week 25",
"teamName": "-",
"experience": "-",
"periodNumber": 25,
"id": "f431af7b-8060-40d2-8464-af533d943363"
},
This is a record from my store:
id: "531b0633-c9f5-4cbe-be69-5df4944b6e9b"periodNumber: 0periods: Array[16]0: Objectexperience: 2id: "71d514c2-a39f-40b7-af9e-51fbf30b2a48"periodName: "Week 24"periodNumber: 24personName: "Ben"teamName: "Tango"__proto__: Object1: Object2: Object3: Object4: Object5: Object6: Object7: Object8: Object9: Object10: Object11: Object12: Object13: Object14: Object15: Objectlength: 16__proto__: Array[0]personName: "Ben"primaryRole: "SWE"secondaryRole: "SWE"

Use the addFilter function in your controller:
combo.getStore().addFilter({property: 'yourProperty', value: 'valueToFilter'});
For more info:
http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.data.Store-method-addFilter

How to repeat a function with Javascript

This is the code that I've been working on, which makes the background color flicker colors. I'm wondering if anyone knows how to make this repeat so that the background continues to change colors on and on and on.
var a = new Array("ff", "ee", "dd", "cc", "bb", "aa", "99", "88", "77",
"66", "55", "44", "33", "22", "11", "00", "00", "11",
"22", "33", "44", "55", "66", "77", "88", "99", "AA",
"BB", "CC", "DD", "EE", "ff");
x = 0;
var b = new Array("ff", "ee", "dd", "cc", "bb", "aa", "99", "88", "77",
"66", "55", "44", "33", "22", "11", "00", "00", "11",
"22", "33", "44", "55", "66", "77", "88", "99", "AA",
"BB", "CC", "DD", "EE", "ff");
x = 0;
var c = new Array("00", "11", "22", "33", "44", "55", "66", "77", "88",
"99", "AA", "BB", "CC", "DD", "EE", "ff", "ff", "ee",
"dd", "cc", "bb", "aa", "99", "88", "77", "66", "55",
"44", "33", "22", "11", "00");
x = 0;
function bg_eff() {
col_val = "#" + a[x] + b[x] + c[x];
document.bgColor = col_val;
x++;
if (x == 32) {
clearInterval(change_bg);
}
}
change_bg = setInterval("bg_eff()", 50);

x = (x + 1) % 32;
Also, you should remove the clearInterval (and associated if), and there is no need to use a string for the setInterval:
change_bg = setInterval(bg_eff, 50);

modified code here (using jquery)
http://jsfiddle.net/generalhenry/S8g6k/1/
I use a recursive setTimeout instead of the interval, it's more resilient that way (if your function takes longer than the interval nothing odd occurs)

I would do this:
x += 1;
if ( x === 32 ) { x = 0; }

in addition to Matthew's answer but since the arrays are in the same sequence, you could do something like this.
var a = new Array("ff", "ee", "dd", "cc", "bb", "aa", "99", "88", "77", "66", "55", "44", "33", "22", "11", "00", "00", "11", "22", "33", "44", "55","66", "77", "88", "99", "AA", "BB", "CC", "DD", "EE", "ff"); // one array
var x = 0; // var for not global (even though in this context it still is...)
function big_eff() {
col_val = "#" + a[x] + a[(x + 5) % 32] + a[(x + 10) % 32]; // or whatever spacing you want
document.bgColor = col_val;
x = (x + 1) % 32;
setTimeout("big_eff()",50); // setTimeout baby!
}

a new version with pure Jquery
http://jsfiddle.net/generalhenry/S8g6k/5/
I use .animate for much cleaner code (no need for the arrays or the x++)
oh and warning: scary color swaping
$("body").css("background-color","#ffff00");
var bg_eff;
(bg_eff = function(x)
{
var duration = 1600;
if(x)
{
$("body").animate({backgroundColor:"#0000ff"},duration,function(){
bg_eff(false);
});
}
else
{
$("body").animate({backgroundColor:"#ffff00"},duration,function(){
bg_eff(true);
});
}
})(true);