We Keep Coding

Find by key and replace the value in an object

I'm a bit new with javascript. Is there a way to find all icon and get their value and then replace their values with a new one?
I need to replace all of fa/FaCopy with fcb/FcbCopy in the json payload below. Any libraries or functions you can share?
[
{
"section": "feature-list",
"data": {
"title": "Title here",
"body": "body here",
"features": [
{
"title": "Title here 1",
"image": "body here",
"icon": "fa/FaCopy"
},
{
"title": "Title here 2",
"image": "body here",
"icon": "fa/FaCopy"
},
{
"title": "Title here 3",
"image": "body here",
"icon": "fa/FaCopy"
}
]
}
},
{
"section": "title-list",
"data": {
"title": "Title here",
"titles": {
"list": [
{
"title": "Title here 1",
"icon": "fa/FaCopy"
},
{
"title": "Title here 2",
"icon": "fa/FaCopy"
},
{
"title": "Title here 3",
"icon": "fa/FaCopy"
}
]
}
}
}
]

This will be very customized solution and deeply depended on your data.
If your data type will not change and remain same then you could use/modify something like this.
// DATA = Your array
const result = DATA.map((list) => ({
...list,
data: {
...list.data,
features: list.data.features?.map((feature) => ({
...feature,
icon: feature.icon === 'fa/FaCopy' ? 'fcb/FcbCopy' : feature.icon
})),
},
}));
console.log(result); // your expected result

Vue.js – How to build a table like Doodle with Vuetify?

I’m developing an app with Vue.js that’s using Vuetify for some nice material design components. My data is stored in Firebase Cloud Firestore. I want to create a Vuetify table that is optimized for the following usage.
Functionality
The table is used to check availability for multiple event dates. Users are listed on the left side and are grouped by their position in the company (e.g. consultant, manager etc.). These groups should be visible but can be hidden by tapping on the arrow. It should also be possible to hide position groups completely. The event availability status is shown in three colors (green, red or blue). Later I want to add buttons or icons to the cells for more features. If the user taps on their cell a dialog should open to change the availability. If you tap on the event in the header a dialog should open that shows more event details.
The table should look like this mockup:
The table is scrollable up/down to see all users, left/right to check future events. However the event header and the user bar on the right should be fixed.
Data in Firebase Cloud Firestore:
events
—> [event_id] // every event has an unique id
title: String
startdate: Date
enddate: Date
—> [availability] // every [event] contains the availability of users
—> [user_id]
status: String // attendance, no attendance, not sure
comment: String // details that users adds to their response
What's the best way to start developing the table?
Here is some dummy data in JSON format to get a feeling of what to work with:
{
"events": {
"event1": {
"id": "event1",
"title": "Lunch with Santa Claus",
"startdate": "03/11/2020 13:00",
"enddate": "03/11/2020 14:00",
"availability": {
"user100": {
"userID": "user100",
"status": "not sure"
},
"user103": {
"userID": "user103",
"status": "attendance",
"comment": "Looking forward to lunch with Santa"
},
"user108": {
"userID": "user108",
"status": "attendance"
}
}
},
"event2": {
"id": "event2",
"title": "Meeting with Robin Hood",
"startdate": "08/11/2020 10:00",
"enddate": "08/11/2020 12:00",
"availability": {
"user100": {
"userID": "user100",
"status": "attendance",
"comment": "Will be late"
},
"user101": {
"userID": "user101",
"status": "no attendance"
},
"user102": {
"userID": "user102",
"status": "not sure"
},
"user103": {
"userID": "user103",
"status": "attendance",
"comment": "Robin Hood is great!"
},
"user108": {
"userID": "user108",
"status": "attendance"
}
}
},
"event3": {
"id": "event3",
"title": "Team Meeting",
"startdate": "10/11/2020 09:00",
"enddate": "10/11/2020 10:00",
"availability": {
"user108": {
"userID": "user108",
"status": "no attendance"
},
"user105": {
"userID": "user105",
"status": "not sure"
},
"user102": {
"userID": "user102",
"status": "not sure"
},
"user103": {
"userID": "user103",
"status": "attendance",
"comment": "Looking forward to lunch with Santa"
},
"user109": {
"userID": "user109",
"status": "attendance"
}
}
}
},
"users": {
"user100": {
"id": "user100",
"name": "John Doe",
"position": "Manager"
},
"user101": {
"id": "user101",
"name": "Anna Black",
"position": "Consultant"
},
"user102": {
"id": "user102",
"name": "Tom Green",
"position": "Associate"
},
"user103": {
"id": "user103",
"name": "Matt White",
"position": "Senior Consultant"
},
"user104": {
"id": "user104",
"name": "Peter Blue",
"position": "Manager"
},
"user105": {
"id": "user105",
"name": "Ted Yellow",
"position": "Associate"
},
"user106": {
"id": "user106",
"name": "Lewis Elefant",
"position": "Associate"
},
"user107": {
"id": "user107",
"name": "Matt Shark",
"position": "Senior Consultant"
},
"user108": {
"id": "user108",
"name": "Donald Duck",
"position": "Associate"
},
"user109": {
"id": "user109",
"name": "Lisa Bird",
"position": "Manager"
},
"user110": {
"id": "user110",
"name": "Bailey Wolf",
"position": "Manager"
}
}
}
Any help is very much appreciated, thanks!

