Develop Reference

Taking contents of an array of objects, and assigning them to a property on a JSON object

I want to take items from this array (the way I save things on the client)
[
{
"id": "-Mdawqllf_-BaW63gMMM",
"text": "Finish the backend[1]",
"status": true,
"time": 1625248047800
},
{
"id": "-Mdawqllf_-BaW63gGHf",
"text": "Finish the middle-end[2]",
"status": false,
"time": 1625248040000
},
{
"id": "-Mdawqllf_-BaW63gGHd",
"text": "Finish the front-end[3]",
"status": false,
"time": 1625248040000
}
]
And turn them into this format for how I save it server side
{ "todos": {
"-Mdawqllf_-BaW63gMMM": {
"text": "Finish the backend[1]",
"status": true,
"time": 1625248047800,
},
"-Mdawqllf_-BaW63gGHf": {
"text": "Finish the middle-end[2]",
"status": false,
"time": 1625248040000,
},
"-Mdawqllf_-BaW63gGHd": {
"text": "Finish the front-end[3]",
"status": false,
"time": 1625248040000,
}
},
}
Basically i turn items into an array on the client to help with sorting and making use of arrays. But before sending it back need to put into the right format

Use .map() to loop over the array of objects to exctract the id property, so you can use it as the key of the new object.
Use Object.fromEntries() to create the new object from the array returned by .map().
const data = [
{
"id": "-Mdawqllf_-BaW63gMMM",
"text": "Finish the backend[1]",
"status": true,
"time": 1625248047800
},
{
"id": "-Mdawqllf_-BaW63gGHf",
"text": "Finish the middle-end[2]",
"status": false,
"time": 1625248040000
},
{
"id": "-Mdawqllf_-BaW63gGHd",
"text": "Finish the front-end[3]",
"status": false,
"time": 1625248040000
}
];
const todos = {
Todos: Object.fromEntries(data.map(obj => [obj.id, obj]))
};
console.log(todos);

#Barmar's solutions is nice.
For the sake of learning or others googling. You can also reduce the array to an object.
const todos = data.reduce((obj, item) => {
obj[item.id] = item
return obj
}, {})

const items = {
todos: {
...data
}
};
Assume that data is the array of objects.
Use the spread operator to copy all the array objects from data array to the todos object at key todos.
One important thing to note that you can't assign more than one objects without array to a single object key. You definately have to use the array to maintain all the objects under the one key.
Avoid using the hardcode index. Always use the spread operator

Typescript Filter and return single key

I have a set of checkboxes that allow a user to check which roles to assign to a new user. I am able to filter back and get only the checkboxes that are actually checked, however, I am having trouble finding the best way to just return the "name" key of those checked checkboxes.
userToAdd.roles = this.roles.filter( (role) => role.checked );
Is there a way to use a reduce, or basically just say "role.name" in the filter so I don't return the entire object? I can do this with a for loop, but I'm curious if there is a better way to just return the name key as part of the filter?
This is how the object looks now, which is wrong:
{
"firstName": "sfsdfds",
"username": "fdsfsdf",
"lastName": "sdfsdfsdf",
"email": "dsfsdfdsf",
"roles": [
{
"ID": "ce97fb46-7e04-4a4f-b393-5a5492b558fb",
"name": "admin",
"checked": true
},
{
"ID": "e89bacd2-4140-46a1-9a2b-0f85aa9f9ca0",
"name": "offline_access",
"checked": true
}
],
"password": "pass"
}
This is how the object should look, in the roles array i just include the name, not the ID or checked keys:
{
"firstName": "testing",
"lastName": "testing",
"username": "testing",
"email": "testing",
"roles": [
"uma_authorization",
"offline_access"
],
"password": "pass"
}

