使用ajax显示来自url的JSON数据

时间:2015-06-13 11:36:54

标签: javascript jquery html ajax json

我们希望使用javascript将json文件中的所有名称显示为div。我们尝试了很多东西,但我们没有成功。

json数据:http://www.smartbustracking.be/json/data.json

这是我们尝试过的:

<button>get data</button>
<div id="resultJson"></div>


<script type="text/javascript" language="javascript">
             $("button").click(function(){
                    $.getJSON("http://www.smartbustracking.be/json/data.json", function(result){
                        for(var x = 0; x < result.length; x++){

                                $.each(result, function(i, field) {
                                    $("#resultJson").append(field[x].name);
                                }

                        }
                    });
            });

如果有人可以帮助我们解决这个问题,那就太棒了

提前致谢!

3 个答案:

答案 0 :(得分:3)

不要在for循环中使用额外的循环来提取名称。

您的数据就像

[0] = {name:"name1"}
[1] = { name: "name2"}

如果[0]中有一个数组并且你想从中提取值,那么你需要在for循环内部另外一个循环来提取该值,就像你想要提取bushaltes的值一样。

试试这个

$("button").click(function() {
    $.getJSON("http://www.smartbustracking.be/json/data.json", function(result) {
        console.log(result);
        for (var x = 0; x < result.length; x++) {
            $("#resultJson").append(result[x].name);
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>get data</button>
<div id="resultJson"></div>

答案 1 :(得分:1)

您需要 for循环 $.each,而不是两者。

这是更新的代码。

 $("button").click(function(){
        $.getJSON("http://www.smartbustracking.be/json/data.json", function(result){
            $.each(result, function(i, field) {
                $("#resultJson").append(field.name);
            });
        });
   });

这里是demo

答案 2 :(得分:0)

我不明白你在[0BC8:0C90][2015-06-13T12:22:38]i000: MUX: ExecutePackageBegin for secondary installer [0BC8:0C90][2015-06-13T12:22:38]i000: MUX: Checking to see if the secondary installer pipe should be created [0BC8:0C90][2015-06-13T12:22:38]i000: MUX: Creating secondary installer pipe: {386a44b6-1b61-419b-9d49-f8a37722dc01} [0BC8:0C90][2015-06-13T12:22:38]i000: MUX: ExecutePackageBegin PackageId: VSSecondaryInstaller_box [0BC8:0FF0][2015-06-13T12:22:38]i000: MUX: Begin connecting secondary installer pipe [11E0:16FC][2015-06-13T12:22:38]i301: Applying execute package: VSSecondaryInstaller_box, action: Install, path: C:\ProgramData\Package Cache\5FE48C2F034F5E6FA0D78333EBDF5D53C17A180A\packages\SecondaryInstaller\SecondaryInstaller.exe, arguments: '"C:\ProgramData\Package Cache\5FE48C2F034F5E6FA0D78333EBDF5D53C17A180A\packages\SecondaryInstaller\SecondaryInstaller.exe" /q /BurnBundleProviderKey {f0b67533-bfb8-4d6e-9e09-50ff776dbfca} /lcid 1033 /BaseDirectory "C:\Install" /xml "C:\Users\XXXXXX\AppData\Local\Temp\-1306121212.xml" /FeedUri "http://go.microsoft.com/fwlink/?LinkID=500682&clcid=0x409" /primarylog "C:\Users\XXXXXX\AppData\Local\Temp\dd_vs_enterprise_20150613115210.log" /skuSpecificHKLMHive Software\Microsoft\VisualStudio\14.0 /launchaction Install /installitems Win10SDK_Hidden;Win10_Emulator;Win10_VSTools;GitHubVS;Chrome;Git /Pipe {386a44b6-1b61-419b-9d49-f8a37722dc01} {b87c4132-5a5c-4174-b9ad-c5574eac6d50} -burn.ancestors={f0b67533-bfb8-4d6e-9e09-50ff776dbfca}' [0BC8:0FF0][2015-06-13T12:22:39]i000: MUX: Finished connecting secondary installer pipe [0BC8:0CC0][2015-06-13T12:22:43]i000: MUX: Updating secondary installer progress display name: Windows 10 SDK 10.0.10069 [0BC8:0CC0][2015-06-13T12:24:14]i000: MUX: Updating secondary installer progress display name: Emulators for Windows Mobile 10.0.10069 [0BC8:0CC0][2015-06-13T12:24:31]i000: MUX: Updating secondary installer progress display name: Tools for Windows 10 Universal Apps (Windows SDK 10.0.10069) [0BC8:0C90][2015-06-13T12:27:41]i000: MUX: ExecuteError: Package (VSSecondaryInstaller_box) failed: Error Message Id: 1603 ErrorMessage: Windows 10 SDK 10.0.10069 : The installer failed. Fatal error during installation. Error code: -2147023293 [0BC8:0C90][2015-06-13T12:27:41]i000: MUX: ExecuteError: Package (VSSecondaryInstaller_box) failed: Error Message Id: 1603 ErrorMessage: Emulators for Windows Mobile 10.0.10069 : The installer failed. Fatal error during installation. Error code: -2147023293 [0BC8:0C90][2015-06-13T12:27:41]i000: MUX: ExecuteError: Package (VSSecondaryInstaller_box) failed: Error Message Id: 1603 ErrorMessage: Emulators for Windows Mobile 10.0.10069 : The installer failed. Fatal error during installation. Error code: -2147023293 [11E0:16FC][2015-06-13T12:28:15]e000: Error 0x80048646: Process returned error: 0x80048646 [11E0:16FC][2015-06-13T12:28:15]e000: Error 0x80048646: Failed to execute EXE package. [0BC8:0C90][2015-06-13T12:28:15]e000: Error 0x80048646: Failed to configure per-machine EXE package. [0BC8:0C90][2015-06-13T12:28:15]i000: MUX: Installation size in bytes for package: VSSecondaryInstaller_box MaxAppDrive: 0 MaxSysDrive: 1845325824 AppDrive: 0 SysDrive: 1668124672 [0BC8:0C90][2015-06-13T12:28:15]i000: MUX: ExecutePackageComplete for secondary installer [0BC8:0C90][2015-06-13T12:28:15]i000: MUX: Disconnecting secondary installer pipe [0BC8:0C90][2015-06-13T12:28:15]i000: MUX: Return Code:0x80048646 Msi Messages:Windows 10 SDK 10.0.10069 : The installer failed. Fatal error during installation. Error code: -2147023293 Result Detail:0 Restart:None [0BC8:0C90][2015-06-13T12:28:15]i000: MUX: Set Result: Return Code=-2147187130 (0x80048646), Error Message=Windows 10 SDK 10.0.10069 : The installer failed. Fatal error during installation. Error code: -2147023293, Result Detail=, Vital=False, Package Action=Install, Package Id=VSSecondaryInstaller_box [0BC8:0C90][2015-06-13T12:28:15]i000: Setting string variable 'BundleResult' to value '0' [0BC8:0C90][2015-06-13T12:28:15]w350: Applied non-vital package: VSSecondaryInstaller_box, encountered error: 0x80048646. Continuing... [11E0:16FC][2015-06-13T12:28:15]i323: Registering package dependency provider: {95160002-1163-0409-1000-0000000FF1CE}, version: 16.0.3104.1200, package: SharePointClientComponents_v16_x64 [11E0:16FC][2015-06-13T12:28:15]i325: Registering dependency: {f0b67533-bfb8-4d6e-9e09-50ff776dbfca} on package provider: {95160002-1163-0409-1000-0000000FF1CE}, package: SharePointClientComponents_v16_x64 [0BC8:0C90][2015-06-13T12:28:15]i000: MUX: ExecutePackageBegin PackageId: IntelliTrace_x86 [11E0:16FC][2015-06-13T12:28:15]i301: Applying execute package: IntelliTrace_x86, action: Install, path: C:\ProgramData\Package Cache\{3E58EC32-ED48-4808-96A0-27040861E587}v14.0.22823\packages\IntelliTraceCore\x86\intelliTrace_net.msi, arguments: ' MSIFASTINSTALL="7" VSEXTUI="1"' [0BC8:0C90][2015-06-13T12:28:17]i000: MUX: Installation size in bytes for package: IntelliTrace_x86 MaxAppDrive: 0 MaxSysDrive: 6504448 AppDrive: 0 SysDrive: 5832704 [0BC8:0C90][2015-06-13T12:28:17]i000: MUX: Return Code:0x0 Msi Messages:0 Result Detail:RollbackCleanup Restart:None [0BC8:0C90][2015-06-13T12:28:17]i000: MUX: Reset execution Result [0BC8:0C90][2015-06-13T12:28:17]i000: MUX: Reset Result 循环中使用jQuery each的原因。

另外,我认为您应该使用for代替result[x].name,因为您将field[x].name作为回调函数的参数:

result

我希望它有所帮助