USe data from another object VueJs - javascript

i have quick question here.
I have my object with value:
data() {
return {
nation: {
CZ: require("../../../../../svg/czech-flag.svg"),
}
};
},
Then have API object (API is working fine, fyi)
doctor: {
region: "CZ"
}
I wanna do something like this (is not working of course):
<div v-html="nation.doctor.region></div>
I had method for this, it worked, but I think it can be easier to do that. Thanks a lot for any help

You can use something like nations[`${doctor.region}`]
Working code:
const data = {
nations: {
CZ: 'Czech'
}
}
const doctor = {
region: 'CZ'
}
console.log(data.nations[`${doctor.region}`])

Related

How do you create edgeless graphql element in Gatsby?

The title may be miss leading but I'm not really sure how do I ask this question correctly. Here is the problem: I'd like to query my own API(not created yet so I made placeholder data) for global settings which might change in the future and I will only need to rebuild the website instead of editing it manually, I want to create source node called CmsSettings and pass it to GraphQL (structure similar to site.siteMetadata) but I don't know how can I achieve that. What I achieved so far is to create a source node called allCmsSettings which has my data as an object in nodes array.
exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
const { createNode } = actions;
const myData = {
key: 123,
app_title: `The foo field of my node`,
...
}
const nodeContent = JSON.stringify(myData);
const nodeMeta = {
id: createNodeId(`my-data${ myData.key }`),
parent: null,
children: [],
internal: {
type: `CmsSettings`,
mediaType: `text/html`,
content: nodeContent,
contentDigest: createContentDigest(myData)
}
}
const node = Object.assign({}, myData, nodeMeta);
createNode(node);
}
Here is the query used to get the data of the source node
allCmsSettings {
edges {
node {
id
app_title
...
}
}
}
Creating a query results in an array of results(which I know is the result of creating source nodes) but I'd like to create that source so that I could query it like this and:
CmsSettings {
app_title
app_keywords
app_descriptions
app_logo_path
brand_name
...
}
You get the point. I was browsing the gatsby node API but I can't find how to achieve this.
Thank you for your help
Nevermind, the answer is pretty simple, if you are new to gatsby just like me the sourceNodes export creates 2 graphql fields for you with all prefix and camel case source node. The thing that I wanted to make is already there and is queryable with
cmsSettings {
app_title
app_keywords
app_descriptions
app_logo_path
brand_name
...
}
Notice the lowercase letter even though it was declared as CmsSettings. It seems that gatsby really does some magic under the hood.

JavaScript Deeply nested array filtering methods

I am experimenting with deeply nested array filtering with JavaScript. I have created a solution which works but would anyone be able to demonstrate any alternative methods (faster or more efficient) how to accomplish the same task provided with the code below. function carReturn()
{
return myCars.filter(myCars => myCars.colour.includes("Red"));
} The scenario and the purpose of the code is to filter out the cars, which have color "Red" attached to them. Below I have attached the full demonstration of the code. Thanks for any help or recommendations.
<p>Car List.</p>
<p id="show"></p>
<p id="show1"></p>
<script>
const myCars = [
{ name: "BMW",colour: ["White","Red","Black"] },
{ name: "AUDI",colour: ["Yellow","Silver"] },
{ name: "VW",colour: ["Purple","Gold"] },
{ name: "NISSAN",colour: ["White","Black"] },
{ name: "SUZUKI",colour: ["Red"] },
{ name: "Lada",colour: ["Gray","Red"] },
];
function carReturn()
{
return myCars.filter(myCars => myCars.colour.includes("Red"));
}
var jol = carReturn();
document.getElementById("show").innerHTML += jol;
console.log(carReturn('Red'));
</script>
PS the innerHTML does not work but the functionality works within console. The posts used for reference has been: JavaScript filtering Filtering an array with a deeply nested array in JS

VueJs insert into nested list

