Ng multiselect dropdown showing options as blank? - javascript

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'
}

Related

TypeError: interaction.options.getString is not a function

I am making a command to enable and disable events and when choosing any options it returns
TypeError: interaction.options.getString is not a function
I dont know why it does this as ive used interaction.options.getString before like how i did below and it works fine
Code:
module.exports = {
name: 'settings',
description: 'Toggle Certain Functions',
timeout: 5000,
category: 'general',
options: [
{
name: 'action',
description: 'Action to perform',
type: 3,
required: true,
choices: [
{
name: 'show',
value: 'action_show',
},
{
name: 'enable',
value: 'action_enable',
},
{
name: 'disable',
value: 'action_disable',
},
],
},
{
name: 'module',
description: 'Module to toggle',
type: 3,
required: true,
choices: [
{
name: 'all',
value: 'module_all',
},
{
name: 'premium',
value: 'module_starboard',
},
{
name: 'logging',
value: 'module_logging',
},
],
},
],
run: async (client, interaction) => {
const actions = interaction.options.getString('action');
const modules = interaction.options.getString('module');
if (actions === action_show) {
if (modules === module_all) {
// CODE
What version of DiscordJS are you on? Some older versions use different options systems.
You can update your version by running:
npm i discord.js#latest
or
yarn upgrade discord.js

Issue in normalizing quiz data

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).

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"

Structuring Redux state by domain?

How should one structure Redux state when retrieving domain objects that have different search parameters.
In my application I display a list of organisations that the user filters, in a table. On the same page I will also display a smaller list of organisations that a user is part of, and perhaps in the future another small list on the same page that displays only organisations from another user.
Do i do this:
{
list_organisations: [
{ id: 1, name: 'foo1' //... },
{ id: 2, name: 'foo2' //... },
{ id: 3, name: 'foo3' //... },
{ id: 4, name: 'foo4' //... },
{ id: 5, name: 'foo5' //... },
],
user_one_organisations: [
{ id: 6, name: 'foo' //... },
{ id: 2, name: 'foo' //... },
],
user_two_organisations: [
{ id: 4, name: 'foo' //... },
{ id: 6, name: 'foo' //... },
],
}
or this:
{
users: [
{ id: 1, organisations: [7,3,8], name: 'billy' },
{ id: 2, organisations: [3,6,1], name: 'sam' },
]
organisations: [
{ id: 1, name: 'foo', //... },
{ id: 2, name: 'foo1', //... },
{ id: 3, name: 'foo2', //... },
{ id: 4, name: 'foo3', //... },
{ id: 5, name: 'foo4', //... },
{ id: 6, name: 'foo5', //... },
{ id: 7, name: 'foo6', //... },
{ id: 8, name: 'foo7', //... },
{ id: 9, name: 'foo8', //... },
],
}
If we go with option two, what do we do in the case that we need to lookup a single organisation for some purpose e.g. "check if a users email exists within an organisation" -- it all just seems so complex... especially when doing one off requests? should that even live in the redux state?
That would make it like so:
{
users: [
{ id: 1, organisations: [7,3,8], name: 'billy' },
{ id: 2, organisations: [3,6,1], name: 'sam' },
]
organisation_signup_form: {
doesUsersEmailExist: true / false / null,
}
organisations: [
{ id: 1, name: 'foo', //... },
{ id: 2, name: 'foo1', //... },
{ id: 3, name: 'foo2', //... },
{ id: 4, name: 'foo3', //... },
// ...
],
}
I'd actually recommend structuring your data in a completely different way. You want to make sure that all of your models are easy to get at so keeping them in an array can be tricky.
I'd suggest a state structure something like this:
users: {
1: { id: 1, organisations: [7,3,8], name: 'billy' },
2: { id: 2, organisations: [3,6,1], name: 'sam' },
},
userList: [1,2],
organisation_signup_form: {
doesUsersEmailExist: true / false / null,
},
organisations: {
1: { id: 1, name: 'foo', //... },
2: { id: 2, name: 'foo1', //... },
3: { id: 3, name: 'foo2', //... }
}
I got this advice from Dan on this question
check if a users email exists within an organisation
You don't have an email on the user model and it's not clear so it's quite difficult to answer that specific question.
One bit of advice I'd give is that you need to structure your state in a database kind of way but it doesn't have to be the same structure as your actual database or api endpoints.

Kendo treeview expandPath method

Kendo has added a new API method called expandPath to its treeView in Q3 2013. Unfortunately I can't find any documentation about it in Kendo UI Docs or its forums.
Has anybody used this method? A sample would be great.
Well, it lets you expand a path and provide a callback that is called once all nodes are expanded:
var tree = $("#treeview").kendoTreeView({
dataSource: [{
id: 0,
text: "Furniture",
items: [{
id: 1,
text: "Tables & Chairs"
}, {
id: 2,
text: "Sofas"
}, {
id: 3,
text: "Occasional Furniture",
items: [{
id: 8,
text: "Small Sofas"
}, {
id: 9,
text: "Tiny Sofas",
items: [{
id: 10,
text: "Small Tiny Sofas"
}, {
id: 11,
text: "Smallest Tiny Sofas"
}]
}]
}]
}, {
id: 4,
text: "Decor",
items: [{
id: 5,
text: "Bed Linen"
}, {
id: 6,
text: "Curtains & Blinds"
}, {
id: 7,
text: "Carpets"
}]
}]
}).data().kendoTreeView;
tree.expandPath([0, 3, 9], function() {
console.log("hello");
});
The first parameter is an array of node ids describing the path (in the order you would expand them manually). The second parameter is a callback (this parameter is optional) which is probably mainly useful when additional nodes are loaded from a server (the callback doesn't seem to get called if the last node in the array is a leaf node though).
(see demo)

Categories