Develop Reference

Vuejs2 - How to compare elements in two array with computed properties?

I'm working on a computed function for comparing two arrays... one keywords in data and another returned by computed keywords_list. When computed compare, he doesn't take in count values getting before by Axios in the first array ...
I don't know what to do ...
my code:
{
beforeCreate() {
this.$axios({
method: 'get',
url: '/api/rest/alerts/'
}).then(response => {
if ((response.data.keywords.length == 0) && (response.data.countries.length == 0)) {
this.alertEmpty = 'Aucune alerte de créée'
} else {
this.alert = response.data
this.keywords = response.data.keywords
this.countriesKeywords = response.data.countries
this.allSectorsSelected = response.data.all_sectors
}
})
},
data() {
return {
categories: "",
alert: '',
alertEmpty: '',
countriesKeywords: [],
countrySelected: '',
keywords: [],
update: false,
sectorSelected: "",
alerts: [],
keywordSelected: "",
errorKeyword: '',
successModification: '',
allSectorsSelected: null,
};
},
computed: {
keywords_list: function() {
for (var i = 0; i < this.sectors.length; i++) {
if (this.sectors[i].id == this.sectorSelected) {
return this.sectors[i].keywords;
}
}
},
allKeywordsInSector: function() {
if (this.keywords_list.every(item => this.keywords.indexOf(item) >= 0)) {
return true;
}
return false;
},
}
}
thanks for your help

very little information and it is unclear how the api result affects your computed values
The only thing i can say, properties in Vue doesn't reactive. So if sections isn't static, computed property sectorSelected will change only if sectorSelected changes
https://v2.vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

How can I set a userId inside the users object when an icon is clicked

