Develop Reference

Accessing objects inside arrays

My API is returning the below response. I am trying to filter through the links to check if the source and target name properties in each object match a specific string. Any idea how I can do this, I am have troubling getting to the name property.
Currently this.chart.links.target.name and this.chart.links.source.name are returning undefined. I cannot seem to access the name properties.
Proxy {nodes: Array(69), links: Array(68)}
[[Handler]]: Object
[[Target]]: Object
links: Array(68)
0:
circular: false
index: 0
real_value: 10
source: {name: 'String1', color: 'yellow', index: 30, sourceLinks: Array(30), targetLinks: Array(24), …}
target: {name: 'String2', color: 'red', index: 0, sourceLinks: Array(0), targetLinks: Array(1), …}
value: 10
width: 2.152297042164877
y0: 111.36731918963686
y1: 193.80113278791737
[[Prototype]]: Object
1: {source: {…}, target: {…}, value: 10, real_value: 10, index: 1, …}
2: {source: {…}, target: {…}, value: 10, real_value: 10, index: 2, …}
3: {source: {…}, target: {…}, value: 10, real_value: 10, index: 3, …}
4: {source: {…}, target: {…}, value: 10, real_value: 10, index: 4, …}
5: {source: {…}, target: {…}, value: 10, real_value: 10, index: 5, …}
6: {source: {…}, target: {…}, value: 10, real_value: 10, index: 6, …}
7: {source: {…}, target: {…}, value: 10, real_value: 10, index: 7, …}
this is how my filter is looking:
const dataToFilter = ['String1', 'String2']
const links = this.chart.links.filter(io =>
!dataToFilter.includes(io.source.name || io.target.name)
)

Instead of !dataToFilter.includes(io.source.name || io.target.name) you want to have !(dataToFilter.includes(io.source.name) || dataToFilter.includes(io.target.name)) to check against the names separately.

Unexpected effect: Making a copy of an object modifies it

