我需要解析一个JSON文件并在我的网页上本地显示它的数据

时间:2016-09-26 06:22:22

标签: javascript jquery html json ajax

我正在尝试使用ajax请求获取我的JSON文件并且它没有加载,我想要的是通过使用一些包含已解析数据的变量来显示json文件中包含的一些特定数据,并且它的输出将显示在浏览器的网页上。但是当我运行时它只显示我创建的html元素,并且在调试器中我发现click函数之后的代码并没有执行所有。我使用的代码如下:

public void onBindViewHolder(final ViewHolder viewHolder, final int i) { 

    String item = testItems.get(i).getTestname();     
    viewHolder.tvTestList.setText(item );    
    viewHolder.tvTestList.setOnClickListener(new View.OnClickListener()     {  
        @Override  
        public void onClick(View view) {  
          Context context = view.getContext();    
          Intent detailsIntent = new Intent(context, DetailsActivity.class);  
          mContext.startActivity(detailsIntent);  
        }  
    });  
}  

我已将此文件加载到项目资源管理器中的文件夹中。

2 个答案:

答案 0 :(得分:0)

$。parseJSON(data)可以返回一个数组尝试按索引访问

json[0].name 

然后

$('#results').html('Plugin name: ' +  json[0].name +
                       '<br />Author: ' +  json[0].author.name);

答案 1 :(得分:0)

上面的代码在chrome中不起作用,因为它不允许跨源请求。为避免这种情况,您可以在Web服务器中运行代码。没有Web服务器的Ajax URL请求在chrome中不起作用。检查firefox是否有效。因此,最好在Web服务器中运行您的应用程序(html +数据)。请检查以下代码

//When DOM loaded we attach click event to button
        $(document).ready(function () {
            //after button is clicked we download the data
            $('.button').click(function () {
                debugger;
                //start ajax request
                $.ajax({
                    url: "data.json",
                    //force to handle it as text
                    dataType: "text",
                    success: function (data) {

                        //data downloaded so we call parseJSON function
                        //and pass downloaded data
                        var json = $.parseJSON(data);
                        //now json variable contains data in json format
                        //let's display a few items
                        $('#results').html('Plugin name: ' + json.name + '<br />Author: ' + json.author.name);
                    }
                });
            });
        });
.button{
            margin:20px;
            font-size:16px;
            font-weight: bold;
            padding:5px 10px;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Reading Json Data from Json File</title>
</head>
<body>
<a href="data.json" target="_blank">Open Json File</a><br />
    <input type="button" value="Get and Parse JSON" class="button" /><br />
    <span id="results"></span>

</body>
</html>