I have a mock userId which should be saved inside the users object of the reactions object when a certain icon is clicked inside my react component.
Below is a function updateUploadReaction that is supposed to do that for me. The logic is this, when an icon is clicked and this particular userId does not exist in the users object, it sets it inside the user object and adds 1, on clicking again it sets it to false and subtracts 1. So far, this is what I have, but it simply keeps subtracting 3 each time I click. I need a guide on exactly how to do that.
Here's a link to the full App. updateUploadReaction is inside components/home/reducers.js
reaction object
{
reactions: {
dislike: {
count: 0,
users: {},
},
like: {
count: 0,
users: {},
},
maybe: {
count: 0,
users: {},
},
},
}
function
function updateUploadReaction(id, type, uploads) {
const updatedUploads = new Map([...uploads.entries()]);
const upload = updatedUploads.get(id);
const userId = uuid();
uploads.forEach(() => {
if (!userId {
upload.reactions[type].count += 1;
upload.reactions[type]..users[userId] = true;
} else {
upload.reactions[type].count -= 1;
upload.reactions[type].users[userId] = false;
}
});
updatedUploads.set(id, upload);
return updatedUploads;
}

I think you might be looking for something like this, I'm not sure if you want to add a new userId and remove it, or do something else. Perhaps it is an array of userIds? I think this might help you get on the right track though:
const upload1 = {
reactions: {
dislike: {
count: 0,
users: { userId: 1 },
},
},
}
const upload2 = {
reactions: {
dislike: {
count: 0,
users: {},
},
},
}
const uploads = [ upload1, upload2 ];
const updateObjectReaction = ( id, type, uploads ) => {
uploads.forEach( upload => {
const { users } = upload.reactions[ type ]
if ( Object.values( users ).includes( id ) ) {
delete users.userId
}
else {
users.userId = id;
}
} );
console.log( { upload1Users: uploads[ 0 ].reactions.dislike.users } )
console.log( { upload2Users: uploads[ 1 ].reactions.dislike.users } )
}
updateObjectReaction( 1, "dislike", uploads )

Matching a string to one of many patterns and extracting data

I have a problem I want to solve with RegEx, or any other method if there is a better one. I've tried several ways to achieve the goal, but nothing really worked.
I have an array with endpoints:
const endpoints = [
{
id: 1,
url: "/api/items/:itemId"
},
{
id: 2,
url: "/api/users/:userName/delete"
},
{
id: 3,
url: "/api/users/:userName/edit"
}
];
And a request URL:
const url = "/api/users/max/edit";
Now what I want is to have a function which acts like this:
const rewrite = (url, endpoints) => {
// What is the best way to achieve the following return value:
return {
endpointId: 3,
values: {
userName: "max"
}
};
};
Explanation: The function should find the appropriate endpoint for the url. All parts of the endpoint url which start with a colon are not static, but should rather be replaced with values from the request url. In this case :userName should be replaced with max.
I've been in web development for some time now, but to be honest I've almost no clue how to solve such a problem.

const rewrite = (url, endpoints) => {
var doubledArray = Array.prototype.map.call(endpoints, function(el) {
return {
id: el.id,
url: el.url.split('/')
};
});
var parts = url.split('/');
var i = 0;
parts.forEach(function(element) {
doubledArray = doubledArray.filter(el => (element == el.url[i] || el.url[i].startsWith(':')));
i++;
});
return {
endpointId: doubledArray[0].id,
values: {
[`${doubledArray[0].url.filter(el => el.startsWith(':'))[0].substring(1)}`]: parts[doubledArray[0].url.findIndex(function (el) { return el.startsWith(':'); } )],
}
};
};

You can go through the endpoints making each .url into a RegExp to test the url against.
When a matching one is found, it is just a matter of extracting the needed part and making up an Object with the property name:
<script>
const myEndpoints = [
{
id: 1,
url: "/api/items/:itemId"
},
{
id: 2,
url: "/api/users/:userName/delete"
},
{
id: 3,
url: "/api/users/:userName/edit"
}
];
const myUrl = "/api/users/nermal/edit";
const rewrite = (url, endpoints) => {
for (let i = 0; i < endpoints.length; i++) {
var rep = new RegExp(":(\\w+)", "m");
var propName = rep.exec(endpoints[i].url);
var reu = new RegExp(endpoints[i].url.replace(propName[0], "(.*)"));
var a = reu.exec(url);
if (a !== null) {
var x = new Object;
x["endpointId"] = endpoints[i].id;
var y = new Object;
y[propName[1]] = a[1];
x["values"] = y;
return x;
}
}
return null;
};
var q = rewrite(myUrl, myEndpoints);
console.log(q);
console.log(q.values);
</script>
Outputs:
Object { endpointId: 3, values: {…} }
Object { userName: "nermal" }

How to grab the previous and next id from an array

I'm trying to create next and previous buttons for my blog page. My blogs posts are stored within a table in my MySQL database. At the moment I'm getting the following result.
So I can get the current id and current title, but I'm not sure how to go about displaying the previous and next one on a page.
JavaScript code:
router.get('/posts/:permalinkSlug', async(req, res, next) => {
try {
var blogPostArray = []
var results = await _db.rawSql('SELECT id, permalink_slug FROM blog_posts')
blogPostArray.push(results)
const permalinkSlug = req.params.permalinkSlug
const post = await postTools.getPostByPermalinkSlug(permalinkSlug)
res.locals.current_id = post.id
console.log(res.locals.current_id)
console.log(permalinkSlug)
for (i = 0; i < blogPostArray.length; i++) {
console.log(blogPostArray[i])
}
if (post) {
res.render('post/post', {
post: post,
page: await _db.findOne('posts', {})
})
} else next()
} catch (err) {
next(err)
}
})
New code:
var results = await _db.rawSql('SELECT id FROM blog_posts')
console.log(results)
Result:
[
RowDataPacket { id: 12 },
RowDataPacket { id: 13 },
RowDataPacket { id: 14 },
RowDataPacket { id: 15 }
]

If res.locals.current_id is giving a value then following will do the trick.
Replace this code like this:
blogPostArray.push(JSON.parse(JSON.stringify(results)));
This is a bug as methioned here.
var blogPostArray = [{
id: 12,
permalink_slug: 'title1'
},
{
id: 13,
permalink_slug: 'title2'
},
{
id: 14,
permalink_slug: 'title3'
},
{
id: 15,
permalink_slug: 'title4'
}
];
var res = {
locals: {
current_id: 14
}
};
var index = blogPostArray.findIndex(x => Number(x.id) == Number(res.locals.current_id));
var next = getNext(index);
var prev = getPrev(index);
console.log(prev, next);
function getNext(sr) {
sr = Number(sr);
if (sr + 1 == blogPostArray.length) {
return {}
}
return blogPostArray[sr + 1];//if not working try using blogPostArray[0][sr + 1] or blogPostArray[1][sr + 1]
}
function getPrev(sr) {
sr = Number(sr);
if (sr - 1 == -1) {
return {}
}
return blogPostArray[sr - 1];//if not working try using blogPostArray[0][sr - 1] or blogPostArray[1][sr - 1]
}
inside the loop you can use the code as follows:
for (i = 0; i < blogPostArray.length; i++) {
console.log(getNext(i))
console.log(getPrev(i))
}

The proper ways to stack optioned promises

What would be the proper or the best way to collect all data from DB with promises, but with using native Node promises.
The goal is only to present what is selected:
const allPromises = [];
const selected = {
sectionA: true,
sectionB: false,
sectionCIds: [ 1, 2, 4 ],
};
if (selected.sectionA) {
allPromises.push(getSectionADataFromDbPromise());
}
if (selected.sectionB) {
allPromises.push(getSectionBDataFromDbPromise());
}
if (selected.sectionCIds.length > 0) {
allPromises.push(selected.sectionCIds
.map(getSectionCDataFromDbPromise)
);
}
Promise.all(allPromises)
.then((allResults) => {
if (selected.sectionA) {
dataA = allResults[0];
}
if (selected.sectionA) {
dataB = allResults[1];
}
if (selected.sectionC) {
dataC = allResults[2]; // <-- this will not work if B is not selected
}
// ... same logic to build report: return Promise.all()...
});
Possible solutions:
Track index for each data selected (eg. index of C will be 1)
Object Map
Add else { allPromises.push(Promise.resolve(null)) } to every if
Is there maybe an easier or one of this will be the proper way?

Don't use push on the arrays conditionally, but always put the same value at the same index. Even if the value is nothing - Promise.all will handle that just fine.
const selected = {
sectionA: true,
sectionB: false,
sectionCIds: [ 1, 2, 4 ],
};
Promise.all([
selected.sectionA ? getSectionADataFromDbPromise() : null,
selected.sectionB ? getSectionBDataFromDbPromise() : null,
Promise.all(selected.sectionCIds.map(getSectionCDataFromDbPromise))
]).then(([dataA, dataB, dataC]) => {
if (selected.sectionA) {
// use dataA
}
if (selected.sectionA) {
// use dataB
}
if (dataC.length) { // same as selected.selectionCIds.length
// use dataC
}
});

What do you think about this ? It's bigger, it's heavier, it's more difficult, but it's all automatized and fully evolutive. Wanna handle a new parameter ? A parameter have data now ? Change the map only.
I create a map that would contains everything we need to use a loop. The state of the data (activated or not), the function to call to get the data and so on.
const mapSelected = {
sectionA: {
state: true,
func: getSectionADataFromDbPromise,
},
sectionB: {
state: false,
func: getSectionBDataFromDbPromise,
},
sectionC: {
state: true,
func: getSectionCDataFromDbPromise,
data: [
1,
2,
4,
],
},
};
Then we create the promise array using the map we has created. Handling the case with data and without data.
const promises = Object.values(mapSelected).reduce((tmp, {
state,
func,
data,
}) => {
if (!state) return tmp;
if (data && data.length) {
return [
...tmp,
...data.map(x => func.call(this, x)),
];
}
return [
...tmp,
func.call(this),
];
});
Then we create arrays from the promise return for each key on the map. You can change how I present the data, I didn't knew what you really wanted there.
Promise.all(promises)
.then((allResults) => {
let i = 0;
const [
dataA,
dataB,
dataC,
] = Object.values(mapSelected).reduce((tmp, {
state,
data,
}, xi) => {
if (!state) return tmp;
if (data && data.length) {
data.forEach(x => (tmp[xi].push(allPromises[i++])));
return tmp;
}
tmp[xi].push(allPromises[i++]);
return tmp;
}, Object.values(mapSelected).map(() => []));
});
#EDIT
I just did a snippet about the code I've made, run it
function a() {
return 1;
}
const mapSelected = {
sectionA: {
state: true,
func: a,
},
sectionB: {
state: false,
func: a,
},
sectionC: {
state: true,
func: a,
data: [
1,
2,
4,
],
},
};
const allPromises = [
0,
1,
2,
3,
4,
];
let i = 0;
const [
dataA,
dataB,
dataC,
] = Object.values(mapSelected).reduce((tmp, {
state,
data,
}, xi) => {
if (!state) return tmp;
if (data && data.length) {
data.forEach(x => (tmp[xi].push(allPromises[i++])));
return tmp;
}
tmp[xi].push(allPromises[i++]);
return tmp;
}, Object.values(mapSelected).map(() => []));
console.log(dataA);
console.log(dataB);
console.log(dataC);

Unfortunately, unlike libraries such as Q, the standard Promise does not expose a variant of all taking an object of promises.
However, we can use the new ES2015 and ES2017 Object utility methods to assist us in keeping the code readable.
const allPromises = {};
const selected = {
sectionA: true,
sectionB: false,
sectionCIds: [1, 2, 4],
};
if (selected.sectionA) {
allPromises.sectionA = getSectionADataFromDbPromise();
}
if (selected.sectionB) {
allPromises.sectionB = getSectionBDataFromDbPromise();
}
if (selected.sectionBIds.length > 0) {
allPromises.sectionC = Promise.all(selected.sectionBIds
.map(getSectionCDataFromDbPromise)
);
}
Now we can write
Promise.all(Object.entries(allPromises).map(([key, promise]) =>
promise.then(value => ({[key]: value}))
))
.then(allResults => {
const results = Object.assign({}, ...allResults);
const data = {
a: results.sectionA,
b: results.sectionB,
c: results.sectionB && results.sectionC
};
// ... same logic to build report: return Promise.all()...
});