JSON to HTML page for name and image as output

Can somebody help me to get the Name with his associated image from the following json.
Code should be in HTML or JS, as I am a backend developer and not able to figure out this.
The JSON:
{
"boardMembers": [
{
"id": "18706279",
"name": "Monique R Herena",
"thumbnail": null,
"title": "Chief Colleague Experience Officer",
"slug": "18706279-monique-r-herena",
"webVisibility": true
},
{
"id": "19676689",
"name": "Elizabeth Rutledge",
"thumbnail": {
"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iABmk_sWUnY4/v3/80x80.png",
"alt": null
},
"title": "Chief Marketing Officer",
"slug": "19676689-elizabeth-rutledge",
"webVisibility": true
},
{
"id": "18784925",
"name": "Tangela Richter",
"thumbnail": {
"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iKYkW0FlMRW4/v3/80x80.png",
"alt": null
},
"title": "Chief Governance Ofcr/Secy",
"slug": "18784925-tangela-richter",
"webVisibility": true
},
{
"id": "15024090",
"name": "Laureen E Seeger",
"thumbnail": {
"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iiw0z.pdTRbE/v1/80x80.jpg",
"alt": "LAUREEN E SEEGER"
},
"title": "Chief Legal Officer",
"slug": "15024090-laureen-e-seeger",
"webVisibility": true
},
{
"id": "21336581",
"name": "Jennifer Skyler",
"thumbnail": null,
"title": "Chief Corporate Affairs Officer",
"slug": "21336581-jennifer-skyler",
"webVisibility": true
},
{
"id": "19676686",
"name": "Raymond Joabar",
"thumbnail": null,
"title": "Pres:Global Risk/CRO",
"slug": "19676686-raymond-joabar",
"webVisibility": true
},
{
"id": "15365626",
"name": "Douglas E Buckminster",
"thumbnail": null,
"title": "Group Pres:Global Consumer",
"slug": "15365626-douglas-e-buckminster",
"webVisibility": true
},
{
"id": "16654781",
"name": "Anna Marrs",
"thumbnail": {
"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iNFzMiuYiRGY/v3/80x80.png",
"alt": null
},
"title": "Pres:Global Commercial Svcs",
"slug": "16654781-anna-marrs",
"webVisibility": true
},
{
"id": "16804630",
"name": "Denise Pickett",
"thumbnail": {
"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iReOY_ZB0dOI/v2/80x80.png",
"alt": null
},
"title": "Pres:Global Services Group",
"slug": "16804630-denise-pickett",
"webVisibility": true
},
{
"id": "6832356",
"name": "Anre D Williams",
"thumbnail": {
"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iJ5kSc7LL.3Y/v2/80x80.png",
"alt": null
},
"title": "Pres:Global Merchant & Network Svcs",
"slug": "6832356-anre-d-williams",
"webVisibility": true
},
{
"id": "3221610",
"name": "Jeffrey C Campbell \"Jeff\"",
"thumbnail": {
"url": " ",
"alt": "35000014"
},
"title": "Exec VP/CFO",
"slug": "3221610-jeffrey-c-campbell",
"webVisibility": true
},
{
"id": "16733751",
"name": "Marc D Gordon",
"thumbnail": {
"url": " ",
"alt": null
},
"title": "Exec VP/CIO",
"slug": "16733751-marc-d-gordon",
"webVisibility": true
},
{
"id": "21531045",
"name": "Jessica Lieberman Quinn",
"thumbnail": null,
"title": "Exec VP/Controller",
"slug": "21531045-jessica-lieberman-quinn",
"webVisibility": true
},
{
"id": "19863566",
"name": "Alan P Gallo",
"thumbnail": {
"url": " ",
"alt": null
},
"title": "Exec VP:Internal Audit/Chief Audit Exec",
"slug": "19863566-alan-p-gallo",
"webVisibility": true
},
{
"id": "16310906",
"name": "Vivian Zhou",
"thumbnail": null,
"title": "Senior VP/Head:Investor Relations",
"slug": "16310906-vivian-zhou",
"webVisibility": false
}
],
"totalExecutives": 17
}