Context:
I have a component whichj emits data to the parent. Parent has two default objects-An empty array, and another object which contains default values, which are used to add a new element to the array using the data passed.
Template:
<billing-search
:search-term="searchText"
:show-modal="showBillingModal"
#closeModal="CloseBillingModal"
#selectedAnItem="AddSelectedItem"
/>
Initial data:
data() {
return {
billitems: [],
billitem_def: {
invitem: null,
procitem: null,
stockid: null,
qty: 0,
unitprice: 0,
discpercent: 0,
disc: 0,
}
}
},
My method in the parent triggered on emiting from the component, is this:
AddSelectedItem(data) {
console.log(`In AddSelectedItem`);
console.log(`this.billitems was `, this.billitems);
console.log(`Got data passed by component:`, data);
let newitem = this.billitem_def
console.log(`this.billitems was `, this.billitems);
newitem.invitem = data.item
newitem.stockid = data.storeitem
newitem.unitprice = newitem.stockid.mrp
console.log(`Added new item to billing list:`);
console.log(newitem);
this.billitems.push(newitem)
console.log(`this.billitems is now `, this.billitems);
console.log(`this.billitem_def is `, this.billitem_def);
},
See an example of console log:
In AddSelectedItem
BillingBlock.vue?670b:173 this.billitems was
0:
disc: 0
discpercent: 0
invitem: {id: 50, name: 'Waxonil Activ Ear Drops', description: 'Adult ear drops', itemtype: 4, clinic: 10, …}
procitem: null
qty: 0
stockid: {id: 432, entry: {…}, item: {…}, quantity: 30, stock: 21, …}
unitprice: "119.30"
BillingBlock.vue?670b:174 Got data passed by component:
{
item: {
clinic: 10
description: "Adult ear drops"
drugid: null
id: 50
isOpen: true
itemtype: 4
name: "Waxonil Activ Ear Drops"
storeitem: (13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
},
storeitem: {
batchnum: "SW135"
entry: {id: 275, entry_number: 'WjazQPLxb', reference_number: '', invoice_number: 'A-50864', entry_date: '2021-12-20', …}
expirydate: "2024-08-21"
id: 432
item: {id: 50, name: 'Waxonil Activ Ear Drops', description: 'Adult ear drops', itemtype: 4, clinic: 10, …}
manufacturedate: null
}
}
BillingBlock.vue?670b:177 this.billitems was
Proxy {
0:
disc: 0
discpercent: 0
invitem: {id: 50, name: 'Waxonil Activ Ear Drops', description: 'Adult ear drops', itemtype: 4, clinic: 10, …}
procitem: null
qty: 0
stockid: {id: 432, entry: {…}, item: {…}, quantity: 30, stock: 21, …}
unitprice: "119.30"
}
BillingBlock.vue?670b:181 Added new item to billing list:
BillingBlock.vue?670b:182
Proxy {invitem: {…}, procitem: null, stockid: {…}, qty: 0, unitprice: '119.30', …}
BillingBlock.vue?670b:185 this.billitems is now
Proxy {0: {…}}
BillingBlock.vue?670b:186 this.billitem_def is
Proxy { invitem: {… }, procitem: null, stockid: {… }, qty: 0, unitprice: '119.30', … }
Problems with this:
The this.billitems was shows data even before it is being assigned, instead of an empty array
this.billitem_def was set to some null values initially in the data part. It was not meant to get values, but to serve as a template of default data. Though I had let newitem = this.billitem_def, how is this.billitem_def's data getting modified? I dont have code anywhere in the project assigning this.billitem_def to anything else.

Get the last 30 days from an Array with Dates

What I am trying to achieve is to get all entries from an array in a range of the last 30 days and push this into a new array which I can work with afterwards.
My array (this.trades) looks like this:
{
id: "95",
datum: "2020-03-11",
trade: "EUR/USD BUY",
aktion: "closed",
pips: "10"
},
{
id: "94",
datum: "2020-06-09",
trade: "GBP/USD BUY",
aktion: "TP Hit",
pips: "65"
},
{
id: "93",
datum: "2020-06-08",
trade: "NZD/USD SELL",
aktion: "SL Hit",
pips: "-57"
},
datum is the german word for date.
the array is pretty long (filled with 95 entries over the past half year).
So my desired output would be:
to sort the Array by its date (this.trades.datum)
to extract all the entries within the last 30 days
and finally push this into a new array to work with (containing all the other keys)
I'm working in a vuejs project and have the opportunity to use computed properties for calculating, i'm also using momentjs library.
Here is my current function, where i convert datum into dateobjects:
But i want to get only the entries from the last 30 days.
chartDatumMonth() {
let data = this.trades;
data.forEach(d => {
d.dateObj = moment(d.datum);
});
console.log(data);
return data;
},
console output:
(80) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, __ob__: Observer]
0:
aktion: (...)
dateObj: Moment
_d: Wed Aug 05 2020 00:00:00 GMT+0200 (Mitteleuropäische Sommerzeit) {}
_f: "YYYY-MM-DD"
_i: "2020-08-05"
_isAMomentObject: true
_isUTC: false
_isValid: true
_locale: Locale {_calendar: {…}, _longDateFormat: {…}, _invalidDate: "Invalid date", _dayOfMonthOrdinalParse: /\d{1,2}(th|st|nd|rd)/, ordinal: ƒ, …}
_pf: {empty: false, unusedTokens: Array(0), unusedInput: Array(0), overflow: -1, charsLeftOver: 0, …}
__proto__: Object
datum: "2020-08-05"
id: (...)
pips: (...)
trade: (...)
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get aktion: ƒ reactiveGetter()
set aktion: ƒ reactiveSetter(newVal)
get datum: ƒ reactiveGetter()
set datum: ƒ reactiveSetter(newVal)
get id: ƒ reactiveGetter()
set id: ƒ reactiveSetter(newVal)
get pips: ƒ reactiveGetter()
set pips: ƒ reactiveSetter(newVal)
get trade: ƒ reactiveGetter()
set trade: ƒ reactiveSetter(newVal)
__proto__: Object
1:
aktion: (...)
dateObj: Moment {_isAMomentObject: true, _i: "2020-08-04", _f: "YYYY-MM-DD", _isUTC: false, _pf: {…}, …}
datum: "2020-08-04"

