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.
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;
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 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;
})
}
I am new to Ionic 3 & Angular and ran into an issue with *ngFor and .subscribe() method. Please forgive me if it is an easy question. I tried to figure out the behaviour of http.get(..).map(..).subscribe() function when used along with *ngFor to maintain an array of objects and show the records to user using *ngFor on the .html template file but unable to know *ngFor's odd behaviour.
In my Ionic 3 App, I am getting the data using an API and storing it inside a component variable called "users" which is declared as below in component .ts file -
users: Array<any>;
I have below component function which gives me data for this users array -
addUser(count: number) {
this.http.get('https://randomuser.me/api/?results=' + count)
.map(data => data.json().results)
.subscribe(result => {
for (let val of result) {
this.users.push(val);
}
})
}
Initially, I get data for 10 users from the API using above component function by simply calling it inside my ngAfterViewInit() function like -
this.addUser(10);
This gives me 10 user record objects inside my users array which I show to the user using something like below in the view .html file -
<ion-card *ngFor="let user of users">
{{user.email}}
</ion-card>
At this time *ngFor puts the last array element at first in the view and shows the records in the descending order as the elements in the array starting from index 9 to 0.(LIFO order)
Now I start popping the last element from this users array using users.pop(); and push another element at the beginning at index 0 by shifting current elements using users.unshift(..) in below function and calling it as addNewUser(1); -
addNewUser(count: number) {
this.http.get('https://randomuser.me/api/?results=' + count)
.map(data => data.json().results)
.subscribe(result => {
for (let val of result) {
this.users.unshift(val);
}
})
}
At this moment, if we consider the first array which had 10 elements, the last object at index 9 had been removed and another element at index 0 has been added making the previous elements on index 0-8 to shift to index 1-9.
On doing so, my view gets updated which has *ngFor and surprisingly this time it shows the first element at first place which is actually on index 0 which is the one I recently put. This is opposite to the order earlier followed by *ngFor to render elements on the screen.
Why *ngFor in Ionic 3 view shows the recently inserted object element first from the array of objects which is dependent on the subscribe method .subscribe() method. I am really confused about this.
I really need to clear the concept of *ngFor and subscribe(). Please help me.
Note : The API mentioned above is publicly accessible for testing and you may call it to check the response structure if required.
Pasting a sample API response below on calling https://randomuser.me/api/?results=1 -
{
"results": [
{
"gender": "male",
"name": {
"title": "mr",
"first": "daniel",
"last": "stoll"
},
"location": {
"street": "9719 tannenweg",
"city": "cottbus/chosebuz",
"state": "bremen",
"postcode": 81443
},
"email": "daniel.stoll#example.com",
"login": {
"username": "greenleopard994",
"password": "chat",
"salt": "OUjisBdQ",
"md5": "8148d51998f3fef835a5f3979218c181",
"sha1": "131ae09d045b345efe36a330bf17a450b76f7de3",
"sha256": "94c3a362b5f516d0fb1d4e9dbb632d32d57b8886d5cc7bf0d5cedc99e7d55219"
},
"dob": "1957-04-26 22:07:14",
"registered": "2002-04-29 10:57:34",
"phone": "0556-4348870",
"cell": "0172-5116200",
"id": {
"name": "",
"value": null
},
"picture": {
"large": "https://randomuser.me/api/portraits/men/14.jpg",
"medium": "https://randomuser.me/api/portraits/med/men/14.jpg",
"thumbnail": "https://randomuser.me/api/portraits/thumb/men/14.jpg"
},
"nat": "DE"
}
],
"info": {
"seed": "8fd4afe85884c767",
"results": 1,
"page": 1,
"version": "1.1"
}
}
Refer this example showing my issue.
If you have a sorting issue with indexing and you think it's related.. you could work around the issue by assigning an index:
*ngFor="let user of users; let i = index"
and then reference the direct index value
users[i]
You should make a copy of that array. Editing array elements while looping them can lead to unexpected behaviour.
I guess I'm stuck on stupid. I've been at this for the last few hours and can't seen to figure it out. Admittedly, I am new to ng/ionic2.
I am trying to loop through the response from my post request. I am getting a valid(validated online) big, fat JSON object from my own web api. It looks like this:
`"details": [{
"item_ID": "4",
"item_attribute_ID": "JiggyJamband_1_642",
"item_color_bool": "false",
"item_name": "Test Item 4",
"item_price": "18.95",
"item_desc": "4 This is a test of the ajax input",
"item_gender": "Girls"
},
{ ... },
"attributes": {
"JiggyJamband_1_642": [{
"color": "no-color",
"Xs": "80",
"Sm": "0",
"Med": "0",
"Lrg": "0",
"Xl": "0",
"Xxl": "10"
}],
"JiggyJamband_5_5664": [{
"color": "no-color",
"Xs": "0",
"Sm": "0",
"Med": "0",
"Lrg": "0",
"Xl": "0",
"Xxl": "50"
}],
{ ... }`
I am able to access individual "details" and "attributes" like this:
this.itemsDataService.getRemoteData(urlCode)
.subscribe(response => {
this.itemsJson = response;
this.dObj = this.boothItemsJson.details;
//this.aObj = this.boothItemsJson.attributes;
this.aObj = response["attributes"]["JiggyJamband_1_642"];
});
My provider looks like this:
getRemoteData(urlCode): any {
return this.http.post('http://localhost/process-fe-app/_itemJson.php', JSON.stringify(urlCode))
.map(res => res.json()); }
My question: items in details is dynamic and has an item-attribute_ID that is related to at least 1 entry in attributes. Entrys for attributes are dynamic as well - each item can have multiple attributes. The array keys of the individual attributes are the static (sizes and colors) and either have values or they don't. I need to be able to loop over the attributes object (aObj) of arrays and the arrays inside them. I do not need the ngFor or ngIf statements as this data won't be directly displayed per se. The json data is returned just fine but I just need to be able to access it call methods on the based on the data (like putting into storage with the attribute ID as the key "JiggyJamband: color: no-color, xs:50, s:100... etc"
What I've tried: this tutorial https://www.youtube.com/watch?v=0kHJgw6Li_4, and googling ever iteration of the wording for this problem I could think of.
Perhaps this sample iteration will help you get your head around it.
this.itemsDataService.getRemoteData(urlCode)
.subscribe(response => {
for(var k in response){
for(var k2 in response[k]){
console.log([k,k2,response[k][k2]]);
}
}
});