如何从 API 获取 JSON 文件中的某个数据片段？

Question

我对 API 和脚本很陌生。我想知道如何在我的网站上打印一段数据，例如：我想在下次启动时只打印“名称”标签https://launchlibrary.net/1.4/launch/next/1

Answer 1

您可以在获取数据后尝试使用函数。您可以使用 或 方法 从下面的 api 示例中获取数据。mapfetchjquery ajax

映射返回到新数组，如果你只需要取第一个元素，那么你可以说

data.launches.map(x=>x.name )[0] 

$(document).ready(function(){

        $.ajax({

            type: 'GET',

            url: "https://launchlibrary.net/1.4/launch/next/1",

            success:function(data){

               console.log(data.launches.map(x=>x.name ));

            }

        });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

使用纯 js

fetch('https://launchlibrary.net/1.4/launch/next/1')

    .then(r => r.json())

    .then(data => console.log(data.launches.map(x=>x.name)));

Answer 2

如果该 API 设置了适当的 CORS 标头（从我的测试来看似乎确实如此），则可以使用名为 fetch 的本机浏览器函数调用它。

例如：

fetch('https://launchlibrary.net/1.4/launch/next/1')

    // Convert response to JSON

    .then(r => r.json())

    // Show name in console

    .then(data => console.log(data.launches[0].name));

然后，您可以使用数据与 DOM 进行交互，如下所示：

fetch('https://launchlibrary.net/1.4/launch/next/1')

    // Convert response to JSON

    .then(r => r.json())

    // Show name to user

    .then(launchData => alert(launchData.launches[0].name));