I am trying to dynamically render a form based on a series of questions which are provided from an API. The form should render the questions individually (one by one) and should not add the next question if it has already been triggered.
I have managed to do the above, quite easily but then when it comes to the logic surrounding a "multiple choice" I am starting to have great difficulty, whereby I am currently unable to determine the logic which could help the above scenario.
The API returns a resource such as the following to render a form:
[
{
id: 1,
title: 'What is your name?',
type: 'free-text'
},
{
id: 2,
title: 'What is your age?',
type: 'number'
},
{
id: 3,
title: 'What is your occupations?',
type: 'choice',
allowMultiple: true,
choices: [
{ value: 'Developer', goTo: 1 },
{ value: 'Engineer' }
]
},
{
id: 4,
title: 'Any comments?',
type: 'free-text'
}
]
From the above example, goTo simulates what question that answer should go to. In this above example, after the use select "Developer" they will be greeted with "What is your name?" question again.
I have currently tried the following (React):
When the form is rendered it renders in the following format {questionId}-{index}. This is due to the same question being able to render on the screen at a given time, therefore "questionId" wouldn't be sufficient and would cause duplications.
Please find the link to codesandbox here:
https://codesandbox.io/s/unruffled-flower-pwyfbd
You will see that it works correctly for inputs, but then when using the choice the logic is messed up.
What should happen is the following:
When "What is your name?" has a value -> load "What is your age?"
When "What is your age" has a value -> load "What is your
occupations?"
When "Developer" option is checked -> load "What is your name" (due to the branching).
Loop to the start.
When "Engineer" option is checked -> load "Any comments?"
If "Developer" is unchecked, it removed all inputs / checkboxes that were generated from that checkbox.
If "Engineer" option is unchecked, it removes all inputs / checkboxes that were generated from that checkbox.
** please note, I could be going in the completely wrong direction with this and I am happy for suggestions on how to improve the code / a alternative method to go down **
Related
I have a collection of restaurants where each document includes data such as the name, location, reviews, etc, and I'm attempting to push data which includes two reviews to the restaurant located in the borough of Brooklyn. This document happens to not currently have an array field of "reviews". According to everything I've looked at, the $push function should automatically add the array to the document, but it does not. Here is the code:
db.restaurants.updateOne(
{ borough: 'Brooklyn' },
{
$push: {
reviews: {
$each: [
{
name: 'Frank Zappa',
date: 'January 3, 2019',
rating: 3,
comments: 'This restaurant is not good',
},
{
name: 'Freddie Mercury',
date: 'January 3, 2019',
rating: 5,
comments: 'This restaurant is my favorite',
},
],
},
},
}
);
The next command after this is to push the same reviews to another restaurant that does already have the array field "reviews", and also slice to 2. The only difference in code between these two is the filter and the slice modifier. The second works perfectly, the first does not.
Am I misunderstanding how push should work? Using push is a requirement in this case, though I did also try addToSet with the same
https://mongoplayground.net/p/MxH01R4dxjU
it seems your Query is working fine plz check that you provided right values in the filter operation
Turns out I didn't pay close enough attention to how many documents have the "borough" : "Brooklyn" field and there was more than one. Changed to updateMany and the problem was solved. Thanks for the time and attention!
I am using API's to receive multiple row data from a particular user, my doubt is how one can display that data in react using AG-Grid format.
this.setState
({
data: res.data,
columnDefs: [
{
headerName: " CreateDate", field: " CreateDate"
}, {
headerName: "Task Name", field: "TaskName"
}],
rowData:[{
//facing errors while assigning these values
TaskName : data.TaskName,
CreateDate : data[0].CreateDate
}]
})
Hi Aboli I am sharing stackblitz which will help you to do what you are trying to achieve.
I have assumed a lot about your data object since we dont know much about it. usually data should come in key value pair where keys matches to the field name which you have defined in your coldef object so that ag-grid can consume it directly.
But sometimes we need to sanitize data so that it matches with the way column field have been defined. feel free to ask more question and try to be a bit elaborative with code so that you can get solution faster.
here is the stackblitz example.
I currently have a unique multiple choice test where some of the questions have multiple choice that are all correct. I'm currently trying to write something to check if every answer is question within the choice. choices is prop of type Array which holds multiple choice questions. I want to be able to check that isCorrect is true for each object within this.props.choices. Currently the structure looks like this:
"choices": [
{
"text": "Text 1",
"isCorrect": true,
},
{
"text": "Text 2",
"isCorrect": true,
}
]
you want to use every on array so like this:
choices.every(choice => choice.isCorrect)
this will return true if all values are true
I currently have the translated English and Japanese .json file in the format:
{
"en": [{
"id": "Cancel",
"defaultMessage": "Cancel"
}, {
"id": "CommonTags",
"defaultMessage": "Common Tags"
}]
"ja": [{
"id": "Cancel",
"defaultMessage": "キャンセル"
}, {
"id": "CommonTags",
"defaultMessage": "共通タグ"
}]}
My question is, why do I need to define the messages now considering that I already have all of these generated and translated? I am simply like to access them in the following way but getting an error:
var messages_ja = require("../../../Resources/Resources.ja2.js.json");
class LocalizedApp extends React.Component {
props: any;
static propTypes: { intl: (object: any, key: string, componentName: string, ...rest: any[]) => Error | null; };
render() {
return (...
<h1>{this.props.intl.formatMessage({ id: messages_ja.Cancel })}</h1>);}}
I get the following error:
[React Intl] An id must be provided to format a message.
Repeating my question:
Do I really need to incorporate the ecosystem for defining messages.
If so, why?
Is it possible to simply access the strings based on
locale from the json, without creating formattedMessages for them.
Thanks in advance.
Answer for question 1:
I'd say yes. You have to choose between using the declarative (e.g.: <FormattedMessage />) or the imperative api (e.g.: intl.formatMessage()).
Answer for question 2:
You could, but then why would you use react-intl then?
(You could say that you only want to use its localization methods for date, numbers, percentage.. which would be ok, but IMHO you'd have much more effort to build your own solution other than using the lib.)
I always prefer to use the declarative API, and it's a good practice to have an ID and a default message. This default message that react-intl complains is actually to help you. It's a fallback for in case you missed one translation, it defaults to this message.
I recommend using the imperative api if you want to reuse labels or if you need to use them outside react components (from my experience, these were the only cases where it could be done). You can also use the babel-plugin-react-intl to auto-extract the labels from your application and make your life pretty much easy!
I've implemented the angular-advanced-searchbox (with AngularJS 1.5.8, ui-bootstrap, JQuery) like the demo-page:
html
<nit-advanced-searchbox ng-model="searchParams" parameters="availableSearchParams" placeholder="Search..."></nit-advanced-searchbox>
script
$scope.availableSearchParams = [
{...},
{
key: "city",
name: "City",
placeholder: "City...",
restrictToSuggestedValues: true,
suggestedValues: ['Berlin', 'London', 'Paris'] },
{...}
];
};
Here is a Plunker of this implementation too. I'll refer to this example to picture my problem.
If I type 'city' in the searchfield and select it by hitting enter, then I'll see the suggested Value-List (Berlin, London, Paris) for about a second and then the focus 'll lost and the selected key-value (city) is automatically removed. It seems this won't happen, if the mouse pointer is rested over the search-input field (without any action).
With this issue, I can't use this module on my site - but I really want to :) Are any suggestions out there?
OK, this (low-level) fix worked for me - i've just commented line 107 ():
angular-advanced-searchbox-tpls.js [#107]
$scope.searchQueryChanged = function (query) {
// updateModel('change', 'query', 0, query);
};
This line is used to build 'pre-queries'. If you start typing 'city', the scope of searchParams generate a temporary query on the fly and would be changed to the selected key - g.E.:
{"query":"ci"}
This will then lead to a timeout after 'city' is selected. I don't know this 'query' is used for - all things 'll do their job furthermore. But by time I'll looking to a real fix for this problem :)