I am trying to get key and value from the below json but do not know how can i get it dynamically. for Angular 5 project.
Component:- here is the method which i want to use in my component.
public AnalyticsRes(_AnalyticsResponse) {
let ButtonAttribute = _AnalyticsResponse.ButtonAttribute.split(',');
let Button2Attribute = _AnalyticsResponse.Button2Attribute.split(',');
let key1 = ButtonAttribute['know-more1'];
let key2 = ButtonAttribute['know-more2'];
}
I am not sure if syntax is correct kind of newbie in angular
and here is the HTML CODE:-
<div class="grid-i" *ngIf="response.Button1.trim() || response.Button2.trim()">
<a class="xyz" *ngIf="response.Button1.trim()" (click)="ManagaeNavigation(response.ButtonLink);defaultClick();"
href="{{response.ButtonLink}}" [analytics-promo]='response.BtnAnalytic ? response.BtnAnalytic : null'>
<span class="buttonClass">{{response.ButtonText}}</span>
<span class="arrowIcon"></span>
</a>
<a class="xyz" *ngIf="response.Button2.trim()" href="{{response.Button2Link}}"
[attr.data-analytics-promo]='response.Btn2Analytic ? response.Btn2Analytic : null'>
<span class="buttonClass">{{response.Button2}}</span>
<span class="arrowIcon"></span>
</a>
</div>
here is my json :-
{
"Items": [
{
"Title": "Get it:",
"field_background_color": "is-bg-color-blue",
"ButtonLink": "/myUrl",
"ButtonText": "Visit Site",
"ButtonAnalytic": "link-analytics:first, link-analytics:second",
"ButtonTwoLink": "http://dummy.com",
"ButtonTwoText": "Know More",
"Button2Analytic": "know-more:first, know-more:second",
**"ButtonAttribute": "link-analytics:first, link-analytics:second",
"Button2Attribute": "know-more:first, know-more:second",**
"ButtonLinkAbsolute": "/abc",
"ButtonTwoLinkAbsolute": "http://dummy.com",
"Students": [
{
"title": "No",
"description": "Visit a Outlet dummy ",
},
{
"title": "No",
"description": "FREE free dummy.",
},
{
"title": "No",
"description": "Bring home",
}
]
}
],
"Status": "OK",
"StatusMessage": "SUCCESS"
}
Please help me to get key and value from :-
"ButtonAttribute": "link-analytics:first, link-analytics:second",
"Button2Attribute": "know-more:first, know-more:second",
as there are comma separated values from json and i have to get these into array in my component method, and want to use them in my html ?? here another challenge is that how can i bind multiple attribute to single lement in angular 6?? code plunkar will be more helpful. Thank You in advance.
Related
I have a carousel that auto populates data based on the context object in the payload preview in a tool I use called IAS. Each object has a product array with data inside of it. However if the product array is empty, I don't want the carousel to show at all. I tried to do the below in my Handlebars but even when there was product data, nothing showed :( .
{{#if products}}
{{#each products}}
<ul>
<li class="pr__item-wrapper">
<p class="pr__title">{{attributes.name.value}}</p>
</li>
</ul>
{{/each}}
{{/if}}
When product data is available, it is set up like this:
"products" : {
"attributes":{
"imageUrl": {
"value": "https://us.devirobot.com/dw/image/v2/BFXP_DEV/on/demandware.static/-/Sites-
master-catalog-irobot/default/dwb8b39e90/images/large/roomba/j755020_1.jpg?sw=1800"
},
"subheader": {
"value": null
},
"savingsAmount": {
"value": "100"
},
"name": {
"value": "iRobot Roomba j7+ Robot Vacuum, iRobot Roomba Replenishment Kit for j & i
Series & Replacement Dirt Disposal Bags, 3-Pack"
}
}
}
However, sometimes product data will return empty:
"products" : [
]
When it's empty, I don't want the unordered list to show. Does my if statement need to be modified, or do I need a boolean to return "true" if product data is coming in?
I'm working on a Blog on Gatsby JS, and I'm having an issue with the hyperlinks, and I'm not able to solve it.
I have the following query
const options = {
renderNode: {
"embedded-asset-block": (node) => {
const alt = node.data.target.fields.title['es']
const url = node.data.target.fields.file['es'].url
return <img alt={alt} src={url} />
},
[INLINES.HYPERLINK]: (node) => {
if(node.data.uri.indexOf('youtube.com') !== -1){
return(
<iframe width="560" height="315" src={node.data.uri} frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
)
}else{
return(
<a href={node.data.uri}>{node.content.value}</a>
)
}
}
}
}
From this query, I'm able to add assets and youtube videos. The issue is, that when I add a hyperlink, they are shown on the page but without text.
I only see the and not the text of this link.
I know the problem is here <a href={node.data.uri}>{node.content.value}</a>, but I'm not able to query the value.
This is GraphQL:
"body": {
"json": {
"nodeType": "document",
"data": {},
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Desde ",
"marks": [],
"data": {}
},
{
"nodeType": "hyperlink",
"content": [
{
"nodeType": "text",
"value": "FelixDigital",
"marks": [],
"data": {}
}
I need to query the value (FelixDigital)
Does anybody can help me?
Thank you so much,
Can you do a debugger inside this code?
It's hard to say.. but what I would check is the value of node. To me it looks like content is an array and inside the first item of the array you have value so to me it should look more like node.content[0].value.
I'm guessing you are using Contentful to pull your data into your blog using GraphQL. With Contentful you must use documentToReactComponents on JSON nodes (all rich text items). To obtain FelixDigital, you may want to do something instead like:
import { documentToReactComponents } from '#contentful/rich-text-react-renderer';
return(
<div>
{documentToReactComponents(videos.videoItem.videoLinks.json, options)}
</div>
)
This will then use the iframe you set up in const options and grab the src uri.
More info can be found here on rendering rich text with contentful
im having problem displaying this 2 loops in map. im using this map for the display but cant seem to display both of the loop.
Can i display them inside one loop only? like loop inside loop? Need help here tia
Choices Data
{testQuestionData.map(({choices}) => (
<div>{choices.map((tchoices)=>
<div>
{tchoices.testChoices}
</div>
)}
</div>
))}
Question Data
{testQuestionData.map(td=>(
<div className="col-md-12">
{td.question.testQuestion}
<label>Choices: {td.choicesDisplay}</label>
</div>
))}
{
"question": {
"testQuestion": "Earth is flat?",
},
"choices": [
{
"testChoices": "true",
"
}
{
"testChoices": "false",
"
}
]
}
You have badly formatted data. You have a random " after the test choices and no , between the choices.
Your data should look like this
{
"question": {
"testQuestion": "Earth is flat?",
},
"choices": [
{
"testChoices": "true",
},
{
"testChoices": "false",
}
]
}
I am working on angular-meteor.
I have a collection called grace in the following json format
grace: {
"mail-template": {
"new-status": {
"in-progress": {
"name": "demo1",
"description": "this is demo"
},
"pending": {
"name": "demo2",
"description": "this is another demo"
}
}
}
}
Here I am taking in-progress and pending as keys, name and description as values.
I want to list this inside my html using ng-repeat. But I didn't get any output and no errors found.
The code I used is
ng-repeat="(key,value) in demoCtrl.formSettings.grace['mail-template']['new-status']"
demoCtrl is my controller name and formSettings is name of helpers.
Can somebody clear my code?
I made this JSFiddle. It seems to work just fine. Make sure that you've got the correct data in the demoCtrl.formSettings.
JS
$scope.obj = {
grace: {
"mail-template": {
"new-status": {
"in-progress": {
"name": "demo1",
"description": "this is demo"
},
"pending": {
"name": "demo2",
"description": "this is another demo"
}
}
}
}
};
HTML
<div ng-repeat="(key,value) in obj.grace['mail-template']['new-status']">
{{key}}: {{value}}
</div>
I have some issues when im trying to reference inputs as arrays in React with Redux.
The code below maps one Panel per article in the array.
var articles = this.props.item.array.articles.map((article, index) => {
return <Panel key={index} header={'Article ' + index}>
<Input type='select' ref='id' label='Article' defaultValue={article.id} >
{articles}
</Input>
</Panel>
})
I'm trying to construct the refs so that they're in an array format, which does not seem to be possible at the moment. Array of references. #1899
I guess i could solve this by create some sort of ref="article["+counter+"][id]"
But that is a horrible solution, and i really don't want to go down that path.
The json array below would be my desired format for the refs:
"articles": [
{
"_joinData": {
"price": "100",
"quantity": "50"
},
"id": "05f54207-fb6f-40b5-820e-26059a803343"
},
{
"_joinData": {
"price": "200",
"quantity": "70"
},
"id": "05f54207-fb6f-40b5-820e-26059a803343"
}
]
The price & quantity index would be 2 more inputs.
Which i've decided to not include in the code example.
A nice solution to this problem would be very appreciated.
I believe you can iterate through this.refs like an array by using Object.keys.
Ex. Object.keys(this.refs).forEach(key => func(this.refs[key]))
To run func function for each reference.