DEV Community: giranezafiacre

Dealing with objects in javascript

giranezafiacre — Wed, 28 Apr 2021 16:47:54 +0000

in javascript, we deal with objects a lot for example in reactjs there is no way you can implement react application without knowing how to manipulate objects. Also, there can be a possibility where you can use objects in sorting data from the database. even some styling frameworks use objects
here I am going to show some ways of using and manipulating objects.
we are going to use the example below:
var Fiacre={
'firstname':'Fiacre',
'lastname':'Giraneza',
'sex':'Male',
'height': 1.75,
'weight':65,
'favoriteColor':'brown'
}

To create new field

you may need to add field in object
Fiacre.skills='IT';
//another way
Fiacre['skills']='IT';
console.log('object with added field in Fiacre object:',Fiacre)

to update field

Fiacre.weight=70;
console.log('updated object:',Fiacre)

to read all keys

console.log('object keys:',Object.keys(Fiacre))

to read all values

console.log('object values:',Object.values(Fiacre))

to read one field

console.log('firstname field:{',Object.keys(Fiacre)[0],':',Object.values(Fiacre)[0],'}')

to read one key

console.log('firstname key:{',Object.keys(Fiacre)[0],'}')

to read on value

*console.log('firstname value:{',Object.values(Fiacre)[0],'}')
console.log('forth way to read firstname:{',Fiacre[Object.keys(Fiacre)[0]],'}')

console.log('third way to read firstname value:{',Fiacre['firstname'],'}')
console.log('forth way to read firstname value:{',Fiacre.firstname,'}')*

to delete field

delete Fiacre.favoriteColor;
delete Fiacre['sex'];
console.log('object without favoriteColor and sex:',Fiacre)

delete all values in fields

Object.keys(Fiacre).forEach(function(key){
Fiacre[key]='';
})
console.log('empty values in object:',Fiacre)

to delete all field

Object.keys(Fiacre).forEach(function(key){
delete Fiacre[key]
})
//or
Fiacre={};
console.log('empty object:',Fiacre)

to sort objects in an array based on certain property

you may need to sort objects in array which has same value for certain property.for example:

let arrayOfObjects=[{
'id':21058,
'full name':'Fiacre Giraneza',
'gender':'male'
},
{
'id':20938,
'full name':'Pacifique Tuyizere',
'gender':'male'
},
{
'id':20430,
'full name':'Clemence Nyiramariza',
'gender':'female'
},
{
'id':20311,
'full name':'Celine Mugeni',
'gender':'female'
}
];

const groups = arrayOfObjects.reduce((s, item) => {
const group = s[item.gender] || [];
group.push(item);
s[item.gender] = group;
return s;
}, {});
//if you display groups it will come as an object which has arrays inside
console.log(groups)

thank you Happy coding!!

how I've demonstrated growth mindset recently.

giranezafiacre — Wed, 18 Mar 2020 03:42:20 +0000

In this post, I would like to show how I have demonstrated a growth mindset recently. We all know that a person who is normal has to grow big every day in all aspects, I mean physically and mentally. Recently I had a challenge in Andela where I had to do something in HTML, CSS, and JavaScript I was a beginner in all those languages but I managed to study them and try to do required tasks on them. I will continue to add on this post. the way you react to change also can define how your mindset is, for example, if we are in the current situation of having this disease disaster of COVID-19 and one maybe he likes to drink beer in the bar. And when he/she continue to put himself/herself in danger by continuing to go to drink beer in the bar it means that he/she can't react well to the change, it makes him/her having the low mindset, in fact for me I like to play soccer recently I stopped playing it because of COVID-19 because I thought that soccer even if I like it I can't die because I don't play it, so that's what growth mindset person should do.
Also, growth mindset is all about how you can learn different aspects quickly and apply it in something necessary as any other one who had already done it, for example, I am trying to do software development while in high school I had studied Mathematics, Physics, and Geography, so I react to change quickly and apply new aspects in software development successfully. also, the growth mindset is all about how you resolve conflicts with colleagues. Growth mindset person is one who knows that there may be conflict(s)because of that everyone wants to reach something, but also to understand each perspective of another so that one may not cross the border of another because I believe that the only way to show the other one to respect your boundary is to show him/her that he/she had crossed it but not by declaring war but the conversation for resolving that issue, I think that show growth mindset also. Another fact that shows that I have a growth mindset is that I don't consider myself like one who knows all, it gives me courage every day of trying to study new things and let other show me how to do things when it is necessary. Growth mindset I believe that it is a key for reaching lifetime achievements because when you don't have one you don't grow at all in all aspects I mean, such as mentally, financially and physically. Other things that prove that I have a growth mindset are that I always try new things so that I can have a good experience life gives and be better because of that.

How to build a User Interface from start to finish

giranezafiacre — Fri, 13 Mar 2020 07:40:31 +0000

the way of building an interface,firstly is to think about how many pages you will need,then you implement them after you start with landing page or home page,then you start to put some features needed for header and then section,lastly footer,and then do the same for all other pages and then you start to style them in CSS after you put some java script code to make you user interface behave nicely.
for me when I started user interface for home page I had putted logo and put some small picture in above url for that when user enter in my website know that he/she is in other website,then I style my header features so that it may be positioned rightly,after I have to continue with section it means part below header. I continued with footer where i have putted the address where user can find headquarter and style them.
other page that I had done is login page where I had putted header which seem to be similar like homepage and down I putted form where User can login using his/her username and password then I did the same for signup except that signup has bigger form as I wanted to have many information of user before using website as authenticated user then I had putted some java script so that when user sign up successfully may go to login page and when he/she login successfully may he/she go to user page or admin page when he/she is authenticated.
After all that I went to work on politician page and which had text area which politician express his/her interest to run for the post.
and on user page I had putted option photo which act as anchor tag which show options user can select, the same for admin page the difference is that options are different as their options privileges are different
lastly in all pages there is logo by which when you click it direct to homepage