In ECMAScript, dates in the format "YYYY-MM-DD" are parsed as UTC. When creating a date using new Date(), it is based on the local date and also has a component for the current time so when comparing values like "30 days ago" you must normalise everything to the same datum. In this case, UTC will be the simplest.
Otherwise, you'll get errors if the code is run near the start or end of the local day due to timezone offset differences where the UTC date is behind or ahead of the local date. The time component also should be set to zero.
The following creates a date for n days ago, then filters the dataset and sorts it. Since the supplied data is a few months old, I've made daysAgo a parameter that is passed to the function. Also, the sort uses localCompare as it's more efficient than creating and comparing Date objects, and works well with ISO 8601 formatted dates.
let data = [{
id: "95",
datum: "2020-03-11",
trade: "EUR/USD BUY",
aktion: "closed",
pips: "10"
},
{
id: "94",
datum: "2020-06-09",
trade: "GBP/USD BUY",
aktion: "TP Hit",
pips: "65"
}, {
id: "93",
datum: "2020-06-08",
trade: "NZD/USD SELL",
aktion: "SL Hit",
pips: "-57"
}];
function getDaysAgoData(data, daysAgo) {
// Get current date
let t = new Date();
// Create UTC date for daysAgo
let d = new Date(Date.UTC(t.getFullYear(), t.getMonth(), t.getDate() - daysAgo));
// Filter and sort data
return data.filter(item => new Date(item.datum) >= d)
.sort((a, b) => a.datum.localeCompare(b.datum));
}
console.log(getDaysAgoData(data, 90));

This should get you going
const list = [{
id: "95",
datum: "2020-03-11",
trade: "EUR/USD BUY",
aktion: "closed",
pips: "10"
},
{
id: "94",
datum: "2020-06-09",
trade: "GBP/USD BUY",
aktion: "TP Hit",
pips: "65"
},
{
id: "93",
datum: "2020-08-01",
trade: "NZD/USD SELL",
aktion: "SL Hit",
pips: "-57"
},
]
const currentDate = new Date();
const currentDateTime = currentDate.getTime();
const last30DaysDate = new Date(currentDate.setDate(currentDate.getDate() - 30));
const last30DaysDateTime = last30DaysDate.getTime();
const last30DaysList = list.filter(x => {
const elementDateTime = new Date(x.datum).getTime();
if (elementDateTime <= currentDateTime && elementDateTime > last30DaysDateTime) {
return true;
}
return false
}).sort((a, b) => {
return new Date(b.datum) - new Date(a.datum);
});
console.log(last30DaysList)

Edit: Now the array is sorted (in first version I forgot this);
let arr = [{
id: "95",
datum: "2020-03-11",
trade: "EUR/USD BUY",
aktion: "closed",
pips: "10"
},
{
id: "94",
datum: "2020-07-20",
trade: "GBP/USD BUY",
aktion: "TP Hit",
pips: "65"
},
{
id: "93",
datum: "2020-06-18",
trade: "NZD/USD SELL",
aktion: "SL Hit",
pips: "-57"
},
{
id: "92",
datum: "2020-07-15",
trade: "GBP/USD BUY",
aktion: "TP Hit",
pips: "65"
},];
const today = new Date ();
result = arr.filter(obj => {
const date = new Date(obj.datum);
const diffTime = Math.abs(today - date);
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
return (diffDays <=30);
});
result.sort((a,b) => {
a = new Date(a.datum);
b= new Date(b.datum);
return (a<b) ? -1 : (a>b) ? 1 : 0;
})
console.log(result);

cannot change scope property

