I am working on my website which will have my CV.
So I have an array of objects with hard and soft skills
skills: [
{ id: "1", type: "hard", title: "Technical skills" },
{ id: "2", type: "hard", title: "Computer skills" },
{ id: "3", type: "hard", title: "Microsoft Office skills" },
{ id: "4", type: "hard", title: "Analytical skills" },
{ id: "5", type: "hard", title: "Marketing skills" },
{ id: "6", type: "hard", title: "Presentation skills" },
{ id: "7", type: "hard", title: "Management skills" },
{ id: "8", type: "hard", title: "Project management skills" },
{ id: "9", type: "hard", title: "Writing skills" },
{ id: "10", type: "hard", title: "Language skills" },
{ id: "11", type: "hard", title: "Design skills" },
{ id: "12", type: "soft", title: "Leadership Skills" },
{ id: "13", type: "soft", title: "Teamwork" },
{ id: "14", type: "soft", title: "Communication Skills" },
{ id: "15", type: "soft", title: "Problem-Solving Skills" },
{ id: "16", type: "soft", title: "Work Ethic" },
{ id: "17", type: "soft", title: "Flexibility/Adaptability" },
{ id: "18", type: "soft", title: "Interpersonal Skills" },
],
And so I have two li's. So I need to display only hard skills in the first li and only soft skills in the second li.
Yes I know it'd be much easier if I just make 2 arrays and cycle through them for each one of li's, but I want to kinda challenge myself and filter the array. Obviously filter by the "type". So the return has to be an array, so I can cycle through it to display the data.
You can for example use two computed:
computed: {
hardSkills() {
return this.skills.filter(skill => skill.type === 'hard');
},
softSkills() {
return this.skills.filter(skill => skill.type === 'soft');
}
}
You could create the 2 arrays with a simple filter like this
const hardSkills = skills.filter(skill => skill.type === 'hard')
const softSkills = skills.filter(skill => skill.type === 'soft')
Then, go to your template and loop on those in your template.
Related
I was trying to use "cose-bilkent" layout extension in my react app, when the layout name was changed to "cose-bilkent" from inbuilt "grid" , it throws an error saying
"Cannot read properties of null (reading 'isHeadless')"
Since I am running this on an online code editor, headless shall be false as stated by the document:
To explicitly run a headless instance (e.g. in the browser) you can specify options.headless as true.
So I tried giving "headless:false" explicitly yet I am still getting the same error. I also tried other libraries such as spread, cola to cross check it , I am getting the same console error when I run it.
When navigated to the Line number of cytoscape.cjs.js 18789.35 it has the the following similar code
headless : function () : this.__privateRenderer.isHeadless()
import "./styles.css";
import { useRef, useEffect } from "react";
import cytoscape from "cytoscape";
import COSEBilkent from "cytoscape-cose-bilkent";
import cola from "cytoscape-cola";
import spread from "cytoscape-spread";
import CytoscapeComponent from "react-cytoscapejs";
import Cytoscape from "cytoscape";
Cytoscape.use(cola);
export default function App() {
const containerRef = useRef(null);
useEffect(() => {
const config = {
container: containerRef.current,
layout: {
name: "cola"
},
zoom: 1,
elements: {
nodes: [
{ data: { id: "1", label: "IP 1", type: "ip" } },
{ data: { id: "2", label: "Device 1", type: "device" } },
{ data: { id: "3", label: "IP 2", type: "ip" } },
{ data: { id: "4", label: "Device 2", type: "device" } },
{ data: { id: "5", label: "Device 3", type: "device" } },
{ data: { id: "6", label: "IP 3", type: "ip" } },
{ data: { id: "7", label: "Device 5", type: "device" } },
{ data: { id: "8", label: "Device 6", type: "device" } },
{ data: { id: "9", label: "Device 7", type: "device" } },
{ data: { id: "10", label: "Device 8", type: "device" } },
{ data: { id: "11", label: "Device 9", type: "device" } },
{ data: { id: "12", label: "IP 3", type: "ip" } },
{ data: { id: "13", label: "Device 10", type: "device" } }
],
edges: [
{
data: { source: "1", target: "2", label: "Node2" }
},
{
data: { source: "3", target: "4", label: "Node4" }
},
{
data: { source: "3", target: "5", label: "Node5" }
},
{
data: { source: "6", target: "5", label: " 6 -> 5" }
},
{
data: { source: "6", target: "7", label: " 6 -> 7" }
},
{
data: { source: "6", target: "8", label: " 6 -> 8" }
},
{
data: { source: "6", target: "9", label: " 6 -> 9" }
},
{
data: { source: "3", target: "13", label: " 3 -> 13" }
}
]
},
pannable: true,
position: {
// the model position of the node (optional on init, mandatory after)
x: 600,
y: 100
},
style: [
// the stylesheet for the graph
{
selector: "node",
style: {
"text-valign": "center",
"background-color": "#9D2F2E",
label: "data(id)"
}
},
{
selector: "edge",
style: {
width: 6,
"line-color": "#ccc",
"target-arrow-color": "#dfr",
"target-arrow-shape": "triangle",
"curve-style": "bezier",
label: "data(label)"
}
}
]
};
cytoscape(config);
}, []);
return <div ref={containerRef} style={{ height: "100vh", width: "100vw" }} />;
}
Above is the code that I am running.
Please drop in any inputs you have or any word on if I am going wrong somewhere.
Thanks in advance!
If you still unresolved this problem.
Try rewriting below code.
const cy = cytoscape(config)
cy.layout({
name: 'cola'
}).run()
Then, remove or change this your code.
layout: {
name: "cola"
},
You need to setting other layout options(ex. random, concentric...)
https://js.cytoscape.org/#layouts
reference(about layout.run)
Note that you must call layout.run() in order for it to affect the graph.
https://js.cytoscape.org/#layout.run
I'm trying to use AJV to check that parent_IDs on child objects are valid IDs on the parent objects.
I can get it to work by validating against a single parent object like this:
const ajv = new Ajv({
$data: true,
allErrors: true,
verbose: true,
});
addFormats(ajv, ["uuid"]);
const schema = {
type: "object",
properties: {
parentObjects: {
type: "array",
items: {
type: "object",
properties: {
id: { type: "string", format: "uuid" },
name: { type: "string" },
},
required: ["id", "name"],
},
},
childObjects: {
type: "array",
items: {
type: "object",
properties: {
id: { type: "string", format: "uuid" },
name: { type: "string" },
parent_id: {
type: "string",
format: "uuid",
const: { $data: "/parentObjects/0/id" },
},
},
required: ["id", "name", "parent_id"],
},
},
},
};
const data = {
parentObjects: [
{
id: "3bc169ba-99c4-448a-8c22-5c2593ccc9ee",
name: "larry",
},
{
id: "d2e92e51-cb56-4451-bf8b-349d82fde107",
name: "curly",
},
{
id: "b99f61f5-f417-4129-9315-ab049d2b618d",
name: "moe",
},
],
childObjects: [
{
id: "bd86603f-fb1d-4075-94f5-619337d43b98",
name: "stan",
parent_id: "3bc169ba-99c4-448a-8c22-5c2593ccc9ee",
},
{
id: "c2b80273-bf2b-4898-a44b-a758a436cb37",
name: "oliver",
parent_id: "e13b7c34-6cb5-4ef4-83a7-7d11c2bd4a1f",
},
],
};
ajv.validate(schema, data);
console.log(ajv.errors);
};
But what I need is to be able to validate against all parent objects, something like:
childObjects: {
type: "array",
items: {
type: "object",
properties: {
id: { type: "string", format: "uuid" },
name: { type: "string" },
parent_id: {
type: "string",
format: "uuid",
enum: { $data: "/parentObjects/*/id" },
},
},
required: ["id", "name", "parent_id"],
},
},
I can't find a way to use a wildcard for the array index "/parentObjects/*/id" or a way to iterate through all of the parentObjects. I could map the parentObject IDs outside of AJV, create another array and validate against that, but it seems like overkill - I feel like I'm missing something simple in AJV which would allow me to do this without generating a new array.
**
I don't Know how to make this please help if possible or tell me where can i find some similar Schema
I want to create video lecturer website
with topic, sub-topic, time-duration
**
export default {
name: "Courses",
title: "Property",
type: "document",
fields: [
{
title: "Movie",
name: "movie",
type: "document",
fields: [
{
title: "Title",
name: "title",
type: "string",
},
{
title: "Poster",
name: "poster",
type: "image",
},
{
title: "Sub-Topic",
name: "directors",
type: "array",
of: [{ type: "string" }],
},
{
title: "Video URL",
name: "imageUrl",
type: "url",
},
{
title: "Rich text example",
name: "myRichTextExample",
type: "array",
of: [{ type: "block" }],
},
],
},
In iview table, my colums：
export default {
data () {
return {
columns5: [
{
title: 'CNAME',
key: 'name',
sortable: true
},
{
title: 'nodes',
key: 'nodes',
},
{
title: 'domains',
key: 'domains',
},
{
title: 'desc',
key: 'desc'
},
{
title: 'duetime',
key: 'duetime',
sortable: true
},
{
title: 'ctime',
key: 'ctime',
sortable: true
},
{
title: 'uptime',
key: 'uptime',
sortable: true
},
],
the data:
anames:[
{
"id": 1,
"nodes": [
{
"id": 1,
"main_ip": "10.10.10.10",
"ips": "10.10.10.10\r\n10.10.10.11",
"req_secret": null,
"ctime": "2021-05-17T09:41:53.159131+08:00",
"uptime": "2021-05-17T10:31:47.886033+08:00",
"cname": 1
}
],
"domains": [
{
"id": 1,
"domain_name": "baidu.com",
"ctime": "2021-05-17T16:19:18.097807+08:00",
"uptime": "2021-05-17T16:19:18.097955+08:00",
"cname": 1
}
],
"name": "masdcom",
"desc": "",
"desc_en": null,
"is_active": true,
"duetime": "2021-06-17T19:40:00+08:00",
"ctime": "2021-05-17T09:13:57.019125+08:00",
"uptime": "2021-05-17T19:42:23.025122+08:00",
"user": 2
}
]
You see my nodes and domains，in data anames they are list, not just key-value, how can I display domain's domain_name and node's main_ip?
In there can not use domains.domain_name and nodes.main_ip.
I want nodes display all node's main_ip and domains display all domain's domain_name. what should I do in columns?
domains and nodes is array, you forgot about indexes
domains[0].domain_name and nodes[0].main_ip
Hi I am trying to use Select2 (multiselect) with Durandal (http://jsfiddle.net/anasnakawa/6XvqX/381/),
but the popup does not work below is part of my VM and HTML, here I am trying to bind a list of states to an input it should work as an auto complete but there seems to a issue showing the selection popup, can someone please help
define(['durandal/app', 'services/datacontext', 'plugins/router', 'services/bindinghandlers'],
function (app, datacontext, router) {
var withs = ko.observableArray(),
states = [
{ id: "AL", text: "Alabama" },
{ id: "AK", text: "Alaska" },
{ id: "AZ", text: "Arizona" },
{ id: "AR", text: "Arkansas" },
{ id: "CA", text: "California" },
{ id: "CO", text: "Colorado" },
{ id: "CT", text: "Connecticut" },
{ id: "DE", text: "Delaware" },
{ id: "FL", text: "Florida" },
{ id: "GA", text: "Georgia" },
{ id: "HI", text: "Hawaii" },
{ id: "ID", text: "Idaho" },
{ id: "IL", text: "Illinois" },
{ id: "IN", text: "Indiana" },
{ id: "IA", text: "Iowa" },
{ id: "KS", text: "Kansas" },
{ id: "KY", text: "Kentucky" },
{ id: "LA", text: "Louisiana" },
{ id: "ME", text: "Maine" },
{ id: "MD", text: "Maryland" },
{ id: "MA", text: "Massachusetts" },
{ id: "MI", text: "Michigan" },
{ id: "MN", text: "Minnesota" },
{ id: "MS", text: "Mississippi" },
{ id: "MO", text: "Missouri" },
{ id: "MT", text: "Montana" },
{ id: "NE", text: "Nebraska" },
{ id: "NV", text: "Nevada" },
{ id: "NH", text: "New Hampshire" },
{ id: "NJ", text: "New Jersey" },
{ id: "NM", text: "New Mexico" },
{ id: "NY", text: "New York" },
{ id: "NC", text: "North Carolina" },
{ id: "ND", text: "North Dakota" },
{ id: "OH", text: "Ohio" },
{ id: "OK", text: "Oklahoma" },
{ id: "OR", text: "Oregon" },
{ id: "PA", text: "Pennsylvania" },
{ id: "RI", text: "Rhode Island" },
{ id: "SC", text: "South Carolina" },
{ id: "SD", text: "South Dakota" },
{ id: "TN", text: "Tennessee" },
{ id: "TX", text: "Texas" },
{ id: "UT", text: "Utah" },
{ id: "VT", text: "Vermont" },
{ id: "VA", text: "Virginia" },
{ id: "WA", text: "Washington" },
{ id: "WV", text: "West Virginia" },
{ id: "WI", text: "Wisconsin" },
{ id: "WY", text: "Wyoming" }
];
var vm = {
withs: withs,
states: states,
};
return vm;
});
<select multiple="true" data-bind="options: states, optionsValue: 'id', optionsText: 'text', selectedOptions: withs, select2: {}" style="width: 300px"></select>
Register select2 in the Require.js configuration inside main.js:
requirejs.config({
paths: {
'select2': 'path/to/select2'
}
});
Define it in your view model:
define(['select2'], function (select2) {
// ...
});
Don't forget to declare it. You'll have to use the attached callback:
var vm = {
withs: withs,
states: states,
attached: function() {
$('select').select2();
}
};