I am trying to access nested YML data in a Twig template. My YML data is structured like this:
card_default:
card_title: 'Card Title'
card_header: 'This is the card header on a multi-part card'
card_text: "Some quick example text to build on the card title and make up the bulk of the card's content."
card_link: 'https://github.com/phase2/particle'
card_background: primary
card_image_location: top
card_footer: "This is the card footer"
text_color: uk-dark
card_body: "This is some card body text"
card_style: default
card_image:
card_more_stuff in here....
... and then I call some of the data in a Twig template like this:
{% include '#molecules/card/_card.twig' with {
card_default: {
card_title: card_title,
card_text: card_text,
card_background: 'primary',
card_link: card_link,
card_link_text: card_link_text,
card_link_class: card_link_class,
}
} only %}
But that does not seem to work. I have a feeling the way I am trying to do this is not quite right but a search didn't give me any more insight. Essentially I want to access the values within card_default.
I can see all the data in the array if I dump with {{ dump(card_default) }}
array(14) { ["card_title"]=> string(10) "Card Title" ["card_header"]=> string(44) "This is the card header on a multi-part card" ["card_text"]=> string(94) "Some quick example text to build on the card title and make up the bulk of the card's content." ["card_link"]=> string(34) "https://github.com/phase2/particle" ["card_link_text"]=> string(9) "Read more" ["card_link_class"]=> string(27) "uk-button uk-button-default" ["card_background"]=> string(7) "primary" ["card_width"]=> int(25) ["card_image_location"]=> string(3) "top" ["card_footer"]=> string(23) "This is the card footer" ["list"]=> array(2) { ["list_flush"]=> bool(true) ["items"]=> array(3) { [0]=> array(1) { ["item_text"]=> string(15) "Cras justo odio" } [1]=> array(1) { ["item_text"]=> string(23) "Dapibus ac facilisis in" } [2]=> array(1) { ["item_text"]=> string(18) "Vestibulum at eros" } } } ["text_color"]=> string(7) "uk-dark" ["card_body"]=> string(27) "This is some card body text" ["card_style"]=> string(7) "default" }
The data is in the variable card_default, so it should be e.g. card_default.card_title
but instead of creating a whole new object you just could do this in 2 ways:
YAML
foo:
bar: 'foobar'
number: 42
main.twig
{% include "full.twig" with { 'foo' : foo } only %}
{% include "slim.twig" with foo only %}
full.twig
{{ foo.bar }}
slim.twig
{{ number }}
I figured this out, I just needed to map the nested items properly like so:
{% include '#molecules/card/_card.twig' with {
card_title: card_default.card_title,
card_text: card_default.card_text,
card_background: 'primary',
card_link: card_default.card_link,
card_link_text: card_default.card_link_text,
card_link_class: card_default.card_link_class,
} %}
In the above code, card_default is mapped in the variable portion of the array, i.e., after the colon. card_link: card_default.card_link,
Related
I'm trying to add a bit of grammar for the Liquid language to my custom extension. Here is the bit of code in question:
{% if type == "record"
or type == "record2"
%}
records
{% else %}
no_records
{% endif %}
Then I have the following rule in my language repository:
"liquid_tags": {
"name": "source.qqql.liquid",
"begin": "\\{(\\%)",
"end": "(\\%)\\}",
"beginCaptures": {
"1": {"name": "source.qqql.liquid.tag"}
},
"endCaptures": {
"1": {"name": "source.qqql.liquid.tag"}
}
},
The problem is that the %} of the if statement is not captured. Only the other closing tags are captured because they're on the same line.
In Vue2 I got Two el-select.
One is for selecting count,the other one is for name,
when you select the name it will save both name and price to data
<el-select
v-model="item"
value-key="name"
>
<el-option
v-for="(option,index) in OptionsArr"
:key="index"
:label="option.name"
:value="option"
>
{{option.name}}
</el-option>
OptionsArr
[
{
name: "apple" ,
price: 200
},
{
name: "orange" ,
price: 150
}
]
initial data
[
{
name:"",
price:0,
count:0
}
]
data when select apple
[
{
name:"apple",
price:200,
count:0
}
]
And now I want to let user create their own option so I add filterable, allow-create and default-first-option to this el-select
<el-select
v-model="item"
value-key="name"
filterable
allow-create
default-first-option
Now when I input "NewOption" to create an option, it just add a string to the data array, the data becomes:
[
"NewOption"
]
and I want to add a object to the array like this:
[
{
name:"NewOption",
price:0,
count:0
}
]
I tried #change to put an object to the array, but in that way the other el-select which bind the count of the data item cannot work.
<el-select
v-model="item.count"
I have two arrays. I am trying to pluck out a property from one array and use it to find the value of another property in the other way. How to do this? Let me explain:
I have an array of objects that looks like so:
languageCodes:
{
"code1234char3": "mdr",
"name": "Mandar",
},
{
"code1234char3": "man",
"name": "Mandingo",
},
{
// etc...
},
I have another array of objects that looks like so:
divisionLanguages:
[
{
p_uID: 1,
nameLang3Char: 'mdr',
},
{
p_uID: 2,
nameLang3Char: 'man'
},
{
// etc..
}
]
I have a Vue template with an unordered list like so:
<ul v-for="x in divisionLanguages" :key="x.p_uID">
<li>Name: FOO
<li>Language: {{x.nameLang3Char}} - XXX</li> <--how to get 'name' value from 'languageCodes' and place here?
</ul>
Expected output should be:
Name: FOO
Language: mdr - Mandar
Name: BAR
Language: man - Mandingo
I tried to do something like in Vue SFC template (but did not work):
<li>Language: {{ languageName(x.nameLanguage3Char) }}</li>
...
methods: {
languageName(nameLanguage3Char) {
const name = this.divisionLanguages.filter(x => x.code6392char3 === nameLanguage3Char)
return name.name
}
I hope this makes sense of what I am trying to do.
Update: Thanks to #kellen in the comments, I change from filte() to find() like so:
languageName(nameLang3Char) {
const languageName = this.languageCodes.find(
x => x.code1234char3 == nameLang3Char
)
return languageName
},
and in I did:
<li>Language: {{ languageName(x.nameLang3Char).name }}</li>
and it works...but I get error in console:
Error in render: "TypeError: Cannot read property 'name' of undefined"
Have you tried combining these arrays before rendering them? If you were able to combine both objects before creating that list, that would make your life easier. Another thing I noticed is you're using filter, when find might be a better option to return a single value rather than an array. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
I am sending a get request to a api where the values are inside a array.
I want to get multiple values simultaneously.
How can I do this other than using index to get specific key values?
For example below, I want every result of results.data.message.body.artist_list.[4].artist.artist_name but don't want to have to use index [4].
methods: {
fetchMusic(e) {
if (e.key === 'Enter') {
// eslint-disable-next-line no-undef
axios.get(' ... ', {
headers: {
'Access-Control-Allow-Origin': '*',
},
})
.then((response) => response).then(this.setResults);
}
},
setResults(results) {
this.artists = results.data.message.body.artist_list.[4].artist.artist_name;
this.artistname = results.data.message.body.artist_list[0].artist.artist_name;
},
},
};
</script>
Thanks for any inputs on my code
Here is an example on how to fetch an API and display it's info by looping on the items: https://codesandbox.io/s/lucid-currying-nsoo3?file=/src/App.vue
Basically, get the results (an array so), then loop on each iteration of this array and display the wished data accordingly with something like
<div v-for="result in fetchedResults" :key="result.id">
<p>
<span>Name: {{ result.username }}</span> ~
<span>email: {{ result.email }}</span>
</p>
</div>
Btw, don't forget the key, it's important. More info here about this point.
Official documentation's examples on how to loop on an array.
How do I get an element's inner HTML from an elementId using browser object?
Is there something like elementIdHtml available in the WebdriverIO API?
The getHTML link for v4 is returning 403 Forbidden.
my goal is that i need to get all text inside all a._3cnp from an elementId
example html
<div class="container">
<a class="_3cnp">first link</a>
<a class="_3cnp">second link</a>
<a class="_3cnp">third link</a>
</div>
need to convert that to ["first link", "second link", ..]
i have the .container elementId already
this is what i did
.then(() => browser.elementIdElements(someElementId, 'a._3cnp'))
.then(buttonElem => {
console.log('->', buttonElem)
console.log('-->', buttonElem.getHTML)
buttonElem.getHTML().then(x => console.log('---->', x))
return buttonElem.value
})
result of elementIdElements is
buttonElem
{ sessionId: '2e2f144c8895a03da1b8df92f4613a33',
status: 0,
value:
[ { ELEMENT: '0.6603119466268468-24',
'element-6066-11e4-a52e-4f735466cecf': '0.6603119466268468-24' } ],
selector: 'a._3cnp' }
but buttonElem.getHTML is undefined
im using webdriverio standalone from botium-webdriverio-connector
LE:
Change your code accordingly to the following:
.then(() => browser.elementIdElements(someElementId, 'a._3cnp'))
.then(buttonElem => {
// buttonElem's 'value' will contain a list of all the matching elements
// thus, you have to call getHTML() on each item from 'value'
// the following will return the HTML of the first matching element
console.log('\nPrint element HTML: ' + buttonElem.value[0].getHTML());
return buttonElem.value[0].getHTML();
})
A better approach would be to loop between them & print the HTML:
.then(() => browser.elementIdElements(someElementId, 'a._3cnp'))
.value.forEach(buttonElem => {
console.log('\nPrint element HTML: ' + buttonElem.getHTML());
return buttonElem.getHTML();
})
The .getHTML() property is scoped to all the ELEMENT objects. For the sake of more didactical approach, I'm going to consider the task to be manipulating the HTML code found in a series of list items (<li>), from am unordered list (<ul>).
So you can do the following:
browser.getHTML('ul.ourList li.ourListItems') (this will return a list of all the <li>'s HTML code)
browser.element('ul.ourList li.ourListItems').getHTML() (this will return the first <li>'s HTML code)
$('ul.ourList li.ourListItems').getHTML() (this is the equivalent of the command above, only a relaxed version)
If you need to iterate through all the <li>s & get the HTML, do this:
let locator = 'ul.ourList li.ourListItems';
browser.elements(locator).value.forEach(elem => {
let elemHTML = elem.getHTML();
console.log( JSON.stringify(elemHTML) );
elemHTML.doSomethingWithIt();
})
where, elem will is an object with the following format:
{ ELEMENT: '0.285350058261731-1',
'element-6066-11e4-a52e-4f735466cecf': '0.285350058261731-1',
selector: 'ul li.fw-item.fz-16.lh-36.pos-r',
value: { ELEMENT: '0.285350058261731-1' },
index: 0
}