display get response data in vf page, json response please help 

VF page :
<apex:page controller="RESTAPIJSONResponseController">
    <apex:form >
        <apex:pageBlock >            
            <apex:pageBlockButtons location="bottom">
                <apex:commandButton value="Fetch" action="{!fetchAPI}"/>
            </apex:pageBlockButtons>
        </apex:pageBlock>
        
        <apex:pageblock >
            <apex:pageBlockSection >
                <apex:pageBlockTable value="{!listWrapper}" var="obj">
                    <apex:column value="{!obj.rates}" headerValue="Id"/>
                    <apex:column value="{!obj.base}" headerValue="Login"/>
                    

 

                    
                </apex:pageBlockTable>
            </apex:pageBlockSection>
        </apex:pageblock>
    </apex:form>
</apex:page>

Controller: 
public with sharing class RESTAPIJSONResponseController {

    public List < JSONWrapper > listWrapper {get;set;}
    
    public RESTAPIJSONResponseController() {
        listWrapper = new List < JSONWrapper >();
    }
    
    public void fetchAPI() {
        HTTP h = new HTTP();
        HTTPRequest req = new HTTPRequest();
        req.setEndPoint('https://theforexapi.com/api/latest?HTTP/2');
        req.setMethod('GET');
        HTTPResponse res = h.send(req);  
        JSONParser parser = JSON.createParser(res.getBody());
        listWrapper = (List < JSONWrapper >) JSON.deSerialize(res.getBody(), List < JSONWrapper >.class);
        system.debug(''+res.getBody() );
        /*
           If the response contains only one value instead list, then you can use the below code
           JSONWrapper obj = (JSONWrapper) JSON.deSerialize(res.getBody(), JSONWrapper.class); 
           listWrapper.add(obj);
        */
    }
    
    public class JSONWrapper {
        
        public String base {get;set;}
        public String rates {get;set;}
        
    }
    
}

JSON Response :  in system.debug
"{\"date\":\"2021-07-07\",\"base\":\"EUR\",\"rates\":{\"USD\":\"1.1831\",\"JPY\":\"130.86\",\"BGN\":\"1.9558\",\"CZK\":\"25.688\",\"DKK\":\"7.4361\",\"GBP\":\"0.85500\",\"HUF\":\"355.57\",\"PLN\":\"4.5192\",\"RON\":\"4.9268\",\"SEK\":\"10.1813\",\"CHF\":\"1.0917\",\"ISK\":\"146.30\",\"NOK\":\"10.2475\",\"HRK\":\"7.4867\",\"RUB\":\"87.8009\",\"TRY\":\"10.2566\",\"AUD\":\"1.5711\",\"BRL\":\"6.1224\",\"CAD\":\"1.4708\",\"CNY\":\"7.6478\",\"HKD\":\"9.1900\",\"IDR\":\"17146.47\",\"INR\":\"88.2825\",\"KRW\":\"1344.89\",\"MXN\":\"23.5724\",\"MYR\":\"4.9241\",\"NZD\":\"1.6760\",\"PHP\":\"58.960\",\"SGD\":\"1.5924\",\"THB\":\"38.173\",\"ZAR\":\"16.8666\"}}"

Visualforce Error:
System.JSONException: Malformed JSON: Expected '[' at the beginning of List/Set
Error is in expression '{!fetchAPI}' in component <apex:commandButton> in page forexconv: Class.System.JSON.deserialize: line 15, column 1
Class.RESTAPIJSONResponseController.fetchAPI: line 16, column 1

Need to display This format :

To This  Type : 


Please Help With this Issue,
Thanks in Advance.



 

Value Entered In InputTextarea Should save in Selected Fieldname

For example: if i selected email from fieldnames entert value should save in email field in account object.
For example: if i selected email from fieldnames entert value should save in email field in account object.

Insert new record from VisualForce page With Selected Sobject.
I mean i have to select sobject from picklist in visualforce page and enterd details should save in that sobject.

How to Add Textarea Dynamically in vf page with Reference to records in object?
please help me in the following scenario,
 
Scenario: textarea fields should be displayed in vf page with reference to the records saved in custom object.

