Question

我有一个名为person.json的JSON文件。 JSON文件位于数据文件夹中。 JSON具有以下数据。

 {
   "name": "Goa Wei",
   "age": 31,
   "phone": "202-555-0104",
   "group": 3
 }

单击containerDatadump时，我有html代码可在称为<input id="get" type="submit" value="Get"></input>的div类中显示信息。我已经编写了以下JavaScript代码。

var container = $("div.containerDatadump");
$(document).ready(function () {
    $("input#get").click(function () {
        $.ajax({
            type: "GET",
            url: "data/person.json",
            dataType: "json",

            success: function (data) {
                $.each(data, function (index, item) {
                    $.each(item, function (key, value) {
                        container.append(key + " :" + value + "</br>");

                    });
                    container.append("<br/></br>");
                });
            }
        });
    });

});

我已经做到了。我尽力调试问题，但无法成功。谁能帮我弄清楚我的代码出了什么问题？真的对我有帮助。

Answer 1

我的回答看起来像是放弃了，但是我认为您可以使用ParentComponent而不是常规的ajax调用来改善您的代码。

... import { SharedService } from '../shared.service'; @Component({...}) export class ParentComponent implements OnInit { ... constructor( ..., private sharedService: SharedService ) { } ngOnInit() { ... this.sharedService.childProperty$.subscribe( childProperty => console.log('Got the Child Property from the Shared Service as: ', childProperty) ); } ... }是（more info）的简写ajax调用：

$.getJSON

我还对数据（LINK）使用了JSON Generator，以防止浏览器出现问题。

您认为这样可以使您的代码更简洁。

$.getJSON

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

Answer 2

我认为最大的问题是您在$(document).ready函数之外定义了容器。这意味着您的标记尚不存在，无法正确获取containerDatadump类的句柄。

我使用此JSON Generator工具进行了测试，制作了一个托管在远程服务器上的临时JSON文件。否则，我会在浏览器中遇到CORS问题。

{
  "phone": "202-555-0104", 
  "age": 31, 
  "group": 3, 
  "name": "Goa Wei"
}

利用这些数据，我修改了您的函数以简化ajax成功处理程序中的循环，并将container变量赋值放置在ready函数内，以便其正常工作：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var container = $("div.containerDatadump");
            $("input#get").click(function() {
                $.ajax({
                    type: "GET",
                    url: "http://www.json-generator.com/api/json/get/bOxnwzyhIO?indent=2",
                    dataType: "json",
                    success: function(data) {
                        for (var key in data) {
                            if (data.hasOwnProperty(key)) {
                                console.log(key + " -> " + data[key]);
                                container.append("<div>" + key + " :" + data[key] + "</div><br/>");
                            }
                        }
                    }
                });
            });

        });
    </script>
</head>
<body>
    <input id="get" type="submit" value="Get"></input>
    <div class="containerDatadump" />
</body>
</html>

从json文件检索数据

2 个答案: