We Keep Coding

How to update nested object property in array by id in javascript?

How can i updated isCompleted property to true on onClick. I can only access moduleContent id from route e.g.- "id": "cr1mod1content1". How can i update isCompleted property to true by only matching this id. Note: i'm using react/nextJS for this project.
here is my json data structure.
[
{
"id": 1,
"progress": 0,
"title": "Python Basics for Data Science",
"modules": [
{
"id": "cr1mod1",
"title": "Module 1- Python Basics",
"moduleContent": [
{
"type": "html",
"id": "cr1mod1content1",
"title": "Module Introduction and Learning Objectives",
"content": " <p> This module teaches the basics of Python and begins </p>",
"quizContent": [],
"isCompleted": false
},
{
"type": "video",
"id": "cr1mod1content2",
"title": "Video: Types (3:02)",
"content": "https://vimeo.com/23",
"quizContent": [],
"isCompleted": false
},
{
"type": "quiz",
"id": "cr1mod1content3",
"title": "Practice Quiz: Types",
"content": "",
"quizContent": [],
"isCompleted": false
}
]
},
{
"id": "cr1mod2",
"title": "Module 2 - Python Data Structures",
"moduleContent": [
{
"type": "html",
"id": "cr1mod2content1",
"title": "Module Introduction and Learning Objectives",
"content": " <p>This module begins a journey into Python data structure</p> ",
"quizContent": [],
"isCompleted": false
},
{
"type": "video",
"id": "cr1mod2content2",
"title": "Video: Types (8:31)",
"content": "https://vimeo.com/1",
"quizContent": [],
"isCompleted": false
},
{
"type": "quiz",
"id": "cr1mod2content3",
"title": "Practice Quiz: Types",
"content": "",
"quizContent": [],
"isCompleted": false
}
]
}
]
}
]

You can reach this in this way:
const arr = declare Your JSON array there
const id = 'cr1mod2content3'
for(const module of arr[0].modules) {
for(const item of module.moduleContent) {
if(item.id === id) item.isCompleted = true
}
}
Take into account that if your root JSON array may contain several elements, you will have to wrap the cycle with one more (root) iteration.

You can use some() of array for checking and update
const data = [
{
"id": 1,
"progress": 0,
"title": "Python Basics for Data Science",
"modules": [
{
"id": "cr1mod1",
"title": "Module 1- Python Basics",
"moduleContent": [
{
"type": "html",
"id": "cr1mod1content1",
"title": "Module Introduction and Learning Objectives",
"content": " <p> This module teaches the basics of Python and begins </p>",
"quizContent": [],
"isCompleted": false
},
{
"type": "video",
"id": "cr1mod1content2",
"title": "Video: Types (3:02)",
"content": "https://vimeo.com/23",
"quizContent": [],
"isCompleted": false
},
{
"type": "quiz",
"id": "cr1mod1content3",
"title": "Practice Quiz: Types",
"content": "",
"quizContent": [],
"isCompleted": false
}
]
},
{
"id": "cr1mod2",
"title": "Module 2 - Python Data Structures",
"moduleContent": [
{
"type": "html",
"id": "cr1mod2content1",
"title": "Module Introduction and Learning Objectives",
"content": " <p>This module begins a journey into Python data structure</p> ",
"quizContent": [],
"isCompleted": false
},
{
"type": "video",
"id": "cr1mod2content2",
"title": "Video: Types (8:31)",
"content": "https://vimeo.com/1",
"quizContent": [],
"isCompleted": false
},
{
"type": "quiz",
"id": "cr1mod2content3",
"title": "Practice Quiz: Types",
"content": "",
"quizContent": [],
"isCompleted": false
}
]
}
]
}
]
const updateData = (arr, idFilter) => {
arr.some(({modules}) => {
modules.some(({moduleContent}) => {
moduleContent.some(ele => {
if (ele.id === idFilter) {
return ele.isCompleted = true
}
return false
})
})
})
}
updateData(data, 'cr1mod1content1')
console.log(data)

You can use map double times to update
data[0].modules.map(item => item.moduleContent.map(obj => {
if (obj.id === "cr1mod1content1") {
obj.isCompleted = true
}
}));

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!

Search array parts by partial in some property

