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",
}
]
}
Related
This is the array I am iterating through:
[
{
"Categories": [
{
"Name": "Program",
"Description": "This is a program",
"Errors": [
{
"Name": "Program_not_found",
"Value": 1,
"Description": "There is an error in this program."
}
]
},
{
"Name": "ProgramTwo",
"Description": "This is programTwo.",
"Errors": [
{
"Name": "ProgramTwo is not found",
"Value": 1
},
{
"Name": "ProgramTwo is missing data",
"Value": 2
}
]
}
]
}
]
In another file, I am iterating through this data and getting a red squiggle under map here:
{Errors.map(({Name, Value, Description}, key)
My code compiles and it shows the information correctly. I don't understand why the map function has a red squiggle under it if the code is compiling. When I hover over .map it doesn't give any information about the error. I am hoping someone can tell me why this is happening and how to fix it. This is what my component looks like:
const Categories = () => {
return (
<h1>Error Codes</h1>
<div className="error-codes">
{errorCodes.map(({Categories}, key) => (
<div key={key}>
{Categories.map(({Name, Description, Errors}, key) => (
<div key={key}>
<p>{Name}</p>
<p>{Description}</p>
{Errors.map(({Name, Value, Description}, key) => ( //Getting red squiggle under map here
<div key={key}>
<p>{Name}</p>
<p>{Value}</p>
<p>{Description}</p>
</div>
))}
</div>
))}
</div>
))}
</div>
)
}
export default Categories;
Just a guess but it might your linter, this linter wants to tell you that your line is too long.
Another guess is that you do not initialize Errors to be an array type. Since the type is not declared you linter wants to tell you this might not work, since Errors yould have any type.
I guess the issue was related to typescript. I was able to make the error go away by doing this: {(Errors as any []).map. I found this solution here: typescript, Array.prototype.map() has error 'expression is not callable' when the callee array is union with empty array
I am having issue to render a A variable Parent Attribute in React. For example
[
{
"IT2183": {
"Location": "US",
"Price": "$10",
"Name": "Chairs",
}
},
{
"IT5846": { // This Attribute is not Stable. It is Item ID which is different for every record.
"Location": "US",
"Price": "$20",
"Name": "Note Book",
}
}
]
{data.map((Item) => (
<div>
{attribute.Location} //As Attribute name in the Array is not stable. How to call it.
{attribute.Price}
{attribute.Name}
</div>
))}
In the above example The Item Id which is a parent attribute and the other objects are nested inside it. For every record it is different which is basically the Item ID. I don't know how to call it.
Thanks.
Use Object.values.
{data.map((Item) => (
<div>
{Object.values(Item)[0].Location}
{Object.values(Item)[0].Price}
{Object.values(Item)[0].Name}
</div>
))}
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
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.
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.