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
frontPageof 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
-- 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: