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>
))}
Related
I have a file inside my react project, glossaryItems.json. The file looks like this:
{
"glossary": [
{
"name": "Constant",
"pageNumber": "33",
"definition": "A value that cannot change while the program is running.",
},
{
"name": "Debugging",
"pageNumber": "45",
"definition": "The process of finding and reducing the number of defects in a computer program.",
},
{
"name": "Algorithm",
"pageNumber": "4",
"definition": "A strictly defined finite sequence of well-defined statements that provides the solution to a problem."
}
]
}
I have another file, glossaryPage.tsx where I would like to display each glossary item within a tab. I am not sure how to access the json file in order to use it within the tsx file. I ended up changing the json file to a .ts file and exported it as so:
export const glossaryItems =
[
{
"glossary": [
{
"name": "Constant",
"pageNumber": "33",
"definition": "A value that cannot change while the program is running.",
},
{
"name": "Debugging",
"pageNumber": "45",
"definition": "The process of finding and reducing the number of defects in a computer program.",
},
{
"name": "Algorithm",
"pageNumber": "4",
"definition": "A strictly defined finite sequence of well-defined statements that provides the solution to a problem."
}
]
}
]
And then imported it inside glossaryPage.tsx. I want to be able to get the each part of the json separately to be able to use it inside the tabs. So I would have one tab labeled "Constant", a second tab, "Debugging", a third tab "Algorithm" and under each tab display that information such as pagenumber and definition that applies to that tab. I tried mapping over just the glossary but was unable to. I had to map over the glossaryItems.
const GlossaryPage = () => {
const terms = glossaryItems.map(({glossary}, key) => (
<div key={key}>
{glossary.map(({name, pageNumber, definition}, key) => (
<div key={key}>
<p>{name}</p>
</div>
))}
</div>
))
return (
<SprkTabsPanel
isDefaultActive
tabBtnChildren={terms[0]} //this is where the terms are printing out on the tab
tabBtnAnalyticsString="tab-1"
tabBtnDataId="tab-1"
>
</SprkTabsPanel>
I thought that by indexing the terms it would give me the term at that index but it gives me all of the terms. This is what it looks like:
How can I get the individual values of the object?
Any help would be greatly appreciated!
Importing JSON
In order to import a .json file, you simply need to enable support in your tsconfig.json file. Set "resolveJsonModule": true inside the compilerOptions property. Now you can import the data from the JSON file as a default import.
Docs: Resolve JSON Module
Mapping Your Object
I had a look at the documentation for the Spark Design system and it seems like you need to create a separate SprkTabsPanel component for each tab. All of the individual tab panels go inside of one SprkTabs component.
import React from "react";
import { SprkTabs, SprkTabsPanel } from "#sparkdesignsystem/spark-react";
import glossaryItems from "./glossaryItems.json";
const GlossaryPage = () => {
return (
<SprkTabs idString="glossary-tabs">
{glossaryItems.glossary.map(({ name, pageNumber, definition }, key) => (
<SprkTabsPanel tabBtnChildren={name} key={key}>
<p>{definition}</p>
<p>Page Number: {pageNumber}</p>
</SprkTabsPanel>
))}
</SprkTabs>
);
};
export default GlossaryPage;
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 trying to access the Options key value and get the Name and Value in my jsx but I am unable to use map on field.Options (when I hover over Options there is a question mark next to it).
I have tried field.Options[0].Name , field.Options["Name"], field.map().
I am just confused on how to access those values. An explanation would be appreciated.
I have an Array[] of Objects{} like below and I am trying to get the "Options" objects values.
{
"Type": "rating",
"Key": "professionalism",
"LabelBranding": "api#professionalism#placeholder",
"Label": "Professionalism:",
"Required": false,
"Options": [
{
"Name": "Smiley",
"Value": "0123456789"
}
]
},
I cant use a (for of ) in JSX. So I am wondering how to access this?
I think you were close there. Have you tried this?
{field.Options.map(block => (
<p key={block.Name}>{block.Value}</p>
))}
Since you want to iterate the field.Options array.
This was a case of not checking if the "Options" array was there. The 1st object that was coming back did not have the "Options" key value like the rest of them. So I added a conditional around it and it worked swimmingly.
{field.Options !== undefined
&& field.Options.map((block) => {
if (block.Value !== undefined || block.Name !== undefined) {
return (
<ul>
<li key={block.Name}>{block.Value}</li>
<li key={block.Name}>{block.Name}</li>
</ul>
);
}
return null;
})
}
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 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.