Iam trying to get a response from my local json file i have imported the data from the external file and placed it in local json file but when i try to map data in the component it dives me an error that map is not a function and it doesnt works. Also i waant to access an object from the internal array which is UserDataQuestions array and map it in my component
My component
import React, { Component } from "react";
import frontPage from "./dummy";
export default class DummyForm extends Component {
constructor(props) {
super(props);
this.state = {
field: "",
checkBox: "",
options: "",
radioField: "",
error: "",
data: frontPage,
};
}
componentDidMount() {
this.setState({
data: frontPage,
});
}
render() {
console.log(frontPage);
return (
<React.Fragment>
{this.state.data.map((x, i) => (
<select className="custom-select" id="inputGroupSelect01">
<option key={i}>
{x.QuestionText}
</option>
</select>
))}
</React.Fragment>
}
/>
</React.Fragment>
);
}
}
My Json file
export default {
frontPage: [
{
"Id": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"UserDataQuestions": [
{
"Id": 76,
"EarnMoreServiceId": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"QuestionText": "Adresse inkl. postnummer og by",
"QuestionType": "TextBox",
"IsProfile": false,
"IsRequired": false,
"IsActive": false,
"RegexExpression": "",
"RequiredErrorText": "",
"InvalidErrorText": "",
"FieldName": "FullAddress",
"FieldResponse": null,
"OrderBy": 4,
"CreatedOn": "0001-01-01T00:00:00",
"ModifiedOn": null,
"UserOptions": []
},
{
"Id": 69,
"EarnMoreServiceId": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"QuestionText": "Har du hjemmeboende børn?",
"QuestionType": "Radio",
"IsProfile": false,
"IsRequired": false,
"IsActive": false,
"RegexExpression": "",
"RequiredErrorText": "",
"InvalidErrorText": "",
"FieldName": "field30",
"FieldResponse": null,
"OrderBy": 5,
"CreatedOn": "0001-01-01T00:00:00",
"ModifiedOn": null,
"UserOptions": [
{
"Id": 10608,
"Value": "Ja",
"Description": "Ja",
"Type": "field30",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 1,
"EarnMoreServiceQuestionId": 69
},
{
"Id": 10609,
"Value": "Nej",
"Description": "Nej",
"Type": "field30",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 2,
"EarnMoreServiceQuestionId": 69
}
]
},
{
"Id": 68,
"EarnMoreServiceId": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"QuestionText": "Har du børn?",
"QuestionType": "CheckBox",
"IsProfile": false,
"IsRequired": false,
"IsActive": false,
"RegexExpression": "",
"RequiredErrorText": "",
"InvalidErrorText": "",
"FieldName": "Q68",
"FieldResponse": null,
"OrderBy": 7,
"CreatedOn": "0001-01-01T00:00:00",
"ModifiedOn": null,
"UserOptions": [
{
"Id": 10601,
"Value": "Ingen børn",
"Description": "Ingen børn",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 1,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10602,
"Value": "Ja i alderen 0-3 år",
"Description": "Ja i alderen 0-3 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 2,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10603,
"Value": "Ja i alderen 4-6 år",
"Description": "Ja i alderen 4-6 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 3,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10604,
"Value": "Ja i alderen 7-9 år",
"Description": "Ja i alderen 7-9 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 4,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10605,
"Value": "Ja i alderen 10-13 år",
"Description": "Ja i alderen 10-13 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 5,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10606,
"Value": "Ja i alderen 14-18 år",
"Description": "Ja i alderen 14-18 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 6,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10607,
"Value": "Ja over 18 år.",
"Description": "Ja over 18 år.",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 7,
"EarnMoreServiceQuestionId": 68
}
]
},
{
"Id": 6,
"EarnMoreServiceId": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"QuestionText": "Indkomst (for hele din husstand, i alt pr. år før skat)",
"QuestionType": "DropDown",
"IsProfile": false,
"IsRequired": false,
"IsActive": false,
"RegexExpression": "",
"RequiredErrorText": "",
"InvalidErrorText": "",
"FieldName": "Q6",
"FieldResponse": null,
"OrderBy": 8,
"CreatedOn": "0001-01-01T00:00:00",
"ModifiedOn": null,
"UserOptions": [
{
"Id": 10012,
"Value": "Indtil 199.999 kr.",
"Description": "Indtil 199.999 kr.",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 1,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10013,
"Value": "200.000 - 399.999 kr.",
"Description": "200.000 - 399.999 kr.",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 2,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10014,
"Value": "400.000 - 749.999 kr.",
"Description": "400.000 - 749.999 kr.",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 3,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10015,
"Value": "750.000 - 999.999 kr.",
"Description": "750.000 - 999.999 kr.",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 4,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10016,
"Value": "1.000.000 kr. eller mere",
"Description": "1.000.000 kr. eller mere",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 5,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10209,
"Value": "Ønsker ikke at oplyse",
"Description": "Ønsker ikke at oplyse",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 6,
"EarnMoreServiceQuestionId": 6
}
]
}
]
},
"AllowSecondClick": true,
"RemainingDays": 3668.0,
"ServiceUserStatus": "Completed",
"ShowQuarantineWarning": false,
"PartnerId": 0,
"SoldOutStatus": null
}
]
}
You're trying to access the array within the key frontPage of your JSON, but you're trying to map the whole JSON as if it is an array(but it's not).
You can do 2 approaches:
.either map the json object like {this.state.data.frontPage.map()}
.or fix your JSON to be exported as an array, and you won't need to change your mapping
export default [
{
"Id": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"UserDataQuestions": [
{
"Id": 76,
"EarnMoreServiceId": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"QuestionText": "Adresse inkl. postnummer og by",
"QuestionType": "TextBox",
"IsProfile": false,
"IsRequired": false,
"IsActive": false,
"RegexExpression": "",
"RequiredErrorText": "",
"InvalidErrorText": "",
"FieldName": "FullAddress",
"FieldResponse": null,
"OrderBy": 4,
"CreatedOn": "0001-01-01T00:00:00",
"ModifiedOn": null,
"UserOptions": []
},
{
"Id": 69,
"EarnMoreServiceId": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"QuestionText": "Har du hjemmeboende børn?",
"QuestionType": "Radio",
"IsProfile": false,
"IsRequired": false,
"IsActive": false,
"RegexExpression": "",
"RequiredErrorText": "",
"InvalidErrorText": "",
"FieldName": "field30",
"FieldResponse": null,
"OrderBy": 5,
"CreatedOn": "0001-01-01T00:00:00",
"ModifiedOn": null,
"UserOptions": [
{
"Id": 10608,
"Value": "Ja",
"Description": "Ja",
"Type": "field30",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 1,
"EarnMoreServiceQuestionId": 69
},
{
"Id": 10609,
"Value": "Nej",
"Description": "Nej",
"Type": "field30",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 2,
"EarnMoreServiceQuestionId": 69
}
]
},
{
"Id": 68,
"EarnMoreServiceId": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"QuestionText": "Har du børn?",
"QuestionType": "CheckBox",
"IsProfile": false,
"IsRequired": false,
"IsActive": false,
"RegexExpression": "",
"RequiredErrorText": "",
"InvalidErrorText": "",
"FieldName": "Q68",
"FieldResponse": null,
"OrderBy": 7,
"CreatedOn": "0001-01-01T00:00:00",
"ModifiedOn": null,
"UserOptions": [
{
"Id": 10601,
"Value": "Ingen børn",
"Description": "Ingen børn",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 1,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10602,
"Value": "Ja i alderen 0-3 år",
"Description": "Ja i alderen 0-3 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 2,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10603,
"Value": "Ja i alderen 4-6 år",
"Description": "Ja i alderen 4-6 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 3,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10604,
"Value": "Ja i alderen 7-9 år",
"Description": "Ja i alderen 7-9 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 4,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10605,
"Value": "Ja i alderen 10-13 år",
"Description": "Ja i alderen 10-13 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 5,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10606,
"Value": "Ja i alderen 14-18 år",
"Description": "Ja i alderen 14-18 år",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 6,
"EarnMoreServiceQuestionId": 68
},
{
"Id": 10607,
"Value": "Ja over 18 år.",
"Description": "Ja over 18 år.",
"Type": "Q68",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 7,
"EarnMoreServiceQuestionId": 68
}
]
},
{
"Id": 6,
"EarnMoreServiceId": "65f22db1-2a6c-4966-8c46-6ea6e02b5df3",
"QuestionText": "Indkomst (for hele din husstand, i alt pr. år før skat)",
"QuestionType": "DropDown",
"IsProfile": false,
"IsRequired": false,
"IsActive": false,
"RegexExpression": "",
"RequiredErrorText": "",
"InvalidErrorText": "",
"FieldName": "Q6",
"FieldResponse": null,
"OrderBy": 8,
"CreatedOn": "0001-01-01T00:00:00",
"ModifiedOn": null,
"UserOptions": [
{
"Id": 10012,
"Value": "Indtil 199.999 kr.",
"Description": "Indtil 199.999 kr.",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 1,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10013,
"Value": "200.000 - 399.999 kr.",
"Description": "200.000 - 399.999 kr.",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 2,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10014,
"Value": "400.000 - 749.999 kr.",
"Description": "400.000 - 749.999 kr.",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 3,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10015,
"Value": "750.000 - 999.999 kr.",
"Description": "750.000 - 999.999 kr.",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 4,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10016,
"Value": "1.000.000 kr. eller mere",
"Description": "1.000.000 kr. eller mere",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 5,
"EarnMoreServiceQuestionId": 6
},
{
"Id": 10209,
"Value": "Ønsker ikke at oplyse",
"Description": "Ønsker ikke at oplyse",
"Type": "Q6",
"IsActive": false,
"IsSelected": false,
"ModifiedOn": "0001-01-01T00:00:00",
"OrderBy": 6,
"EarnMoreServiceQuestionId": 6
}
]
}
]
},
"AllowSecondClick": true,
"RemainingDays": 3668.0,
"ServiceUserStatus": "Completed",
"ShowQuarantineWarning": false,
"PartnerId": 0,
"SoldOutStatus": null,
]
-- EDIT --
Following the comments and see there is a requirement wheter question type should be displayed, It's not only access of JSON it's needed , it's the treatment of the data.
You need more treatment than just mapping your data.I recommend returning a render function to be able to do the correct return of what do you want. eg:
import React, { Component } from 'react';
import frontPage from './dummy';
export default class DummyForm extends Component {
constructor(props) {
super(props);
this.state = {
field: '',
checkBox: '',
options: '',
radioField: '',
error: '',
data: []
};
}
componentDidMount() {
this.setState({
data: frontPage
});
}
render_questions(element) {
// to-do: treat your data here on the type of questions you want to render
// If you want any, just return elm.UseDataQuestions
const questionType = element.map(elm =>
elm.UserDataQuestions.find(question => question === 'question')
);
return questionType.map(value => (
<select className="custom-select" id="inputGroupSelect01">
<option key={i}>{value.QuestionText}</option>
</select>
));
}
render() {
console.log(frontPage);
return (
<React.Fragment>{this.state.data.map((x, i) => this.render_questions(x))}</React.Fragment>
);
}
}