you could map after filtering. i.e:
userToAdd.roles = this.roles.filter( (role) => role.checked ).map(role => role.name;

You can achieve this using array map() method and object destructuring like:
userToAdd.roles = this.roles.filter(({checked}) => checked).map(({name}) => name);
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

Yes you can use reduce.
const data = {
"firstName": "sfsdfds",
"username": "fdsfsdf",
"lastName": "sdfsdfsdf",
"email": "dsfsdfdsf",
"roles": [
{
"ID": "ce97fb46-7e04-4a4f-b393-5a5492b558fb",
"name": "admin",
"checked": true
},
{
"ID": "e89bacd2-4140-46a1-9a2b-0f85aa9f9ca0",
"name": "offline_access",
"checked": true
},
{
"ID": "e89bacd2-4140-46a1-9a2b-0f85aa9f9ca0",
"name": "offline_access2",
"checked": false
}
],
"password": "pass"
}
let filtered = data.roles.reduce((acc, curr)=>{
if(curr.checked) {
acc.push({
name: curr.name
})
}
return acc;
}, []);
console.log(filtered);
.filter().map() would also works but with reduce you don't have to iterate over array twice.

If you have linq, this is another option:
userToAdd.roles = from(this.roles).where(role => role.checked ).select(role =>role.name).toArray();

You can also use this:
this.roles.filter( (role) => role.checked )[0].anyPropert;

How to get specific data from object array?

I'm a beginner and would like to know how I can get a specific object from an array
I have an Array that looks like this:
data {
"orderid": 5,
"orderdate": "testurl.com",
"username": "chris",
"email": "",
"userinfo": [
{
"status": "processing",
"duedate": "" ,
}
]
},
To get the data from above I would do something like this:
return this.data.orderid
But how can I go deeper and get the status in userinfo?
return this.data.orderid.userinfo.status
doesn't work... anyone have any ideas?

A few points:
data is not an array, is an Object (see the curly braces, arrays have squared brackets). To be really precise, your syntax is invalid, but I assume you wanted to type data = { ... }, as opposed to data { ... }
Your syntax is almost correct, the only mistake you are making is that userinfo is an array, and arrays have numeric indexes (I.e. array[0], array[1]). What you are looking for is this.data.orderid.userinfo[0].status

Use data.userinfo[0].status to get the value (in your case this.data.userinfo[0].status)
var data = {
"orderid": 5,
"orderdate": "testurl.com",
"username": "chris",
"email": "",
"userinfo": [
{
"status": "processing",
"duedate": "" ,
}
]
};
console.log(data.userinfo[0].status);

User Info is an array, so you would need to access it using indexer like so:
return this.data.userinfo[0].status
MDN on arrays: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

You need to iterate over data.userinfo (it's an array)
var data = {
"orderid": 5,
"orderdate": "testurl.com",
"username": "chris",
"email": "",
"userinfo": [
{
"status": "processing",
"duedate": "" ,
}
]
};
data.userinfo.forEach(function(element) {
console.log(element.status);
});

tried to access value in object using the incorrect way

Edit
I tried to access value in object using the incorrect way, I have edited this question to stop others from making the same mistake.
Simply store that object into a variable (something like var obj = {...} and type obj.skills to get the skills array back. If you wanted to get test from the cal_strs array, you can do obj.cal_strs[0].test
<pre>
var obj =
{
"skills": [],
"languages": [],
"cal_strs": [{
"test": null,
"primary_test": null
}],
"id": 123,
"my_id": 1346,
"username": "blahblah",
"full_name": "mr blah",
"email": "blah#blah.com",
"location": "boston",
"manager": "boss",
"status": 1,
"abc_status": "here",
"s_s": "2010-06-08T23:00:00Z",
"s_e": "2010-06-13T07:00:00Z",
"n_c": "2010-07-08T07:00:00Z",
"last_here": null
}
console.log(obj.location);
console.log(obj.status);
<pre>

what you have here is a object literal, witch can be manipulated without the use of jquery, to read this object you use the dot notation to get the object value based on the key
obj.key = value
var obj =
{
"skills": [],
"languages": [],
"cal_strs": [{
"test": null,
"primary_test": null
}],
"id": 123,
"my_id": 1346,
"username": "blahblah",
"full_name": "mr blah",
"email": "blah#blah.com",
"location": "boston",
"manager": "boss",
"status": 1,
"abc_status": "here",
"s_s": "2010-06-08T23:00:00Z",
"s_e": "2010-06-13T07:00:00Z",
"n_c": "2010-07-08T07:00:00Z",
"last_here": null
}
console.log(obj.location);
console.log(obj.status);
var abc_status = obj.abc_status;//save the value to a variable

You're trying to access your json object as if it's an array. It's not. You can access your objects already since it's already a proper javascript object (it's not json). Simply store that object into a variable (something like var obj = {...} and type obj.skills to get the skills array back. If you wanted to get test from the cal_strs array, you can do obj.cal_strs[0].test.

Use underscore(_.pluck) get the specific values from the object.
Or try to define a new variable and reassign it .
var s = {
"skills": [],
"languages": [],
"cal_strs": [{
"test": null,
"primary_test": null
}],
"id": 123,
"my_id": 1346,
"username": "blahblah",
"full_name": "mr blah",
"email": "blah#blah.com",
"location": "boston",
"manager": "boss",
"status": 1,
"abc_status": "here",
"s_s": "2010-06-08T23:00:00Z",
"s_e": "2010-06-13T07:00:00Z",
"n_c": "2010-07-08T07:00:00Z",
"last_here": null,
}
var t = {};
t['location'] = s.location;
t['status'] = s.status;
t['abc_status'] = s.abc_status;
t['s_s'] = s.s_s;
t['s_e'] = s.s_e;
t['n_c'] = s.n_c;
in case multiple arrays use underscore.

compare 2 array of objects. match by ids, push object property into array

I have 2 arrays. users and posts. posts contain a property "post_by" which is the id of one of the users. I need to match the user and push the first & last name into the post object as a new property. Goal is I need to display the name of the user that made the post in a table.
note* I can use javascript, jquery, linq.js or lodash.
fiddle with json
fiddle
var users = [
{
"id": "15e640c1-a481-4997-96a7-be2d7b3fcabb",
"first_name": "Kul",
"last_name": "Srivastva",
},
{
"id": "4cada7f0-b961-422d-8cfe-4e96c1fc11dd",
"first_name": "Rudy",
"last_name": "Sanchez",
},
{
"id": "636f9c2a-9e19-44e2-be88-9dc71d705322",
"first_name": "Todd",
"last_name": "Brothers"
},
{
"id": "79823c6d-de52-4464-aa7e-a15949fb25fb",
"first_name": "Mike",
"last_name": "Piehota"
},
{
"id": "e2ecd88e-c616-499c-8087-f7315c9bf470",
"first_name": "Nick",
"last_name": "Broadhurst"
}
]
var posts = [
{
"id": 1,
"status": "Active",
"post_title": "test title",
"post_body": "test body",
"post_by": "4cada7f0-b961-422d-8cfe-4e96c1fc11dd"
},
{
"id": 2,
"status": "Fixed",
"post_title": "test title two",
"post_body": "test body two",
"post_by": "79823c6d-de52-4464-aa7e-a15949fb25fb"
}
]

https://jsfiddle.net/zy5oe25n/7/
console.log($.map(posts, function(post){
var user = $.grep(users, function(user){
return user.id === post.post_by;
})[0];
post.first_name = user.first_name;
post.last_name = user.last_name;
return post;
}));

Here's a lodash approach:
_.map(posts, function(item) {
return _.assign(
_.pick(_.find(users, { id: item.post_by }),
'first_name', 'last_name'),
item
);
});
It's using map() to map the posts array to a new array of new objects (immutable data). It's then using find() to locate the user object, and uses pick() to get the properties we need. Finally, assign() adds the post properties to the new object that pick() created.

For good measure, using linq.js.
var userMap = Enumerable.From(users).ToObject("$.id");
posts.forEach(function (post) {
var user = userMap[post.post_by];
if (user) {
post.first_name = user.first_name;
post.last_name = user.last_name;
}
});
Note, we're using the builtin forEach() for arrays, linq.js is not needed for that part.