I want to let the user create the structure of my website. For example, I have buildings and rooms. The user must be able to create a building and subsequently insert rooms into it. However, what I tried to do seems not to achieve it:
JSFiddle of what I have done so far.
js
new Vue({
el: '#vue-app',
data: {
buildings: []
},
computed: {
buildingCount() {
return this.buildings.length
},
getBuildingRoomsLength(section) {
return this.buildings.rooms.length
}
},
methods: {
addNewRoomToBuilding(buildingId, newRoom) {
if(newRoom !== undefined) { this.buildings[parseInt(buildingId)-1].rooms.push(newRoom.title)
console.log(this.buildings[parseInt(buildingId)-1])
}
},
addNewBuilding() {
this.buildings.push({
id: this.buildings.length+1,
rooms: []
})
},
deleteTodo(todo) {
this.todos.$remove(todo)
}
}
});
I am not sure how to make it work. A couple of the things I have noticed is that the room model now is same for all buildings and I have to change it according to the buildingId, however, I can't figure it out yet. Could you please assist me how to do this.
Make your model unique for each item in the buildings array by appending the building id to the end of the name.
So the model name becomes v-model="newRoom[building.id]"
And pass the same into your method addNewRoomToBuilding(building.id, newRoom[building.id])

Magento filters SOAP v2 with Node JS / soap package

I am trying to use the filter for Magento SOAP v2 (Magento 1) but my code doesn't seem to work. I tried several ways of building to object with arrays but none of them seems to affect the returning results.
Can anybody explain me the right way to do that?
What I want to do is pull in all invoices but for example with a specific invoice ID or date.
Link to official Magento documentation:
http://devdocs.magento.com/guides/m1x/api/soap/sales/salesOrderInvoice/sales_order_invoice.list.html
This is my current code:
const filter = {
'complex_filter': [
{
key: 'invoice_id',
value: {
key: 'eq',
value: '94'
}
}
]
};
client.salesOrderInvoiceList(res, filter, function(error, result) {
console.log(result.result)
});
In the above example I only tried to use the filter for the invoice ID but I also tried with the date but that didn't work out either.
Thanks in advance.
For me, the easiest solution was to just map exactly to what the XML document would look like if this was done by PHP SoapClient.
const args = {
sessionId: session_id,
storeView: store_id,
filters: {
complex_filter: {
complexObjectArray: {
key: 'created_at',
value: {
key: 'from',
value: '2017-01-01'
}
}
}
}
};
client.catalogProductList(args, (err, result) => { ... }

firebase $add() .push() .set()

I am using firebase, and angularfire.
there are so many ways to do CRUD with the Firebase Api
actually, I still don't get what is specific difference for using
$add with $firebaseArray
.push() method
.set() method
I think they are technically same, I prefer to use .set method() without knowing the exact reason, why I'd using that. is there any specific reason to not use it? what is exactly $firebaseArray did? if we could just declare basic reference variable.
in this case:
var usersRef = Ref.child('users');
$scope.createUser = function() {
$scope.userRef.child($id).set({
name: name
});
};
or
$scope.data = $firebaseArray(Ref.child('users'));
$scope.createUser = function() {
$scope.data.child($id).$add({
name: name
});
};
thank you.
If I have the following data tree in Firebase:
{
users:
{
key: { name:"bob" }
}
}
When I do an $add, I will create a new item in the tree
$scope.data.child('users').$add({
name: name
});
Since $add uses the Push method in Firebase, new random Key will be used when pushing data to the child.
{
users:
{[
key: { name:"bob" },
key2: { name:"name" }
]}
}
If I do a set on the same Users object, I will overwrite the data that is already there. So, in your example, without specifying a key, you will overwrite the entire user object.
$scope.userRef.child('users').set({
name: name
});
};
This will result with this data
{
users:
{
name: "name"
}
}
This happens because any null values you pass to the Set method will delete any data that was originally there.
Passing null to set() will remove the data at the specified location.
https://www.firebase.com/docs/web/api/firebase/set.html

Categories