How to transform an array into a Component in CSML? - arrays

I have created a chatbot in CSML and I'm trying to find a way to integrate an array into a carousel.
My problem is that I can't loop inside the Carousel component.
mainCourse:
// my array
do menu = [
{ "name": "Margarita", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/02-margherita.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Marinara", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/01-marinara.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Quatro Fromaggi", "type":"pizza", "image":"https://i2.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/08-quattro-formaggi.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Calzone", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/14-calzone-tav.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Vegetariana", "type":"pizza", "image":"https://i2.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/13-vegetariana.png?zoom=2&resize=150%2C150&ssl=1" }
...
]
say "Thank you, I also love {{firstChoice}} 😍"
say "Which pizza would you like? 🍕"
say Carousel(
cards = [
// Where I'd like to include my array
]
)
thanks!

You need to iterate through the Array in order to have a component-compatible list of Card() components, here is the doc for reference: https://docs.csml.dev/studio/channels/slack/message-formats#carousel-card
So the code below would work:
start:
do menu = [
{ "name": "Margarita", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/02-margherita.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Marinara", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/01-marinara.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Quatro Fromaggi", "type":"pizza", "image":"https://i2.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/08-quattro-formaggi.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Diavola", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/11-diavola.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Calzone", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/14-calzone-tav.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Vegetariana", "type":"pizza", "image":"https://i2.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/13-vegetariana.png?zoom=2&resize=150%2C150&ssl=1" }
]
// You create an empty array
do cards = []
// You loop through your array and foreach entry you create a Card() component
// that you add to the array that'll you'll later use for the Carousel() component
foreach (v, i) in menu {
do newCard = Card(
title=v.name,
subtitle=v.type,
image_url=v.image,
buttons=[Button("Choose")]
)
do cards.push(newCard)
}
say Carousel(cards=cards)
goto end

Related

I can't find Strapi nested components in my GraphQL query

I'm very new to Strapi and GraphQL. I have created a nested data structure in Strapi that looks like this (this is a Navbar component). But when I go to GraphQL, my query looks like this.
So if this is the query:
query MyQuery {
allStrapiNavbar {
nodes {
Category {
Name
children {
id
}
}
}
}
}
This is the result:
{
"data": {
"allStrapiNavbar": {
"nodes": [
{
"Category": [
{
"Name": "Community",
"children": []
},
{
"Name": "Modules",
"children": []
},
{
"Name": "Company",
"children": []
},
{
"Name": "Pricing",
"children": []
}
]
}
]
}
},
"extensions": {}
}
This means the data is being fetched correctly. However, I can't find the nested component 'Item' inside 'Category'.
This is what my gatsby-config.ts file looks like currently:
{
resolve: "gatsby-source-strapi",
options: {
apiURL: process.env.STRAPI_API_URL || "http://localhost:1337",
queryLimit: 1000, // Default to 100
accessToken: process.env.STRAPI_TOKEN,
collectionTypes:[ 'faq', 'doc', 'docCategory', 'faqCategory', 'release', 'userType' ],
// contentTypes: [ 'Faq' ],
singleTypes: [ 'navbar' ],
},
I don't know why the data isn't showing up in GraphQL. I looked inside the children for Category, but the reality is that it should be at the same level as Name, which shows up.
Do I need to modify the gatsby-config file, or am I missing something else?
Edit: I am using the gatsby-source-strapi plugin.

How to filter JSON data based on another JSON data in typescript

I have 2 JSON Data 1. Payers 2. Rules. I need to filter Payers JSON data based on PayerId from Rules JSON data.
{
"Payers": [
{
"payerId": "12345",
"name": "Test Payer1"
},
{
"payerId": "23456",
"name": "Test Payer2",
},
{
"payerId": "34567",
"name": "Test Payer3"
}}
Rules JSON file
{
"Rules": [
{
"actions": {
"canCopyRule": true
},
"RuleId": 123,
"description": "Test Rule",
"isDisabled": false,
"Criteria": [
{
"autoSecondaryCriteriaId": 8888,
"criteriaType": { "code": "primaryPayer", "value": "Primary Payer" },
"payerId": ["12345", "34567"]
}
]
}
}]}
I need to filter Payers JSON data based on Rules JSON data if PayerID matches
I need output like below
{
"Payers": [
{
"payerId": "12345",
"name": "Test Payer1"
},
{
"payerId": "34567",
"name": "Test Payer3"
}
}
How to filter?
You can use Array.filter like that (based on your data structure):
const filteredPayers = payersObj.Payers.filter((p) => rulesObj.Rules[0].Criteria[0].payerId.includes(p.payerId));
I can't figure out why your Rules json looks like this, I guess you have multiple rules. If so, you will need to iterate over each rule and invoke includes. Same for Criteria.
Code will check each rule and each critirias
and will return payers if payerId found in any of the given rules of any criteria
const payers = {
"Payers": [
{
"payerId": "12345",
"name": "Test Payer1"
},
{
"payerId": "23456",
"name": "Test Payer2",
},
{
"payerId": "34567",
"name": "Test Payer3"
}]}
const rules = {
"Rules": [
{
"actions": {
"canCopyRule": true
},
"RuleId": 123,
"description": "Test Rule",
"isDisabled": false,
"Criteria": [
{
"autoSecondaryCriteriaId": 8888,
"criteriaType": { "code": "primaryPayer", "value": "Primary Payer" },
"payerId": ["12345", "34567"]
}
]
}
]
}
const data = payers.Payers.filter(payer => rules.Rules.findIndex(rule => rule.Criteria.findIndex(criteria => criteria.payerId.includes(payer.payerId)) != -1) !== -1)
console.log(data)

Extended dimensions set doesn't return data

I want to pull a number of metrics from Google Analytics API with "Traffic Sources", "Geo Network" and "Audience" dimensions.
So I create the following request. GA Dimensions & Metrics Explorer shows that these metrics & dimensions are compatible. But for some reason, this request returns zero values:
{
"reportRequests": [
{
"viewId": "xxxxxxxx",
"dateRanges": [
{
"startDate": "2020-03-01",
"endDate": "2020-03-11"
}
],
"metrics": [
{
"expression": "ga:sessions"
},
{
"expression": "ga:newUsers"
},
{
"expression": "ga:transactions"
},
{
"expression": "ga:transactionRevenue"
}
],
"dimensions": [
{
"name": "ga:date"
},
{
"name": "ga:campaign"
},
{
"name": "ga:sourceMedium"
},
{
"name": "ga:country"
},
{
"name": "ga:region"
},
{
"name": "ga:city"
},
{
"name": "ga:userAgeBracket"
},
{
"name": "ga:userGender"
},
{
"name": "ga:interestInMarketCategory"
}
]
}
]
}
Although restricted dimensions set shows that data exists:
"dimensions": [
{
"name": "ga:date"
},
{
"name": "ga:campaign"
},
{
"name": "ga:sourceMedium"
},
{
"name": "ga:country"
},
{
"name": "ga:region"
},
{
"name": "ga:city"
}
Why extended dimensions set that shown in 1st example doesn't return data?
Thanks in advance!
Eugene
May be GA doesnot have any information about the user age, gender and in-Market segment (ga:interestInMarketCategory). So when you add these dimensions with others, API returns data for the combination of specified dimensions.
So let's say there are 20 sessions from combination of city = x and region = y. But when you add gender to it, no combination can be made (e.g. city = x and region = y and gender = ?), hence API will return zero response.

Find custom point coordinates with Forge

I work with Autodesk Forge (node.js, javascript (worked with it a little), React (completely new !)).
I have a rectangle 3D object. At each corner is a point with real world coordinates (lat, lon, z).
These coordinates can be displayed with the property panel in the viewer.
I want to access them from the code, but I cannot find them anywhere.
At first, I thought they would be at :
window.NOP_VIEWER.model.getData().metadata
but nothing !
Here is a picture of what I can see in the viewer. Since I can see them in the property panel, I should be able to access them !
I tried to use this :
window.NOP_VIEWER.model.getBulkProperties('1',
function(properties){console.log(properties);},
function(error){console.log(error);})
It returns an amazingly long list of field names (if think that's it).
When I try to put it in a variable it returns 'undefined'. So I cannot access what is inside anyway.
Also tried getProperties() but I think I did not write it in the right way, it doesn't work either.
I also tried som GET request to find the object properties, but all I got was this :
{
"data": {
"type": "objects",
"objects": [
{
"objectid": 1,
"name": "Model",
"objects": [
{
"objectid": 2691,
"name": "Sols",
"objects": [
{
"objectid": 2692,
"name": "Sol",
"objects": [
{
"objectid": 2693,
"name": "Dalle en béton - 250 mm",
"objects": [
{
"objectid": 2694,
"name": "Sol [236041]"
}
]
}
]
}
]
},
{
"objectid": 2711,
"name": "Modèles génériques",
"objects": [
{
"objectid": 2712,
"name": "Point_Georeferencement",
"objects": [
{
"objectid": 2713,
"name": "Point_Georeferencement",
"objects": [
{
"objectid": 2714,
"name": "Point_Georeferencement [236831]"
},
{
"objectid": 2715,
"name": "Point_Georeferencement [236836]"
},
{
"objectid": 2716,
"name": "Point_Georeferencement [236843]"
},
{
"objectid": 2717,
"name": "Point_Georeferencement [236846]"
}
]
}
]
}
]
}
]
}
]
}
}
But I cannot find a way to access the points' names or their values !
Can anyone help with this, please ?
NOP_VIEWER is a global variable to access the current Viewer. From that you can call:
.getProperties(): this requires 1 dbId, an easy way to try it is with:
NOP_VIEWER.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, function (e) {
e.dbIdArray.forEach(function (dbId) {
NOP_VIEWER.getProperty(dbId, function (props) {
console.log(props)
})
})
});
.model.getBulkProperties(): this received an array of elements and just return the properties you specify:
NOP_VIEWER.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, function (e) {
viewer.model.getBulkProperties(e.dbIdArray, ['RefX', 'RefY'], function (elements) {
elements.forEach(function(element){
console.log(element);
})
})
});
And you may also combine it with .search() (see here) or by enumerating leaf nodes.

graphQL: how to get an object from a list of objects, in a query

I am trying to use graphQL in a GatsbyJS project, and am unsure how I can pull a specific 'URL' object, from a list of three, within a 'recipeImages' object. Right now, I can only pull the recipeImages object, like this:
<img src={node.recipeImages}/>
but I want to be able to get to the three individual URL objects seen in this query:
{
"data": {
"allContentfulBlogPost": {
"edges": [
{
"node": {
"id": "c1Qz3hWuPuQEIIUkSos0MEO",
"postTitle": "Schwarzwälder Kirschtorte",
"postDate": "2018-01-30T00:00+01:00",
"slug": "schwarzwälder-kirschtorte",
"methodText": {
"childMarkdownRemark": {
"html": "<p>This is the method text</p>"
}
},
"recipeImages": [
{
"title": "imageOne",
"file": {
"url": "//images.contentful.com/62o0h4ehxjxr/kkc57vWLPaEakYueyYqC6/c61b4641797a2fcaf3476ef9a3a24db6/image.jpg"
}
},
{
"title": "imageTwo",
"file": {
"url": "//images.contentful.com/62o0h4ehxjxr/2ifxQEvnYwkaAe6e2YKISa/de2b6f62c4cac3b501fe76146b745790/image1.jpg"
}
},
{
"title": "imageThree",
"file": {
"url": "//images.contentful.com/62o0h4ehxjxr/17g7ZHqrEWIgcyuye08myG/6b55386a31db2dd319148795953da7a4/image2.jpg"
}
}
]
}
}
]
}
}
}
i got it:
<img src={recipeImages[0].responsiveResolution.src}/>

Resources