Issue in normalizing quiz data - javascript

Response format:
const fakeDatabase = {
quizzes: [{
id: v4(),
title: 'Get started',
text: 'hey',
completed: true,
hints: [{
id: 1,
text: 'Hint 1'
}, {
id: 2,
text: 'Hint 2'
}]
}, {
id: v4(),
title: 'What are you waiting for?',
text: 'ho',
completed: true,
hints: [{
id: 3,
text: 'Hint 3'
}, {
id: 4,
text: 'Hint 4'
}]
}, {
id: v4(),
title: 'Remember! create more than you consume',
text: 'let’s go',
completed: false,
hints: [{
id: 5,
text: 'Hint 5'
}, {
id: 6,
text: 'Hint 6'
}]
}],
};
I have the following schema:
import { Schema, arrayOf } from 'normalizr';
export const hint = new Schema('hints');
export const quiz = new Schema('quizzes', {
hints: [ hint ]
});
export const arrayOfQuiz = arrayOf(quiz);
But after normalizing I get the following response:
normalize(response, schema.arrayOfQuiz)
So, basically my quiz is normalized properly but hints is kept as it is, I don't know if I am missing something.

It looks like you're using normalizr v2.x. Only in v3.0.0 was plain array syntaxt [ hint ] added. In v2.x, you need to use arrayOf(hint).

Related

function that find uncompleted noted by flags into an array with nested objects

i'm trying to build a simple function that return only the uncompleted notes into an array with nested objects.
my object looks like:
function uncompletedNotes(notes) {
}
const notes = [
{
id: 1,
description: 'Workout program',
todos: [
{
id: 1,
name: 'Push ups - 10 x 3',
done: false
},
{
id: 2,
name: 'Abdominals - 20 x 3',
done: true
},
{
id: 3,
name: 'Tapis Roulant - 15min',
done: true
}
]
},
{
id: 2,
description: 'Front-end Roadmap',
todos: [
{
id: 1,
name: 'Learn HTML',
done: true
},
{
id: 2,
name: 'Learn CSS',
done: true
},
{
id: 3,
name: 'Learn JavaScript',
done: true
},
{
id: 4,
name: 'Learn Angular',
done: true
}
]
}
]
const notesInProgress = uncompletedNotes(notes);
console.log('All notes: ', notes);
console.log('Notes In Progress: ', notesInProgress);
i've tried so far with notes.map but i do not know the right way to return only the items with flags done: false
Try this for example:
function uncompletedNotes(notes) {
return notes.reduce((prev, note) => prev.concat(note.todos.filter(td => !td.done)), []);
}
const some_notes = [{
id: 1,
description: 'Workout program',
todos: [{
id: 1,
name: 'Push ups - 10 x 3',
done: false
},
{
id: 2,
name: 'Abdominals - 20 x 3',
done: true
},
{
id: 3,
name: 'Tapis Roulant - 15min',
done: true
}
]
},
{
id: 2,
description: 'Front-end Roadmap',
todos: [{
id: 1,
name: 'Learn HTML',
done: true
},
{
id: 2,
name: 'Learn CSS',
done: true
},
{
id: 3,
name: 'Learn JavaScript',
done: true
},
{
id: 4,
name: 'Learn Angular',
done: true
}
]
}
]
const notesInProgress = uncompletedNotes(some_notes);
console.log('All notes: ', some_notes);
console.log('Notes In Progress: ', notesInProgress);
To get the notes that contain one or more 'todos' that are flagged as false, you can do this:
function uncompletedNotes(notes) {
return notes.filter((note) =>
note.todos.some((todo) => todo.done === false)
)
}

How to find just first child element in array? Javascript [duplicate]

This question already has answers here:
How to map more than one property from an array of objects [duplicate]
(7 answers)
Closed last year.
I need to find first child element in array and just return it.
Here is problem because here is few children elements and i need loop thought each and return every first children element.
Example of array:
let allItems =
[{ id: 1 ,
name: 'Test 1' ,
children: [
id: 12,
title: 'Child element'
]
},
{
id: 2 ,
name: 'Test 2'
},
{
id: 3 ,
name: 'Test 3',
children: [
id: 12,
title: 'Child element',
children: [
id: 123,
title: 'GRAND Child element',
]
]
}]
What's the problem here? Since there can be many children elements, do I need to find a parent for each of those elements?
After looping i need array to be:
[{ id: 1 ,
name: 'Test 1'
},
{
id: 2 ,
name: 'Test 2'
},
{
id: 3 ,
name: 'Test 3'
}]
Wihout children elements.
What I am try:
allItems.map(item => item).filter(filteredItem => !filteredItem.children);
But this is no return me good results
Based on your expected output, here is my solution.
Also note, that you had missing curly braces with your children.
See you modified snippet below:
let allItems = [{
id: 1,
name: 'Test 1',
children: [{
id: 12,
title: 'Child element'
}]
},
{
id: 2,
name: 'Test 2'
},
{
id: 3,
name: 'Test 3',
children: [{
id: 12,
title: 'Child element',
children: [{
id: 123,
title: 'GRAND Child element',
}]
}]
}
]
console.log(allItems.map(item => {
return {
id: item.id,
name: item.name
}
}))
Using map and destructuring is a nice way to achieve what you're looking for
let allItems = [{
id: 1,
name: 'Test 1',
children: [{
id: 12,
title: 'Child element'
}]
},
{
id: 2,
name: 'Test 2'
},
{
id: 3,
name: 'Test 3',
children: [{
id: 12,
title: 'Child element',
children: [{
id: 123,
title: 'GRAND Child element',
}]
}]
}
];
const res = allItems.map(x => {
const {id, name} = x;
return {id, name};
});
console.log(res);
Use these propertys for call first child:
.firstchild==>this property calls first Node
.firstElementChild==>calls first element