Welcome to the front-end world! First, HTML IS NOT a programming language, it is a Markup Language. You need to use JavaScript to do that, not HTML.
You need to parse the string into an object and iterate each "member" on the object list to get this Name and Photo. I wrote a JavaScript version and a PHP version for comparison.
If you're using JavaScript:
Parse the string into JavaScript object ("JSON.parse" function)
Iterate items in "boardMembers" list
Get those values
CODE:
//Your string
let stringToParse = '<your string here>'
//Converting your string to object
let convertedToObject = JSON.parse(stringToParse);
//Getting the boardMembers list from your parsed object
let listBoardMembers = convertedToObject.boardMembers;
//Creating Elements on HTML (creating a Paragraph with the received data and a container for the list of members). *Notice: I've created a "DIV" (container) with a unique ID ("listMembers"). This is important because when I start to iterate the members I will add them inside the container, and for that, I need to reference it using an ID.*
document.body.innerHTML = `<p> Received String: ${stringToParse}</p>`;
document.body.innerHTML += `<div id="listMembers"></div>`;
//Iterating the list of boardMembers using this length;
for (let i = 0; i < listBoardMembers.length; i++) {
let member = listOfMembers[i];
let memberName = member.name;
let memberImageURL = '';
// Verify if the user has thumbnail
if (member.thumbnail !== null){
memberImageURL = member.thumbnail.url;
}
//Adding this member to the member's container, using the container ID, that we created previously.
document.getElementById('listMembers').innerHTML += `
<div style="display: flex;">
<img src="${memberImageURL}">
<h1>${memberName}</h1>
</div>
`;
}
Best regards,

Checking a value in a nested JSON using Postman

