I am trying to populate a Modal with the values in my JSON that I have received from a service call. The simple understandable structure of the object is like this: 

```
var object = [
{Value1: "Val1",
 Value2: "Val",
 Value3: [{a:"a",b:"b"}]
}] 

```

The ajax call is something like this : 

```
$.ajax({
    type: "GET",
    url: "myURL",
    data: id,                                
    async: true,
    dataType: "json",
    contentType: "application/json; charset= UTF-8",
    success: function (response) {

       //alert("Successfully Inserted");
       //alert(JSON.stringify(response));          
    },
    error: function (error) {
        console.log(error);
        alert("Error!!");
    }
});

```

I verified the response and its coming correctly.

**HTML**:

```
<a href="#openModal">Open Modal</a>

<div id="openModal" class="modalDialog">
    <div>   <a href="#close" title="Close" class="close">X</a>

            <h2>Modal Box</h2>
<input type = "text" id="one" placeholder="Place Val1"/>
<input type = "text" id="two" placeholder="Place Val2"/>
<input type = "text" id="three" placeholder="Place a here"/>
<input type = "text" id="four" placeholder="PLace b here"/>

    </div>
</div>

```

I want to populate the modal on **Open Modal** click after I receive the JSON from service. Can someone help me out in doing this?
Here`s the [fiddler](https://jsfiddle.net/uo7rpn99/) that explains more of what I want to achieve.