我将代码与ajax一起使用json时遇到一些问题？

Question

我正在尝试使用ajax jQuery调用json数据，但是它存在一些问题，并且我是使用ajax的json的新手。有人，请找出问题所在？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="container">
    <h2>Striped Rows</h2>
    <p>The .table-striped class adds zebra-stripes to a table:</p>
    <div align="center">
        <input type="text" name="search" id="search" placeholder="Search Details">
    </div>
    <ul class="list-group" id="result"></ul>
    <br />
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $('#search').keyup(function () {
        $('#result').html('');
        var searchField = $('#search').val();
        var expression = new RegExp(searchField, 'i');
        $.getJSON('data.json', function(data){
            $.each(data, function(key, value){
                if (value.name.search(expression) != -1 || value.location.search(expression) != -1) {
                    $('#result').append('<li class="list-group-item"><span class="muted">'+value.userId+'</span> | <span class="text-muted">'+value.id+'</span> | <span class="text-muted">'+value.title+'</span> | <span class="text-muted">'+value.body+'</span></li>')
                }
            });
        });
    });
});

</script>