I am using the following code:
removeElement (index) {
this.books.splice(index, 1);
}
Element Books:
books: [
{
name: 'Hamlet',
author: 'William Shakespeare',
date: '1609',
language: 'English'
},
{
name: 'A Boys Will',
author: 'Robert Frost',
date: '1913',
language: 'English'
}
]
It is working but it is removing index 0 everytime.
How to fix this issue? I am using VueJS 2.
Try this
removeElement (index) {
var books = this.books
var filteredBooks = books.filter(function(book, i) {
return index !== i
})
this.books = filteredBooks
}
Related
Take the code below which works fine:
function Test() {
const txt = 'a'
const fruit = [
{ name: 'apple' },
{ name: 'orange' },
{ name: 'kiwi' },
{ name: 'banana' },
{ name: 'lemon' },
]
return (
<FlatList
data={fruit.filter((item) => String(item.name).includes(txt))}
renderItem={({ item }) => <Text>{item.name}</Text>}
/>
)
}
export default Test
The search string (txt) is a so the output would be:
apple
orange
banana
So far so good, now I want to be able to type for example ae and get all the items in the array that include both a and e in any order, not just ae together. here is the expected result for const txt = 'ae':
apple
orange
You can do it like this
function Test() {
const txt = 'a'
const fruit = [
{ name: 'apple' },
{ name: 'orange' },
{ name: 'kiwi' },
{ name: 'banana' },
{ name: 'lemon' },
]
const searchFinal = () => {
const newSplitSearch = txt.split("");
const finalArray = []
fruit.map((data) => {
const nameData = data.name;
let shouldBeAdded = true;
for (let i = 0; i < newSplitSearch.length; i++) {
if (nameData.includes(newSplitSearch[i])) {
} else {
shouldBeAdded = false;
}
}
if (shouldBeAdded) {
finalArray.push(data)
}
})
return finalArray
}
return (
<FlatList
data={searchFinal()}
renderItem={({ item }) => <Text>{item.name}</Text>}
/>
)
}
export default Test
Hope it helps :)
One way is to split the word characters and then on the filter check all of them with array.prototype.every
const txt = 'ae'
const fruit = [
{ name: 'apple' },
{ name: 'orange' },
{ name: 'kiwi' },
{ name: 'banana' },
{ name: 'lemon' },
]
const search = (arr, str) => {
const chars = str.split('');
return arr.filter(
item => chars.every(char => item.name.includes(char)) );
}
console.log(search(fruit, txt) )
Unfortunately the .includes() method of the String object just accepts a string-type parameter to search for.
What you can do however is using a regular expression instead.
Most basically this would be:
console.log("apple".match(/[a|e]/g));
The above would look for the letters a and e and return an array with the results found for apple ["a", "e"]. Problem is it would also return something if there is three times a and no e like in banana.
To overcome this issue we need to clean the returned array from duplicates first and afterwards check if the number of elements is at least the number of unique letters we want to look for - which is 2 in case of a and e.
Here's an example:
const fruit = [{
name: 'apple'
},
{
name: 'orange'
},
{
name: 'kiwi'
},
{
name: 'banana'
},
{
name: 'lemon'
},
]
let txt = "ae";
let regex = new RegExp("[" + txt.split("").join("|") + "]", "g");
fruit.forEach(item => {
console.log(item.name, [...new Set(item.name.match(regex))].length >= txt.length);
})
I am using the iView UI kit table in my Vue.js application that consumes an Elasticsearch API with axios. My problem is that I just can't seem to get to access the nested search response object, which is an array list object. I only get to access the 1st level fields, but not the nested ones. I don't know how to set the table row key in the iView table.
This is how my axios call and mapper methods look like:
listObjects(pageNumber){
const self = this
self.$Loading.start()
self.axios.get("/api/elasticsearch/")
.then(response => {
self.ajaxTableData = self.mapObjectToArray(response.data);
self.dataCount = self.ajaxTableData.length;
if(self.ajaxTableData.length < self.pageSize){
self.tableData = self.ajaxTableData;
} else {
self.tableData = self.ajaxTableData.slice(0,self.pageSize);
}
self.$Loading.finish()
})
.catch(e => {
self.tableData = []
self.$Loading.error()
self.errors.push(e)
})
},
mapObjectToArray(data){
var mappedData = Object.keys(data).map(key => {
return data[key];
})
return mappedData
},
The iView table columns look like this:
tableColumns: [
{
title: 'Study Date',
key: 'patientStudy.studyDate',
width: 140,
sortable: true,
sortType: 'desc'
},
{
title: 'Modality',
key: "generalSeries.modality",
width: 140,
sortable: true
},
...
]
The (raw) Elasticsearch documents look like this:
[
{ "score":1, "id":"3a710fa2c1b3f6125fc168c9308531b59e21d6b3",
"type":"dicom", "nestedIdentity":null, "version":-1, "fields":{
"highlightFields":{
},
"sortValues":[
],
"matchedQueries":[
],
"explanation":null,
"shard":null,
"index":"dicomdata",
"clusterAlias":null,
"sourceAsMap":{
"generalSeries":[
{
"seriesInstanceUid":"999.999.2.19960619.163000.1",
"modality":"MR",
"studyInstanceUid":"999.999.2.19960619.163000",
"seriesNumber":"1"
}
],
"patientStudy":[
{
"studyDate":"19990608"
}
]
}
}
]
And this is how the consumed object looks like:
As you can see, the fields I need to access are within the "sourceAsMap" object, and then nested in arrays.
How can I provide the iView table cell key to access them?
UPDATE:
I now "remapped" my Elasticsearch object before displaying it in the Vue.js table, and it works now. However, I don't think that the way I did it is very elegant or clean....maybe you can help me to do it in a better way. This is my method to remap the object:
getData(data){
let jsonMapped = []
for(let i = 0; i < data.length; i++){
let id = {}
id['id'] = data[i].id
let generalData = data[i]['sourceAsMap']['generalData'][0]
let generalSeries = data[i]['sourceAsMap']['generalSeries'][0]
let generalImage = data[i]['sourceAsMap']['generalImage'][0]
let generalEquipment = data[i]['sourceAsMap']['generalEquipment'][0]
let patient = data[i]['sourceAsMap']['patient'][0]
let patientStudy = data[i]['sourceAsMap']['patientStudy'][0]
let contrastBolus = data[i]['sourceAsMap']['contrastBolus'][0]
let specimen = data[i]['sourceAsMap']['specimen'][0]
jsonMapped[i] = Object.assign({}, id, generalData, generalSeries, generalImage, generalEquipment, patient,
patientStudy, contrastBolus, specimen)
}
return jsonMapped
},
The result is this:
Even though it now works, but how can I optimize this code?
A few functions can help you with your situation
let data = [{
key1: ['k1'],
key2: ['k2'],
key3: [{
subKey1: 'sk1',
subKey2: ['sk2'],
subObject: [{ name: 'John', surname: 'Doe' }],
items: [1, 2, 3, 5, 7]
}]
}];
function mapIt(data) {
if (isSingletonArray(data)) {
data = data[0];
}
for(const key in data) {
if (isSingletonArray(data[key])) {
data[key] = mapIt(data[key][0]);
} else {
data[key] = data[key];
}
}
return data;
}
function isSingletonArray(obj) {
return typeof obj === 'object' && Array.isArray(obj) && obj.length === 1;
}
console.log(mapIt(data));
Outputs:
{
key1: 'k1',
key2: 'k2',
key3: {
subKey1: 'sk1',
subKey2: 'sk2',
subObject: { name: 'John', surname: 'Doe' },
items: [ 1, 2, 3, 5, 7 ]
}
}
You can check it in your browser. mapIt unwraps the singleton arrays into objects or primitives.
But I recommend you to watch out special elastic client libraries for javascript. It could save you from writing extra code.
I am new in React native and trying to integrate Realm as a client side DB.
I have 2 schemas:
export const CAR_SCHEMA = {
name: 'Car',
properties: {
color: 'string',
model: 'string',
}
};
export const PERSONS_SCHEMA = {
name: 'Person',
primaryKey: 'id',
properties: {
id: 'int',
firstName: 'string',
lastName: 'string'
cars: 'Cars[]'
}
};
My question basically means how to remove 'Car' from 'Person' where Car.model='Honda'? I couldn't find any documentation about deleting element from object's nested array.
Remove from array but keep item in Realm:
realm.write(() => {
let person = realm.objectForPrimaryKey('person', personId);
let carsOfPerson = person.cars;
var i = carsOfPerson.length - 1;
while(i >= 0) {
if(carsOfPerson[i].model == "Honda") {
carsOfPerson.splice(i, 1);
}
i--;
}
});
Remove from array by deleting item from Realm:
realm.write(() => {
let person = realm.objectForPrimaryKey('person', personId);
let carsOfPerson = person.cars;
let hondasOfPerson = carsOfPerson.filtered('model = "HONDA"')
realm.delete(hondasOfPerson)
});
I've got a list I'm trying to pull an object from using _.get but following that selection I need to loop over the object to create a new property. So far I've been successful using a combination of _.get and _.map as shown below but I'm hoping I can use _.chain in some way.
var selected = _.get(results, selectedId);
return _.map([selected], result => {
var reviews = result.reviews.map(review => {
var reviewed = review.userId === authenticatedUserId;
return _.extend({}, review, {reviewed: reviewed});
});
return _.extend({}, result, {reviews: reviews});
})[0];
Is it possible to do a transform like this using something other than map (as map required me to break this up/ creating an array with a solo item inside it). Thank you in advance!
I can see that you're creating unnecessary map() calls, you can simply reduce all those work into something like this:
var output = {
reviews: _.map(results[selectedId], function(review) {
return _.defaults({
reviewed: review.userId === authenticatedUserId
}, review);
})
};
The defaults() method is similar to extend() except once a property is set, additional values of the same property are ignored.
var selectedId = 1;
var authenticatedUserId = 1;
var results = {
1: [
{ userId: 1, text: 'hello' },
{ userId: 2, text: 'hey' },
{ userId: 1, text: 'world?' },
{ userId: 2, text: 'nah' },
]
};
var output = {
reviews: _.map(results[selectedId], function(review) {
return _.defaults({
reviewed: review.userId === authenticatedUserId
}, review);
})
};
document.body.innerHTML = '<pre>' + JSON.stringify(output, 0, 4) + '</pre>';
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
So I have a mongoose Schema that looks like this:
var Functionary = new Schema({
person: {
type: mongoose.Schema.Types.ObjectId,
ref: 'Person'
},
dateOfAssignment: Date,
dateOfDischarge: Date,
isActive: Boolean
});
var PositionSchema = new Schema({
name: String,
description: String,
maxHeadCount: Number,
minHeadCount: Number,
currentHeadCount: Number,
currentlyHolding: [Functionary],
historical: [Functionary],
responsibleTo: {
type: mongoose.Schema.Types.ObjectId,
ref: 'Position'
}
});
*note that the Position document can reference itself in the ResponsibleTo field.
Now, I'm trying to build a method that will search the Positions collection, populate the currentlyHolding[].person.name field and the responsibleTo.currentlyHolding[].person.name field, and also return the total number of records found (for paging purposes on the front-end).
Here's what my code looks like:
exports.search = function(req, res) {
var result = {
records: null,
count: 0,
currentPage: req.params.page,
totalPages: 0,
pageSize: 10,
execTime: 0
};
var startTime = new Date();
var populateQuery = [
{
path: 'currentlyHolding.person',
select: 'name'
}, {
path:'responsibleTo',
select:'name currentlyHolding.person'
}
];
Position.find(
{
$or: [
{ name: { $regex: '.*' + req.params.keyword + '.*', $options: 'i' } },
{ description: { $regex: '.*' + req.params.keyword + '.*', $options: 'i' } }
]
},
{},
{
skip: (result.currentPage - 1) * result.pageSize,
limit: result.pageSize,
sort: 'name'
})
.exec()
.populate(populateQuery)
.then(function(doc) {
result.records = doc;
});
Position.count(
{
$or: [
{ name: { $regex: '.*' + req.params.keyword + '.*', $options: 'i' } },
{ description: { $regex: '.*' + req.params.keyword + '.*', $options: 'i' } }
]
})
.exec()
.then(function(doc) {
result.count = doc;
result.totalPages = Math.ceil(result.count / result.pageSize);
})
.then(function() {
var endTime = new Date();
result.execTime = endTime - startTime;
return res.json(200, result);
});
};
My problem is when I run the first query with the populate method (as is shown), it doesn't work. I take away the populate and it works. Is it true that the populate method will break the promise? If so, are there better ways to achieve what I want?
It's been a while since you asked, but this might still help others so here we go:
According to the docs, .populate() doesn't return a promise. For that to happen you should chain .execPopulate().
Alternatively, you can put .populate() before .exec(). The latter will terminate the query builder interface and return a promise for you.