I have this kind of object in typescript
const photos =
{
"albumId": "1",
"title": "quidem molestiae enim",
"created": "1",
"photos": [
{
"id": "1",
"title": "sunset",
"url": "https://via.placeholder.com/600/92c952",
"thumbnailUrl": "https://via.placeholder.com/150/92c952"
},
{
"id": "2",
"title": "today is sunshine",
"url": "https://via.placeholder.com/600/771796",
"thumbnailUrl": "https://via.placeholder.com/150/771796"
},
{
"id": "3",
"title": "test",
"url": "https://via.placeholder.com/600/24f355",
"thumbnailUrl": "https://via.placeholder.com/150/24f355"
}
]
}
I need to push out all values that are not find in string, search in performed in photos.photos.title.
Here is example, lets say i have a string like this
const searchText = 'sun';
I need to serach inside photos.photos.title and remove all photos.photos that does not contais part of that word.My ne photos should look like this
const photos =
{
"albumId": "1",
"title": "quidem molestiae enim",
"created": "1",
"photos": [
{
"id": "1",
"title": "sunset",
"url": "https://via.placeholder.com/600/92c952",
"thumbnailUrl": "https://via.placeholder.com/150/92c952"
},
{
"id": "2",
"title": "today is sunshine",
"url": "https://via.placeholder.com/600/771796",
"thumbnailUrl": "https://via.placeholder.com/150/771796"
}
]
}
You will see that all remaining photos member is left, because in title they having a part of word sun
I dont know how even to start, i know i can do find, but i need to search only part of the word not entire word? It can not just be last memmber of the array, the array is much bigger :(

You can use filter() on photos.photos and check that if title contains 'sun' using includes()
const photos = { "albumId": "1", "title": "quidem molestiae enim", "created": "1", "photos": [ { "id": "1", "title": "sunset", "url": "https://via.placeholder.com/600/92c952", "thumbnailUrl": "https://via.placeholder.com/150/92c952" }, { "id": "2", "title": "today is sunshine", "url": "https://via.placeholder.com/600/771796", "thumbnailUrl": "https://via.placeholder.com/150/771796" }, { "id": "3", "title": "test", "url": "https://via.placeholder.com/600/24f355", "thumbnailUrl": "https://via.placeholder.com/150/24f355" } ] }
let str = "sun"
photos.photos = photos.photos.filter(x => x.title.includes(str))
console.log(photos)

FullCalendar doesn't display events fetched via JSON with Dynamic 'extraParams' parameter

I'm having problems dislaying events fetched via JSON with Dynamic 'extraParams' parameter as explained here in the Docs:
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
...,
events: {
url: '/getEvents',
method: 'POST',
extraParams: function() {
var combobox = document.getElementById('combobox');
var value = combobox.options[combobox.selectedIndex].value;
return {client: value};
},
failure: function(error) {
console.log(error);
alert("Error", "Unable to fetch events", "red");
},
},
...
});
calendar.render();
On the debug panel, I can see the request made by FullCalendar:
XHR POST https://127.0.0.1:8443/getEvents
With this params:
client: All
start: 2019-09-30T00:00:00Z
end: 2019-11-11T00:00:00Z
timeZone: UTC
And the response:
{
"error": "",
"events": [
{
"allDay": 1,
"color": "blue",
"end": "2019-10-24T00:00:00.000Z",
"extendedProps": {
"company": "Company 1",
"state": "Active",
"type": "task"
},
"groupId": "48",
"id": 27,
"start": "2019-10-23T00:00:00.000Z",
"title": "Title 1",
"url": ""
},
{
"allDay": 1,
"color": "blue",
"end": "2019-11-07T00:00:00.000Z",
"endpoints": 0,
"extendedProps": {
"company": "All",
"description": "Description",
"creationDate": "2019-11-04",
"state": "Active",
"tecnology": "test",
"element": "test 1",
"type": "type 2",
"user": "user 1",
"version": "1.2"
},
"id": 76,
"start": "2019-11-04T00:00:00.000Z",
"title": "Title 2",
"url": ""
}
]
}
But FullCalendar doesn't display this two received events. I don't know what I'm doing wrong.
Regards.

This is happening because your server must return a simple array containing only the events, and nothing else. You're returning a complex object. FullCalendar does not know how to unpack your object and find the "events" property containing the relevant data.
You need to return simply:
[
{
"allDay": 1,
"color": "blue",
"end": "2019-10-24T00:00:00.000Z",
"extendedProps": {
"company": "Company 1",
"state": "Active",
"type": "task"
},
"groupId": "48",
"id": 27,
"start": "2019-10-23T00:00:00.000Z",
"title": "Title 1",
"url": ""
},
{
"allDay": 1,
"color": "blue",
"end": "2019-11-07T00:00:00.000Z",
"endpoints": 0,
"extendedProps": {
"company": "All",
"description": "Description",
"creationDate": "2019-11-04",
"state": "Active",
"tecnology": "test",
"element": "test 1",
"type": "type 2",
"user": "user 1",
"version": "1.2"
},
"id": 76,
"start": "2019-11-04T00:00:00.000Z",
"title": "Title 2",
"url": ""
}
]
from your server, without the rest of it.
I must say that the fullCalendar documentation doesn't make this fact particularly clear.
N.B. I'd argue the "errors" property is superfluous anyway, in any JSON response. If there was an error, you should return a HTTP status code indicating the nature of the error, and a completely different response body indicating whatever you want to tell the user about the error. This would fire the "failure" callback in your JS and allow the browser code to respond appropriately.

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 }