显示的JSON残破

I have a JSON File, giving by vendor

{"html": "
<link href=\"//apply.fundingoptions.com/static/msmclone/css/oembed-v3.css\" rel=\"stylesheet\">
<script type=\"text/javascript\">
    var __raconfig = __raconfig || {};
    __raconfig.uid = '53302e56328ff';
    __raconfig.action = 'track';
    (function () {
    var ra = document.createElement('script');
    ra.type = 'text/javascript';
    ra.src = ('https:'==document.location.protocol?'https://':'http://')
    +'www.ruleranalytics.com/lib/1.0/ra-bootstrap.min.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ra, s);
    }());
</script>

<div id=\"oembed-widget-container\" class=\"oembed-widget-container\">
  <div class=\"callout\">Initialising Finance Finder...</div>
</div>
<script type=\"text/javascript\">
    
        var widget_affiliate_id = 10;
    
    
        var widget_continue_url = \"//apply.fundingoptions.com/continue/\";
    
    
        var widget_submission_url = \"//apply.fundingoptions.com/oembed/submit/\";
    
    
        var widget_match_url = \"//apply.fundingoptions.com/match/\";
    
    
        var widget_title = \"Your funding options\";
    
</script>
<script src=\"//apply.fundingoptions.com/static/oembed/oembed-v4.js\"></script>

",
    "title": "Funding Options Finance Finder",
    "version": 0,
    "type": "rich",
    "width": 500,
    "height": 400
    }

and I am parsing it on a webpage using this method

 $.ajax({
        type: 'GET',
        url: 'json/data.json',
    data: { get_param: 'value' },   
    dataType:'json',
        success: function (data) {
            var names = data
            $('#summary').html(data.html);
        }
    });

But in the end , its show something like that on webpage:

as I am implementing it first time , I am not sure its my bad or json is corrupt or what else.

Looks like this is a Cross Origin Resource Sharing issue.

https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Check your browser console and look at the error you are getting when you try to load the page. It should say something similar to:

XMLHttpRequest cannot load http://apply.fundingoptions.com/match/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Because the data you are requesting is not on the same server as you you are being denied access.

It looks like the error is happening when the following request is made in the oembed-v4.js library:

jQuery.ajax({ url: that.match_url, type: 'POST', data: postData, success: function(data, textStatus, jqXHR) { that.data = data; if (data['next_question'] == null) { that.showActions(); that.$spinnerElement.removeClass('fa-cog'); that.$spinnerElement.addClass('fa-check'); } else { that.drawQuestion(); } }, error: function(jqXHR, textStatus, errorThrown) { that.displayError(); }, complete: function() { that.toggleSpinner(false); } });

The vendor may need to enable Cross Origin Resource Sharing on their end from your domain.

Here is a working example of the jQuery Ajax call:

$.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts/1',
    dataType:'json',
        success: function (resp) {
            console.log(resp)
            var names = resp.title
            $('#summary').html(names);
        },
       error: function (resp) {
            console.log('error')
        }
    });

You can edit this to match your data. Make sure that the url is correct, you can try:

'./json/data.json'

You JSON is parsed correctly according to: https://jsonlint.com/

So it must be the URL.