Ng multiselect dropdown showing options as blank?

I'm trying to implement a basic multiselect dropdown to my project. My code is the following:
HTML
<ng-multiselect-dropdown [settings]="searchSettings" [data]="dummyList" multiple>
</ng-multiselect-dropdown>
TS
dummyList = [
{ item_id: 1, item_text: 'Mumbai' },
{ item_id: 2, item_text: 'Bangaluru' },
{ item_id: 3, item_text: 'Pune' },
{ item_id: 4, item_text: 'Navsari' },
{ item_id: 5, item_text: 'New Delhi' }
]
searchSettings: TslMultiSelectSettings = {
enableSearchFilter: true,
noDataLabel: 'Search For status',
labelKey: 'status',
primaryKey: 'status'
}
This successfully creates the dropdown with the correct amount of items. But it is showing up blank and I can't figure out why. See image:
When I inspect the element in devtools I can see that the names are the options are there too:
What am I doing that is making the text not appear and how can I fix?
Check the docs, the format is: { id: number|string, text: string }.
Update
I'm not even sure if you're using the same library as the one I linked. But if you are, you can use it like this:
dummyList = [
{ id: 1, text: 'Mumbai' },
{ id: 2, text: 'Bangaluru' },
{ id: 3, text: 'Pune' },
{ id: 4, text: 'Navsari' },
{ id: 5, text: 'New Delhi' }
]
<ng-multiselect-dropdown [data]="dummyList"></ng-multiselect-dropdown>
I have no idea where you are getting the following interface from, it doesn't match the library I'm referring to at the start of the answer, please confirm which npm library you are using.
searchSettings: TslMultiSelectSettings = {
enableSearchFilter: true,
noDataLabel: 'Search For status',
labelKey: 'status',
primaryKey: 'status'
}

change text of rows in type matrix surveyjs

I am building best employee survey project using surveyjs. When working in matrix type, I get trouble how to change text "employee1,employee2,employee3" with real name employee
see picture.
so far here is my code:
var json = {
title: "Software developer survey.",
pages: [
{
title: "Part 1",
questions: [
{
type: "matrix",
name: "Question1",
//isAllRowRequired: true,
title: "Please indicate if you agree or disagree with the following statements",
columns: [
{
value: 1,
text: "Strongly Disagree"
}, {
value: 2,
text: "Disagree"
}, {
value: 3,
text: "Neutral"
}, {
value: 4,
text: "Agree"
}, {
value: 5,
text: "Strongly Agree"
}
],
rows: [
{
value: "valueEmployee1",
text: "Employee1 ![Employee1](https://bezone.files.wordpress.com/2008/02/soeharto.jpg =50x50)"
}, {
value: "valueEmployee2",
text: "Employee2"
}, {
value: "valueEmployee3",
text: "Employee3"
}
]
},
//
]
},
thank you for your help
You can add matrix rows dynamically:
var json = {
questions: [
{
type: "matrix",
name: "score",
title: "Please score the employees in the list",
columns: [
{
value: 1,
text: "Bad"
}, {
value: 2,
text: "So-so"
}, {
value: 3,
text: "Good enough"
}, {
value: 4,
text: "Good"
}, {
value: 5,
text: "Excellent"
}
],
rows: [
]
}
]
};
window.survey = new Survey.Model(json);
var q = survey.getQuestionByName("score");
var employees = [{ id: "id1", name: "John"}, { id: "id2", name: "Ben"}, { id: "id3", name: "Chack"}]
employees.forEach(function(employee) {
q.rows.push(new Survey.ItemValue(employee.id, employee.name));
});
Here is the working sample - https://plnkr.co/edit/OMBt1n02Qc8f5znUmOHE?p=preview

Setting deep associations in normalizr schema

I have a server response that looks like this:
[{
id: 1,
title: 'Some Article',
related_articles: {
total: 4,
results: [
{ id: 2, title: 'Some other article' },
{ id: 3, title: 'Yet another article' },
]
}
}]
As you can see, what makes this tricky is it isn't a simple arrayOf: I want to normalize article.related_articles.results.
I've tried this, to no avail:
articleSchema.define({
related_articles: {
results: arrayOf(relatedArticleSchema),
},
});
It seems as though supported relations have to be "top level".
Anyone know how I can wind up with something like:
[{
id: 1,
title: 'Some Article',
related_articles: {
total: 4,
results: [2, 3]
}
}]
Thanks!
Your scheme defines a key "relatedArticles", but it should be snake_case, "related_articles"

Categories