For Example:
like in the below image.

 if field is saved with the details like Intrested,Feedback. vf page should populate the record details along with input textarea field

Thank U
 

display get response data in vf page, json response please help 

VF page :
<apex:page controller="RESTAPIJSONResponseController">
    <apex:form >
        <apex:pageBlock >            
            <apex:pageBlockButtons location="bottom">
                <apex:commandButton value="Fetch" action="{!fetchAPI}"/>
            </apex:pageBlockButtons>
        </apex:pageBlock>
        
        <apex:pageblock >
            <apex:pageBlockSection >
                <apex:pageBlockTable value="{!listWrapper}" var="obj">
                    <apex:column value="{!obj.rates}" headerValue="Id"/>
                    <apex:column value="{!obj.base}" headerValue="Login"/>
                    

 

                    
                </apex:pageBlockTable>
            </apex:pageBlockSection>
        </apex:pageblock>
    </apex:form>
</apex:page>

Controller: 
public with sharing class RESTAPIJSONResponseController {

    public List < JSONWrapper > listWrapper {get;set;}
    
    public RESTAPIJSONResponseController() {
        listWrapper = new List < JSONWrapper >();
    }
    
    public void fetchAPI() {
        HTTP h = new HTTP();
        HTTPRequest req = new HTTPRequest();
        req.setEndPoint('https://theforexapi.com/api/latest?HTTP/2');
        req.setMethod('GET');
        HTTPResponse res = h.send(req);  
        JSONParser parser = JSON.createParser(res.getBody());
        listWrapper = (List < JSONWrapper >) JSON.deSerialize(res.getBody(), List < JSONWrapper >.class);
        system.debug(''+res.getBody() );
        /*
           If the response contains only one value instead list, then you can use the below code
           JSONWrapper obj = (JSONWrapper) JSON.deSerialize(res.getBody(), JSONWrapper.class); 
           listWrapper.add(obj);
        */
    }
    
    public class JSONWrapper {
        
        public String base {get;set;}
        public String rates {get;set;}
        
    }
    
}

JSON Response :  in system.debug
"{\"date\":\"2021-07-07\",\"base\":\"EUR\",\"rates\":{\"USD\":\"1.1831\",\"JPY\":\"130.86\",\"BGN\":\"1.9558\",\"CZK\":\"25.688\",\"DKK\":\"7.4361\",\"GBP\":\"0.85500\",\"HUF\":\"355.57\",\"PLN\":\"4.5192\",\"RON\":\"4.9268\",\"SEK\":\"10.1813\",\"CHF\":\"1.0917\",\"ISK\":\"146.30\",\"NOK\":\"10.2475\",\"HRK\":\"7.4867\",\"RUB\":\"87.8009\",\"TRY\":\"10.2566\",\"AUD\":\"1.5711\",\"BRL\":\"6.1224\",\"CAD\":\"1.4708\",\"CNY\":\"7.6478\",\"HKD\":\"9.1900\",\"IDR\":\"17146.47\",\"INR\":\"88.2825\",\"KRW\":\"1344.89\",\"MXN\":\"23.5724\",\"MYR\":\"4.9241\",\"NZD\":\"1.6760\",\"PHP\":\"58.960\",\"SGD\":\"1.5924\",\"THB\":\"38.173\",\"ZAR\":\"16.8666\"}}"

Visualforce Error:
System.JSONException: Malformed JSON: Expected '[' at the beginning of List/Set
Error is in expression '{!fetchAPI}' in component <apex:commandButton> in page forexconv: Class.System.JSON.deserialize: line 15, column 1
Class.RESTAPIJSONResponseController.fetchAPI: line 16, column 1

Need to display This format :

To This  Type : 


Please Help With this Issue,
Thanks in Advance.



 

How to Add Textarea Dynamically in vf page with Reference to records in object?
please help me in the following scenario,
 
Scenario: textarea fields should be displayed in vf page with reference to the records saved in custom object.

For Example:
like in the below image.

 if field is saved with the details like Intrested,Feedback. vf page should populate the record details along with input textarea field

Thank U