Hello I have JSON structured like this,
and I need to iterate over the items
[
{
"name": "About You",
"questions": [
{
"questionText": "What is your surname?",
"answers": [
{
"text": "Thomas"
}
]
},
{
"questionText": "Where do you work?",
"answers": [
{
"text": "Finance"
}
]
},
]
},
{
"name": "About Family",
"questions": [
{
"questionText": "Childeren",
"answers": [
{
"text": "Yes"
}
]
},
{
"questionText": "Married",
"answers": [
{
"text": "No"
}
]
},
]
},
{
"name": "Travel",
"questions": [
{
"questionText": "Do you travel a lot?",
"answers": [
{
"text": "Yes"
}
]
}
]
}
]
I started with this code but I don't know how to show all the nested items. Should I use another map function? I would like to have format that will show table with questionTexts and answers text
{details.map((detail, i) => (
<div key={i}>
<div>{detail.name}</div>
<div>{detail.questions ? detail.questions[0].questionText : ''}</div>
<div>{detail.questions ? detail.questions[0].answers[0].text : ''}</div>
</div>
)
)}
thank you
Should I use another map function?
Yes
First, map through the details array
details.map((detail, i) =>
Map through the current detail.questions
detail.questions.map((question) => (
Optionally, apply the same logic for question.answers
question.answers.map((question) => (
Small example were we show all the questions:
class Example extends React.Component {
render() {
const details = [{"name": "About You", "questions": [{"questionText": "What is your surname?", "answers": [{"text": "Thomas"} ] }, {"questionText": "Where do you work?", "answers": [{"text": "Finance"} ] }, ] }, {"name": "About Family", "questions": [{"questionText": "Childeren", "answers": [{"text": "Yes"} ] }, {"questionText": "Married", "answers": [{"text": "No"} ] }, ] }, {"name": "Travel", "questions": [{"questionText": "Do you travel a lot?", "answers": [{"text": "Yes"} ] } ] } ];
return (
details.map((detail, i) => (
<div key={detail.name} class='question'>
<b>{detail.name}</b>
{
detail.questions.map((question) => (
<em key={question.questionText}>
Question: {question.questionText}
</em>
))
}
</div>
))
);
}
}
ReactDOM.render(<Example />, document.body);
.question {
display: flex;
flex-direction: column;
margin-bottom: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Additional notes
Changed the key={} to the name of the question to we're sure it's unique
Added a key to the nested map(), using the question itself
Thx to #pilchard for noticing
Related
Hi I have been trying make this following array
[
{
"name": "Study",
"questions": [
{
"question": "Would you Love to learn about Java?",
"answer": "Yes"
}
]
},
{
"name": "Song",
"questions": [
{
"question": "Would you Love to learn about song?",
"answer": "Yes"
},
{
"question": "Would you Love to learn about rock?",
"answer": "No"
}
]
}
]
To this
[
{
"questions": [
{
"question": "Would you Love to learn about Java?",
"answer": "Yes",
"name": "Study"
}
]
},
{
"questions": [
{
"question": "Would you Love to learn about song?",
"answer": "Yes",
"name": "Song"
},
{
"question": "Would you Love to learn about rock?",
"answer": "No",
"name": "Song"
}
]
}
]
I have tried to map to two arrays ( from name and questions) and tried to combined them , but I can't make it work for multiple arrays in questions. How can I make this ? Is there any loadash way too accomplish this easily. But I'm trying to do this in Vanilla JavaScript way.
You can try with double .map():
let input = [
{
"name": "Study",
"questions": [
{
"question": "Would you Love to learn about Java?",
"answer": "Yes"
}
]
},
{
"name": "Song",
"questions": [
{
"question": "Would you Love to learn about song?",
"answer": "Yes"
},
{
"question": "Would you Love to learn about rock?",
"answer": "No"
}
]
}
]
let result = input.map(({name, questions}) => ({ questions: questions.map(q => ({name, ...q })) }));
console.log(result);
Try following
let arr1 = [
{
"name": "Study",
"questions": [
{
"question": "Would you Love to learn about Java?",
"answer": "Yes"
}
]
},
{
"name": "Song",
"questions": [
{
"question": "Would you Love to learn about song?",
"answer": "Yes"
},
{
"question": "Would you Love to learn about rock?",
"answer": "No"
}
]
}
]
arr1.map((element, index) => {
console.log(element); console.log(index); return
{
questions: element.questions.map((e, i) => {
console.log(e); console.log(i); return {
...e,
name: element.name
};
})
}
})
I have this JSON which I'm parsing using NodeJS and it needs to be restructured into the second JSON which I've added below.
In the first JSON, the rows object has two pages objects (any number of pages objects can be present) which contains all the same keys and values with the exception of values and display keys.
{
"pages": [
{
"label": "SomeLabel",
"name": "Some",
"sections": [
{
"type": "Repeat",
"label": "Label 1",
"name": "Name 1",
"rows": [
{
"pages": [
{
"label": "Label 1",
"name": "Name 1",
"sections": [
{
"type": "Flow",
"label": "Label 2",
"name": "Name 2",
"answers": [
{
"label": "Question Label",
"question": "Question",
"values": [
"Value A"
],
"valuesMetadata": [
{
"display": "Display A",
"row": {
"columns": []
}
}
]
}
]
}
]
}
]
},
{
"pages": [
{
"label": "Label 1",
"name": "Name 1",
"sections": [
{
"type": "Flow",
"label": "Label 2",
"name": "Name 2",
"answers": [
{
"label": "Question Label",
"question": "Question",
"values": [
"Value B"
],
"valuesMetadata": [
{
"display": "Display B",
"row": {
"columns": []
}
}
]
}
]
}
]
}
]
}
],
"footer": null
}
]
}
]
}
In the second JSON the rows object has a single pages object, inside of which the values and display keys have multiple values (the non-common values).
{
"pages": [
{
"label": "SomeLabel",
"name": "Some",
"sections": [
{
"type": "Repeat",
"label": "Label 1",
"name": "Name 1",
"rows": [
{
"pages": [
{
"label": "Label 1",
"name": "Name 1",
"sections": [
{
"type": "Flow",
"label": "Label 2",
"name": "Name 2",
"answers": [
{
"label": "Question Label",
"question": "Question",
"values": [
"Value A",
"Value B"
],
"valuesMetadata": [
{
"display": [
"Display A",
"Display B"
],
"row": {
"columns": []
}
}
]
}
]
}
]
}
]
}
],
"footer": null
}
]
}
]
}
So, I want to know the fast and easy steps to do this. Please let me know the process and methods to solve this.
Thanks
If I understand you correctly, you want to combine all pages in a single page that holds all information.
This can be achieved using the Array.reduce function. reduce takes an array and combines all elements to a single value using a function (provided by you) to combine the first two elements until only one is left (i.e. 1 * 2 => new1; new1 * 3 => new2 where * represents your function).
Your problem would look something like this:
rows[0].pages = rows[0].pages.reduce((currentElement, currentState) => {
if (!currentState) { // first iteration return first element but make sure display is an array
currentElement.sections[0].answers[0].valuesMetadata[0].display =
[currentElement.sections[0].answers[0].valuesMetadata[0].display];
return currentElement;
}
// add values of current element to arrays in current state
currentState.sections[0].answers[0].values
.concat(currentElement.sections[0].answers[0].values);
currentState.sections[0].answers[0].valuesMetadata[0].display
.concat(currentElement.sections[0].answers[0].valuesMetadata[0].display);
return currentState;
});
currentElement is the object of the array that is currently reduced, currentState is the intermediate result of the reduction.
PS:
The object looks like you are way too many arrays where you would not need them. The given code snippet works only for the first element in each array (hence the [0]s. If you really do have multiple values in each array you would have to iterate over all of those accordingly.
I am trying to exclude items that contain Packages in packageData.type. To show only the packageData that has items with packageData.type as Add-on.
Array is as example
{
"packageData": [
{
"title": "Title 1",
"type": [
"Packages"
]
},
{
"title": "Title 2",
"type": [
"Add-on"
]
},
{
"title": "Title 3",
"type": [
"Add-on"
]
},
{
"title": "Title 4",
"type": [
"Add-on"
]
}
]
}
and this is how I am currently trying to remove results which is giving zero results.
<ul>
{packageData.map(function() {
if (packageData.type ==! "Packages") {
return (
<li key={packageData.id}>
<a>
<img src={packageData.heroImage.sizes.src} alt=""/>
<h3>{packageData.title}</h3>
</a>
</li> );
} else {
return null;
};
})}
</ul>
How can I make this work? Or should I be filtering these results prior to displaying and then map the returned items?
You have to use filter before map, Filter will filter the array and then map will iterate through array. Below is the sample code
var data = {
"packageData": [
{
"title": "Title 1",
"type": [
"Packages"
]
},
{
"title": "Title 2",
"type": [
"Add-on"
]
},
{
"title": "Title 3",
"type": [
"Add-on"
]
},
{
"title": "Title 4",
"type": [
"Add-on"
]
}
]
};
data.packageData.filter((item) => { return item.type[0] !== 'Packages' }).map((item)=> { console.log(item); });
I want get the id from table records that have the array match with other record from the same table's array example:
it is record of user '1'
✔ r.db('fotogena').table('users').filter({user:'1'}).pluck('pleasures')
{
"pleasures": [
{
"category": "432f1ae0-a7b1-11e7-86dc-d709d79803e4",
"subCategory": [
"432f1ae1-a7b1-11e7-86dc-d709d79803e4"
]
},
{
"category": "432f1aef-a7b1-11e7-86dc-d709d79803e4",
"subCategory": [
"432f1af5-a7b1-11e7-86dc-d709d79803e4"
]
},
{
"category": "432f1afa-a7b1-11e7-86dc-d709d79803e4",
"subCategory": [
"432f1afb-a7b1-11e7-86dc-d709d79803e4",
"432f1afc-a7b1-11e7-86dc-d709d79803e4",
"432f1afd-a7b1-11e7-86dc-d709d79803e4"
]
},
{
"category": "432f1b02-a7b1-11e7-86dc-d709d79803e4",
"subCategory": [
"432f1b03-a7b1-11e7-86dc-d709d79803e4",
"432f1b04-a7b1-11e7-86dc-d709d79803e4",
"432f1b07-a7b1-11e7-86dc-d709d79803e4"
]
}
]
}
and i want compare each one that items(without the user '1') inside that pleasure.subCategory with others records inside the same table with the same estructure.
Table with 3 records
[
{
"date": "2017-10-03T03:58:02.651Z",
"id": "d82279a7-fbc6-40a2-99ca-39796ea57efa",
"pleasures": [
{
"category": "432f1ae0-a7b1-11e7-86dc-d709d79803e4",
"subCategory": [
"432f1ae1-a7b1-11e7-86dc-d709d79803e4"
]
},
{
"category": "432f1aef-a7b1-11e7-86dc-d709d79803e4",
"subCategory": [
"432f1af5-a7b1-11e7-86dc-d709d79803e4"
]
},
{
"category": "432f1afa-a7b1-11e7-86dc-d709d79803e4",
"subCategory": [
"432f1afb-a7b1-11e7-86dc-d709d79803e4",
]
},
{
"category": "432f1b02-a7b1-11e7-86dc-d709d79803e4",
"subCategory": [
"432f1b03-a7b1-11e7-86dc-d709d79803e4",
]
}
],
"user": "1"
},
{
"date": "2017-10-07T02:59:45.942Z",
"id": "174c0e35-da79-4ca8-b237-8ec569cc27b1",
"pleasures": [
{
"category": "432f1ae0-a7b1-11e7-86dc-d709d79803e4",
"subCategory": [
"432f1ae1-a7b1-11e7-86dc-d709d79803e4",
]
},
{
"category": "432f1aef-a7b1-11e7-86dc-d709d79803e4",
"subCategory": [
"432f1af3-a7b1-11e7-86dc-d709d79803e4",
"432f1af4-a7b1-11e7-86dc-d709d79803e4"
]
},
{
"category": "432f1afa-a7b1-11e7-86dc-d709d79803e4",
"subCategory": [
"432f1aff-a7b1-11e7-86dc-d709d79803e4",
]
},
{
"category": "432f1b02-a7b1-11e7-86dc-d709d79803e4",
"subCategory": [
"432f1b04-a7b1-11e7-86dc-d709d79803e4",
]
}
],
"user": "10"
},
{
"date": "2017-10-07T02:07:13.715Z",
"id": "dd11edac-e0f5-43ac-811a-eaa78a6509c7",
"pleasures": [
{
"category": "432f1ae0-a7b1-11e7-86dc-d709d79803e4",
"subCategory": [
"432f1ae1-a7b1-11e7-86dc-d709d79803e5"
]
},
{
"category": "432f1aef-a7b1-11e7-86dc-d709d79803e4",
"subCategory": [
"432f1af3-a7b1-11e7-86dc-d709d79803e5"
]
},
{
"category": "432f1afa-a7b1-11e7-86dc-d709d79803e4",
"subCategory": [
"432f1af3-a7b1-11e7-86dc-d709d79803e6"
]
},
{
"category": "432f1b02-a7b1-11e7-86dc-d709d79803e4",
"subCategory": [
"432f1af3-a7b1-11e7-86dc-d709d79803e7"
]
}
],
"user": "25"
}
]
i think that maybe can be it:
r.db('fotogena').table('users').filter({user:'1'}).pluck('pleasures').map(pleasures=>{
return //do something
})
i could solve it, later of search and search, i could created a script that show that i want get
I had that do in unique query(no joins) compare arrays with arrays using .contains() and worked very good
r.db('fotogena').table('users').filter(users=>{
return users('pleasures').contains(category=>{
return category('subCategory').contains(subCategory=>{
return r.db('fotogena').table('users').filter({user: '1'}).pluck('pleasures').contains(pleasures2=>{
return pleasures2('pleasures').contains(subCate2=>{
return subCate2('subCategory')
.contains(subCategory2=>{
return subCategory2.eq(subCategory)
})
})
})
})
}).and(users('user').ne('1'))
})
I am trying to merge json format (prefably using underscore) but not sure how it could be done. The first json has no indicator of _id to be mapped.
JSON 1:
{
"0001": {
"answer": "sad"
},
"0002": {
"answer": "sad1"
}
}
JSON 2:
[
{
"_id": "0001",
"question": "who am I"
},
{
"_id": "0002",
"question": "How old are you?"
}
]
Final Result after merging:
[
{
"_id": "0001",
"question": "who am I",
"answer": "sad"
},
{
"_id": "0002",
"question": "How old are you?",
"answer": "sad1"
}
]
For the approach, i am trying to transform JSON 1 to following format first but unable to achieve.
[
{
"_id": "0001",
"answer": "sad"
},
{
"_id": "0002",
"answer": "sad1"
}
]
Ok, so you can do a foreach to add the new answer element:
var json1 = {
"0001": {
"answer": "sad"
},
"0002": {
"answer": "sad1"
}
};
var json2 = [
{
"_id": "0001",
"question": "who am I"
},
{
"_id": "0002",
"question": "How old are you?"
}
];
json2.forEach(function(o) {
o.answer = json1[o._id].answer;
});
console.log(json2);
I hope that helps :D