I have a nested JSON returned from an API that I am hitting using a GET request, in POSTMAN chrome app. My JSON looks like this
"result": [
{
"_id": "some_id",
"name": "India",
"code": "IN",
"link": "http://www.india.info/",
"closingTime": "2017-02-25T01:12:17.860Z",
"openingTime": "2017-02-25T06:12:17.205Z",
"image": "image_link",
"status": "online",
"serverStatus": "online",
"games": [
{
"_id": "some_game_id1",
"name": "Cricket"
},
{
"_id": "some_another_id1",
"name": "Baseball"
},
{
"_id": "some_another_id_2",
"name": "Basketball"
}
]
},
{
"_id": "some_id",
"name": "Australia",
"code": "AUS",
"link": "https://www.lonelyplanet.com/aus/adelaide",
"closingTime": "2017-02-28T05:13:38.022Z",
"openingTime": "2017-02-28T05:13:38.682Z",
"image": "some_image_url",
"status": "offline",
"serverStatus": "online",
"games": [
{
"_id": "some_game_id_2",
"name": "Cricket"
},
{
"_id": "some_another_id_3",
"name": "Kho-Kho"
},
{
"_id": "some_another_id_4",
"name": "Badminton"
},
{
"_id": "some_another_id_5",
"name": "Tennis"
}
]
},
I am trying to test whether my response body has "name":"India" and the "game" with "some_game_id1" contains the "name":"cricket".
I went through this link where the answer is to have an array for "name"created and then check within the array whether the array contains the value. I tried this but my code fails.
Also, I tried searching the element by the index within the JSON body using this -
var searchJSON = JSON.parse(responseBody);
tests["name contains India"] = searchJSON.result.name[0]==="India";
But this also fails. I tried using the .value appended with the second line of above code, but it also fails. How can I check this thing?

You need to put [0] after result (which is an array) rather than name (which is a string).
Also, use a regular expression to check whether the name contains 'India', because using === only checks if the name is exactly India.
var searchJSON = JSON.parse(responseBody)
tests["name contains India"] = /India/.test(searchJSON.result[0].name)
Demo Snippet:
var responseBody = `{
"result": [{
"_id": "some_id",
"name": "India",
"code": "IN",
"link": "http://www.india.info/",
"closingTime": "2017-02-25T01:12:17.860Z",
"openingTime": "2017-02-25T06:12:17.205Z",
"image": "image_link",
"status": "online",
"serverStatus": "online",
"games": [{
"_id": "some_game_id1",
"name": "Cricket"
},
{
"_id": "some_another_id1",
"name": "Baseball"
},
{
"_id": "some_another_id_2",
"name": "Basketball"
}
]
},
{
"_id": "some_id",
"name": "Australia",
"code": "AUS",
"link": "https://www.lonelyplanet.com/aus/adelaide",
"closingTime": "2017-02-28T05:13:38.022Z",
"openingTime": "2017-02-28T05:13:38.682Z",
"image": "some_image_url",
"status": "offline",
"serverStatus": "online",
"games": [{
"_id": "some_game_id_2",
"name": "Cricket"
},
{
"_id": "some_another_id_3",
"name": "Kho-Kho"
},
{
"_id": "some_another_id_4",
"name": "Badminton"
},
{
"_id": "some_another_id_5",
"name": "Tennis"
}
]
}
]
}`
var tests = {}
var searchJSON = JSON.parse(responseBody)
tests["name contains India"] = /India/.test(searchJSON.result[0].name)
console.log(tests) //=> { "name contains India": true }

Constructing multidimensional array out of other arrays

I’m using an external service to pull the events of an organisation (GetEvents). Example of what is returned:
{
"Result":"success",
"Key":"12345",
"Data":[
{"ID":"GFDCV34","lastChangedDate":"2015-12-03 11:14:27"},
{"ID":"IDJHE23","lastChangedDate":"2015-12-03 15:17:47"},
{"ID":"KDJBD34","lastChangedDate":"2015-12-03 05:25:11"}
]
}
Next, I can pull details of a certain event (GetEventDetails). The ID of the event is required as data parameter. I made a function getdetails(id); that returns the details.
For example, for getdetails('KDJBD34'), it gives me:
{
"Result":"success",
"Key":"52523",
"Data":[
{
"ID": "KDJBD34",
"name": "Name of event 3",
"date": "date of event 3",
"location": "location of event 3",
"lastChangedDate":"2015-12-03 05:25:11"
}
]
}
I want to construct an array containing all the events and their details, like this:
{
"Result": "success",
"Key": "12345",
"Data":[
{
"ID": "GFDCV34",
"name": "Name of event 1",
"date": "date of event 1",
"location": "location of event 1",
"lastChangedDate": "2015-12-03 11:14:27"
},
{
"ID": "IDJHE23",
"name": "Name of event 2",
"date": "date of event 2",
"location": "location of event 2",
"lastChangedDate": "2015-12-03 15:17:47"
},
{
"ID": "KDJBD34",
"name": "Name of event 3",
"date": "date of event 3",
"location": "location of event 3",
"lastChangedDate":"2015-12-03 05:25:11"
}
]
}
Anyone who can point me in the right direction?

You should operate through your first results and attach the new retrieved properties
var res = {
"Result": "success",
"Key": "12345",
"Data": [{
"ID": "GFDCV34",
"lastChangedDate": "2015-12-03 11:14:27"
}, {
"ID": "IDJHE23",
"lastChangedDate": "2015-12-03 15:17:47"
}, {
"ID": "KDJBD34",
"lastChangedDate": "2015-12-03 05:25:11"
}]
};
var tmp;
res.Data.map(function(val,i){
tmp = getdetails(val.ID);
Object.keys(tmp.Data[0]).map(function(v,j){
val[v] = tmp.Data[0][v];
});
});
Demo