I'm building a little web-app to practice and learn Vue.js and working with APIs.
For a particular problem I want to solve, I would like to return the object that has the matching uuid that I request.
With my current knowledge, I understand I can do this by implementing some sorts and loops logic.
However I'm still new with JS, Vue.js, so I'm not sure if there is a better way to approach this.
Is there a built in function, or some form of "best practice" to approach this?
methods: {
fetchItem(row) {
// row.target_uuid -- this is the UUID I want
// this.$props.todoItems; -- this contains the json objects
// return this.$props.todoItems[i] where this.$props.todoItems[i]['uuid'] == row.target_uuid
},
This is a snippet of my $props.todoItems for context
[
{
"title": "Install Maris",
"uuid": "9ec9ea6b-0efc-4f6a-be2e-143be5748d3a",
"field_completed": "False"
},
{
"title": "Figure out why VS Code sucks",
"uuid": "85120da5-ee59-4947-a40f-648699365c73",
"field_completed": "False"
},
{
"title": "Start designing portfolio",
"uuid": "243c1960-7ade-4a68-9a74-0ccc4afa3e36",
"field_completed": "False"
},
{
"title": "Meal Prep",
"uuid": "85b64b18-9110-44d8-bd2d-8f818b0a810f",
"field_completed": "False"
},
{
"title": "Sharpen knives",
"uuid": "8a7ac5f6-8180-4f20-b886-628fd3bcfc85",
"field_completed": "False"
},
{
"title": "Set up SSH keys",
"uuid": "f879c441-8c05-4f24-9226-125c62576297",
"field_completed": "False"
}
]
If you know you're looking for exactly one item (or the first item that matches) you should take a closer look at the Array.find() method provided by JS. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
Also take a look at all the other methods the Array prototype provides, most of them are fairly descriptive and solve most of the basic problems you'll encounter.
To use this in your Vue app you can either have a method that returns your todo based on a provided uid like this
todoByUid(uidToFind) {
return this.todos.find(todo => todo.uid == uidToFind)
}
If you only care about a currently selected item a computed value as Jacob mentioned is the way to go:
computed() {
selectedTodo() {
return this.todos.find(todo => todo.uid == this.selectedUid)
}
}
Related
In our application we use IEPs (it's short for Incident Extended Property) where we store data in. In most cases we store one value in it like 'Yes' or 'Amsterdam' and we have to code to check these.
But we also have ComplexIEPS which store Javascript objects, so no JSON, an example:
[
{
"anotherField": true,
"location": "xxx",
"post": "XXX",
"description": "Whatever",
"transport": "1234"
}
]
Is there a way to completely check this complexIEP? The code we use the simple IEPs:
cy.get('.className').contains('td', iepName)
.parent()
.children()
.should(($children) => {
const value = $children[1].innerHTML;
expect(value).to.include(` ${iepValue}`);
});
});
Here's my situation, I have a JSON that looks somewhat like this:
{
"items": [{
"type": "condition",
"data": {
"type": "comparison",
"value1": {
"source": "MyType1",
"component": "Attribute1"
},
"value2": {
"source": "MyType2",
"component": "Attribute2"
},
"operator": "gt"
}
},
{
"type": "then",
"data": {
"result": "failed",
"message": "value1 is too high"
}
}
]
}
and would want it to translate to:
if (MyType1.Attribute1 > MyType2.Attribute2) {
result = "failed";
console.log("value1 is too high");
}
Now my problem is, I don't know how I would translate the entries of value1 and value2 to actual code, or rather, how I could access the Object MyType1(maybe through something like getAttribute("MyType1")).
Since I am going to have a whole bunch of sources which each have different components, I cant really write a huge dictionary. Or I would like to avoid it.
The goal is to allow creating if - then - statements via some interactive UI, and I figured it'd be best to save that code as .json files. (Think rule management system).
So, TL,DR, How would I access a Class Attribute this.MyType, if I only have a String MyType to go from? And how would I access the value this.MyType.MyValue, if I get another String MyValue?
Thanks in advance.
Edit:
I'd really like to avoid using eval, for obvious reasons. And if I have to - I guess I would need to create Dictionaries for possible JSON Values, to validate the input?
You need some kind of parser. At first we need some way to store variables and maybe flags:
const variables = {};
var in = false;
Then we go through the code and execute it:
for(const command of items){
switch( command.type ){
case "condition":
//...
case "then":
//...
}
}
To access a variable we can simply do
var current = variables[ identifier ];
To store its the other way round:
variables[ identifier ] = current;
(Sorry if the title doesn't make much sense, I had no idea how to word the question right and that was the best way I could think of)
So I have an API (the steam API) that returns something like this:
{
"playerstats": {
"steamID": "76561197962837077",
"gameName": "ValveTestApp260",
"stats": [
{
"name": "total_kills",
"value": 3255
},
{
"name": "total_deaths",
"value": 4816
},
...
{
"name": "total_shots_hit",
"value": 3642
}
{
"name": "total_shots_fired",
"value": 4572
}
...
],
}
}
So I want to get the value for total_shots_hit and total_shots_fired, but it's in a different order for different people so I was wondering how I would get the value depending on the name in each of the sections? The way I'm doing it right now is by doing statsResponse.playerstats.stats[39].value, but it's not in the 39th spot for everyone, so I was wondering how I would get it? I'm using JavaScript/jQuery if that helps at all.
Any help is appreciated :)
EDIT: Figured out how to do it, I used a for loop to go through every response until it found the item I wanted, then used that number to find the same value
You can use Array.find() to find an object in an array by one of its properties.
var o = stats.find(function(item) {
return item.name === 'total_shots_hit';
}
console.log(o.value) // value property, e.g. 3642
I use Meteor to query a mongo collection. It has for example the following entry:
{
"_id": "uCfwxKXyZygcWQeiS",
"gameType": "foobar",
"state": "starting",
"hidden": {
"correctAnswer": "secret",
"someOtherStuff": "foobar"
},
"personal": {
"Y73uBhuDq2Bhk4d8W": {
"givenAnswer": "another secret",
},
"hQphob8s92gbEMXbY": {
"givenAnswer": "i have no clue"
}
}
}
What I am trying to do now is:
don't return the values behind "hidden"
from the "personal" embedded document only return the values for the asking user
In code it would look something like this:
Meteor.publish('game', function() {
this.related(function(user) {
var fields = {};
fields.hidden = 0;
fields.personal = 0;
fields['personal.' + this.userId] = 1;
return Games.find({}, {fields: fields});
}, Meteor.users.find(this.userId, {fields: {'profile.gameId': 1}}));
}
Obviously this won't work, because MongoDB won't allow mixed includes and excludes. On the other hand, I cannot switch to "specify only the included fields", because they can vary from gameType to gameType and it would become a large list.
I really hope that you can help me out of this. What can I do to solve the problem?
Typical example of where to use the directly controlled publication features (the this.added/removed/changed methods).
See the second example block a bit down the page at http://docs.meteor.com/api/pubsub.html#Meteor-publish.
With this pattern you get complete control of when and what to publish.
There is an nested object with certain properties which i don't want to be watched. It could be a pattern of properties starting with perhaps "_".
Here's a sample structure.
$scope.ObjectToBeWatched = {
"company": {
"ts": {
"_msg": {"nm":""},
"status": "success"
},
"ids": [
"000000010",
"000000011"
]
},
"_f": [
{
"code": "TY_IO",
"status": "fail"
}
]
}
Standard deep watch:
$scope.$watch("ObjectToBeWatched",function(newObj,oldObj){
},true);
Right now the watch is firing for any any change in any properties which is expected. So in above case any changes to properties
_msg, _f
should not fire.
Thanks for help.
You can try something like this:
$scope.$watch(function($scope) {
return $scope.listOfBigObjects.
map(function(bigObject) {
return bigObject.foo.
fieldICareAbout;
});
}, myHandler, true);
This grabs only the props you care about from the objects in an array. You can use an expression to check for certain field types inside the object map. If you don't have an array just skip that part.
Underscore has tons of functional methods to help w/ this as well if 'map' isn't exactly what you need to return fields you care about.