im trying to change an property value into the $scope variable of angular js, but the applied changes has not been setted.
my code is this:
in my code i have an costBudget with many childs into an array, and i need to reeplace these child for the costWorkPackages array.
let costBudget = $scope.list[0];
costBudget.subCostsWorkPackages = costsWorkPackages;
console.log(costBudget);
the costBudget variable is the same before and after to assign the new array, and its wrong. I expect the costBudget has the new childs, but does not happens.
UPDATED:
added console objects:
before the change:
{code: 1, internalId: 0, notRealWorkPackage: true, name: "shrh",
count: 1, …}
$$hashKey: "object:190"
code: 1
subCostsWorkPackages: Array(3)
0: Resource {id: 6491, name: "ascasca", count: 1,
subCostsWorkPackages: Array(0), resourceInstances: Array(0), …}
1: Resource {id: 6492, name: "ascasca", count: 1,
subCostsWorkPackages: Array(0), resourceInstances: Array(0), …}
2: Resource {id: 6493, name: "ascasca", count: 1,
subCostsWorkPackages: Array(0), resourceInstances: Array(0), …}
$promise: Promise {$$state: {…}}
$resolved: true
length: 3
__proto__: Array(0)
subNodeClass: ""
title: "shrh"
toggleButtonClass: "fa-minus-square-o"
__proto__: Object
after:
{code: 1, internalId: 0, notRealWorkPackage: true, name: "shrh",
count: 1, …}
$$hashKey: "object:190"
code: 1
subCostsWorkPackages: Array(3)
0: Resource {id: 6491, name: "ascasca", count: 1, subCostsWorkPackages: Array(0), resourceInstances: Array(0), …}
1: Resource {id: 6492, name: "ascasca", count: 1, subCostsWorkPackages: Array(0), resourceInstances: Array(0), …}
2: Resource {id: 6493, name: "ascasca", count: 1, subCostsWorkPackages: Array(0), resourceInstances: Array(0), …}
$promise: Promise {$$state: {…}}
$resolved: true
length: 3
__proto__: Array(0)
subNodeClass: ""
title: "shrh"
toggleButtonClass: "fa-minus-square-o"
__proto__: Object
UPDATE 2:
costsWorkPackage variable in console:
[Resource, Resource, Resource, Resource, $promise: Promise, $resolved:
true]
0: Resource {id: 6430, name: "Nombre 2", count: "1.00000000",
subCostsWorkPackages: Array(0), resourceInstances: Array(0), …}
1: Resource {id: 6437, name: "Nombre 9", count: "1.00000000",
subCostsWorkPackages: Array(0), resourceInstances: Array(0), …}
2: Resource {id: 6438, name: "Nombre 3", count: "1.00000000",
subCostsWorkPackages: Array(5), resourceInstances: Array(2), …}
3: Resource {id: 6431, name: "Nombre 3", count: "1.00000000",
subCostsWorkPackages: Array(5), resourceInstances: Array(2), …}
$promise: Promise {$$state: {…}}
$resolved: true
length: 4
__proto__: Array(0)

React mapping objects, targeting errors

I have some troubles mapping fetched objects, i know it's a known problem but it's been two days i'm stuck so i come asking for some help.
I'm trying to output data on an ul from an api but i either have errors or nothing gets output, i know that i am targeting my data inside my object the wrong way, it's the first time i'm trying to target an object with this kind of keys
I have an object 'names' looking like that:
[Array(20)]
0: Array(20)
0:
avatar: ""
country: "RU"
games: (3) [{…}, {…}, {…}]
nickname: "d2mash"
player_id: "07982364-a458-4a1f-b6d6-1be146db9126"
status: "AVAILABLE"
verified: true
__proto__: Object
1: {player_id: "cab2a609-de2f-4023-a9c7-af89d5292c96", nickname: "D0cC-", status: "BUSY", games: Array(1), country: "NL", …}
2: {player_id: "d67a944f-1c1d-4d75-a7bf-d52c4b30e7db", nickname: "r1d3Rz", status: "AVAILABLE", games: Array(1), country: "RO", …}
3: {player_id: "f40bef0d-d40a-48d0-8c53-5a513c35bd3a", nickname: "dotademon", status: "AVAILABLE", games: Array(1), country: "US", …}
4: {player_id: "dca784fa-546b-43b7-adf6-cf537d858d4f", nickname: "degeneral", status: "AVAILABLE", games: Array(2), country: "UA", …}
5: {player_id: "e72a43cd-d214-4d4c-989a-efb1d3e7df37", nickname: "daave-", status: "AVAILABLE", games: Array(1), country: "US", …}
6: {player_id: "4e093c2c-f277-4877-a200-029ae6d8602f", nickname: "ddk", status: "AVAILABLE", games: Array(5), country: "US", …}
7: {player_id: "ef629874-bf6e-4066-8612-09e0428e923c", nickname: "dieZzz", status: "AVAILABLE", games: Array(3), country: "RU", …}
8: {player_id: "77995857-d14d-47ed-a150-4f175f70654e", nickname: "durpdurp", status: "AVAILABLE", games: Array(1), country: "US", …}
9: {player_id: "e3ed56b6-138f-4141-b6c9-ba6eab7bfc24", nickname: "dengue", status: "AVAILABLE", games: Array(3), country: "PT", …}
10: {player_id: "d6bd0d6f-a068-4e10-b9a4-129297c8691f", nickname: "disco doplan", status: "BUSY", games: Array(2), country: "SE", …}
11: {player_id: "7e80ed2a-8e39-457e-95c2-1c9ba9449daf", nickname: "dupreeh", status: "BUSY", games: Array(1), country: "DK", …}
12: {player_id: "32772d2f-fb63-4a84-ac06-4c2e20f49082", nickname: "denis-", status: "AVAILABLE", games: Array(1), country: "DE", …}
13: {player_id: "089df523-86dd-4705-944f-f012adb5a0f8", nickname: "dream3r---", status: "AVAILABLE", games: Array(1), country: "BG", …}
14: {player_id: "b8b709e5-96f8-4cf5-8348-95b8b67e0b34", nickname: "DreadAV", status: "AVAILABLE", games: Array(1), country: "RU", …}
15: {player_id: "5fd703b0-6762-44c8-9284-b8f01ef70e71", nickname: "DendiGoD", status: "AVAILABLE", games: Array(1), country: "UA", …}
16: {player_id: "6c4f1a76-1341-4513-90ac-8d43dd1c86b6", nickname: "dipparn", status: "AVAILABLE", games: Array(1), country: "SE", …}
17: {player_id: "ae0bfe74-ec96-4499-910f-e02acd5be700", nickname: "DuBu-", status: "AVAILABLE", games: Array(1), country: "CA", …}
18: {player_id: "d6bc4849-5256-4463-a38e-bcd77fc31ff9", nickname: "device", status: "BUSY", games: Array(1), country: "DK", …}
19: {player_id: "4bb4503f-5272-40dc-8165-d050290db66a", nickname: "desi", status: "AVAILABLE", games: Array(1), country: "US", …}
length: 20
__proto__: Array(0)
length: 1
__proto__: Array(0)
Then i pass it to a component like that:
{
!isLoading &&
<PlayerSearchResult players={names} />
}
My component:
class PlayerSearchItem extends Component {
public render() {
return (
<li key={this.props.cle}>
<Link to={"#"}>nom - {this.props.pseudo}</Link>
</li>
);
}
}
class PlayerSearchResult extends Component {
public render() {
return (
<div>
<ul>
{Object.keys(this.props.players).map((player, i) => (
<PlayerSearchItem
cle={player[player].player_id}
pseudo={players[i]}
/>
))}
</ul>
</div>
);
}
}
don't mind the way I'm targeting my data, it's one of my many tries.

I think that your map looks wrong
This:
Object.keys(this.props.players).map((player, i) => ( <
PlayerSearchItem cle = {
player[player].player_id
}
pseudo = {
players[i]
}
/>
))
Should be:
Object.keys(this.props.players).map((player, i) => ( <
PlayerSearchItem cle = {
player.player_id
}
pseudo = {
player
}
key={player.player_id}
/>
))
Then from the screenshot of your data, it looks like you have as data an array of 20 items, which has as first element an array of 20 items, where the items from 1 to 20 are the real players.