使用 PHP 从 API 获取 JSON 响应，使用 Javascript 将 JSON 数据格式化为 HTML

【问题标题】：Get JSON response from API using PHP, format the JSON data into HTML using Javascript使用 PHP 从 API 获取 JSON 响应，使用 Javascript 将 JSON 数据格式化为 HTML
【发布时间】：2018-10-14 21:24:51
【问题描述】：

我对编码很陌生。

我正在使用 PHP 从 API 获取 JSON 响应。 JSON 响应由 Web 上的页面的标题和 URL 组成。示例 JSON 响应位于页面底部。

如何使用 PHP 将此 JSON 数据中的每个项目写入我的 HTML 页面的 body 标记中？我想创建 HTML“a”标签，其中文本是 JSON 名称值，href 是每个项目的 JSON url 值。

在我使用 PHP 从 API 中获取 JSON 数据后，它会在哪里结束，然后我如何访问它并使用 PHP 对其进行格式化？我正在使用 PHP 来保持我的 API 访问密钥服务器端，因此客户端看不到它。这是我的代码：

<?php
$accessKey = "12345678";
$endpoint = '*Imaginary API endpoint*';
$term = 'hi';

function APIResponse ($url, $key, $query) {
    $headers = "Ocp-Apim-Subscription-Key: $key\r\n";
    $options = array ('http' => array (
                          'header' => $headers,
                           'method' => 'GET'));
    $context = stream_context_create($options);
    $result = file_get_contents($url . "?q=" . urlencode($query), false, $context);
    $headers = array();
    foreach ($http_response_header as $k => $v) {
        $h = explode(":", $v, 2);
        if (isset($h[1]))
            if (preg_match("/^APIs-/", $h[0]) || preg_match("/^X-MSEdge-/", $h[0]))
                $headers[trim($h[0])] = trim($h[1]);
    }
    return array($headers, $result);
}

if (strlen($accessKey) == 8) {
    print "Searching the Web for: " . $term . "\n";
    list($headers, $json) = APIResponse($endpoint, $accessKey, $term);
    print "\nRelevant Headers:\n\n";
    foreach ($headers as $k => $v) {
        print $k . ": " . $v . "\n";
    }
    print "\nJSON Response:\n\n";
    echo json_encode(json_decode($json), JSON_PRETTY_PRINT);

} else {
    print("Invalid API subscription key!\n");
    print("Please paste yours into the source code.\n");
}
?>

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<!-- This is the result I'm looking for -->
<a href="<?php echo JSON:webPages:value:name ?>"> <?php echo JSON:webPages:value:id ?></a>

</body>
</html>

JSON Response:

{
    "_type": "SearchResponse",
    "queryContext": {
        "originalQuery": "hi"
    },
    "webPages": {
        "webSearchUrl": "https:\/\/imaginaryapi.com\/search?q=hi",
        "totalEstimatedMatches": 65700000,
        "value": [
            {
                "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.0",
                "name": "Hi | Define Hi at Dictionary.com",
                "url": "https:\/\/www.dictionary.com\/browse\/hi",
                "isFamilyFriendly": true,
                "displayUrl": "https:\/\/www.dictionary.com\/browse\/hi",
                "snippet": "After you insisted, you write that, \u201cno one from the crew would meet my eyes or say hi.\u201d",
                "dateLastCrawled": "2018-10-09T15:57:00.0000000Z",
                "language": "en",
                "isNavigational": false
            },
            {
                "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.1",
                "name": "Fors\u00ed\u00f0a | H\u00e1sk\u00f3li \u00cdslands",
                "url": "https:\/\/www.hi.is\/",
                "about": [
                    {
                        "name": "University of Iceland"
                    }
                ],
                "isFamilyFriendly": true,
                "displayUrl": "https:\/\/www.hi.is",
                "snippet": "Opi\u00f0 fyrir ums\u00f3knir um innritun \u00ed H\u00e1sk\u00f3la \u00cdslands \u00e1 vormisseri 2019 - Takmarka\u00f0ur hluti n\u00e1mslei\u00f0a \u00ed bo\u00f0i. Ums\u00f3knarfrestur \u00ed framhaldsn\u00e1m til 15. okt\u00f3ber og grunnn\u00e1m til 30. n\u00f3vember",
                "deepLinks": [
                    {
                        "name": "Vefp\u00f3stur",
                        "url": "https:\/\/www.hi.is\/haskolinn\/vefpostur"
                    },
                    {
                        "name": "Leit A\u00f0 Starfsf\u00f3lki",
                        "url": "https:\/\/www.hi.is\/starfsmannaleit"
                    },
                    {
                        "name": "S\u00e6kja Um N\u00e1m",
                        "url": "https:\/\/ugla.hi.is\/umsoknir\/index.php"
                    },
                    {
                        "name": "Endurmenntun H\u00ed",
                        "url": "https:\/\/www.hi.is\/nam\/endurmenntun_hi"
                    },
                    {
                        "name": "Stundat\u00f6flur",
                        "url": "https:\/\/www.hi.is\/laeknadeild\/stundatoflur"
                    },
                    {
                        "name": "Fr\u00e9ttir",
                        "url": "https:\/\/www.hi.is\/frettir"
                    }
                ],
                "dateLastCrawled": "2018-10-10T18:35:00.0000000Z",
                "language": "is",
                "isNavigational": false
            },
            {
                "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.2",
                "name": "Hi | Definition of Hi by Merriam-Webster",
                "url": "https:\/\/www.merriam-webster.com\/dictionary\/hi",
                "isFamilyFriendly": true,
                "displayUrl": "https:\/\/www.merriam-webster.com\/dictionary\/hi",
                "snippet": "These example sentences are selected automatically from various online news sources to reflect current usage of the word 'hi.' Views expressed in the examples do not represent the opinion of Merriam-Webster or its editors.",
                "dateLastCrawled": "2018-10-10T10:35:00.0000000Z",
                "language": "en",
                "isNavigational": false
            },
            {
                "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.3",
                "name": "HI - Wikipedia",
                "url": "https:\/\/en.wikipedia.org\/wiki\/HI",
                "isFamilyFriendly": true,
                "displayUrl": "https:\/\/en.wikipedia.org\/wiki\/HI",
                "snippet": "Hi (or Hello) is a frequent act of greeting or welcoming someone.HI or Hi may also refer to:",
                "dateLastCrawled": "2018-10-10T15:53:00.0000000Z",
                "language": "en",
                "isNavigational": false
            },
            {
                "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.4",
                "name": "Hi (@hi) | Twitter",
                "url": "https:\/\/twitter.com\/hi",
                "thumbnailUrl": "https:\/\/www.bing.com\/th?id=OIP.PqKuxRwx55VE6E--5HFwKQAAAA&pid=Api",
                "about": [
                    {
                        "name": "Hi"
                    },
                    {
                        "name": "Hi"
                    }
                ],
                "isFamilyFriendly": true,
                "displayUrl": "https:\/\/twitter.com\/hi",
                "snippet": "The latest Tweets from Hi (@hi). BYEBYE Hi en daarmee ook dit account. We zijn nog wel in de lucht, maar niet actief. Voor servicevragen kun je terecht bij @KPNwebcare. Doei!. Den Haag, Zuid-Holland",
                "dateLastCrawled": "2018-10-05T00:19:00.0000000Z",
                "language": "en",
                "isNavigational": false
            },
            {
                "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.5",
                "name": "H\u00ef Ibiza - Brand-New Club in Ibiza, Spain",
                "url": "https:\/\/www.hiibiza.com\/en",
                "isFamilyFriendly": true,
                "displayUrl": "https:\/\/www.hiibiza.com\/en",
                "snippet": "H\u00ef Ibiza is the brand new club by Ushua\u00efa Entertainment located in the heart of Ibiza clubland, Playa d'en Bossa. The club will stay true to the open-minded spirit of Ibiza, bringing together music lovers to dance, discover and experience the magic of the White Isle.",
                "dateLastCrawled": "2018-10-09T13:58:00.0000000Z",
                "language": "en",
                "isNavigational": false
            },
            {
                "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.6",
                "name": "Danielle Bregoli is BHAD BHABIE \u201cHi Bich \/ Whachu Know ...",
                "url": "https:\/\/www.youtube.com\/watch?v=1NyMSWqIJDQ",
                "about": [
                    {
                        "name": "YouTube"
                    }
                ],
                "isFamilyFriendly": true,
                "displayUrl": "https:\/\/www.youtube.com\/watch?v=1NyMSWqIJDQ",
                "snippet": "\ud83d\udea8STREAM \"Hi Bich\" \ufe0f https:\/\/Atlantic.lnk.to\/hibich \ud83d\udda4\ud83d\udc80\ud83c\udfa4\ud83d\udd25 new songs - \u24f5 video HI BICH & WHACHU KNOW by BHAD BHABIE aka Danielle Bregoli\ud83d\udda4\ud83d\udc45\ud83d\udc34\ud83c\udfc1 produced by Ronn...",
                "dateLastCrawled": "2018-10-08T04:50:00.0000000Z",
                "language": "en",
                "isNavigational": false
            },
            {
                "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.7",
                "name": "Hi - Capture. Write. Publish",
                "url": "http:\/\/hitotoki.org\/",
                "isFamilyFriendly": true,
                "displayUrl": "hitotoki.org",
                "snippet": "pancakes, Hi Meta, writing Full stack writing (and publishing): Welcome to Hi by Craig Mod. Tokyo \u2014 We\u2019d like to welcome you to Hi: A community of writers, journalists, journalers, illustrators, photographers, travelers, poets, and musicians exploring the world, and sharing those explorations throug...",
                "dateLastCrawled": "2018-10-10T20:13:00.0000000Z",
                "language": "en",
                "isNavigational": false
            },
            {
                "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.8",
                "name": "Hi - definition of hi by The Free Dictionary",
                "url": "https:\/\/www.thefreedictionary.com\/hi",
                "isFamilyFriendly": true,
                "displayUrl": "https:\/\/www.thefreedictionary.com\/hi",
                "snippet": "2. HI - a state in the United States in the central Pacific on the Hawaiian Islands",
                "dateLastCrawled": "2018-10-09T09:35:00.0000000Z",
                "language": "en",
                "isNavigational": false
            },
            {
                "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.9",
                "name": "Hi, Hi, Hi - Wikipedia",
                "url": "https:\/\/en.wikipedia.org\/wiki\/Hi,_Hi,_Hi",
                "about": [
                    {
                        "name": "Hi, Hi, Hi"
                    },
                    {
                        "name": "Hi, Hi, Hi"
                    },
                    {
                        "name": "Hi, Hi, Hi"
                    }
                ],
                "isFamilyFriendly": true,
                "displayUrl": "https:\/\/en.wikipedia.org\/wiki\/Hi,_Hi,_Hi",
                "snippet": "\"Hi, Hi, Hi\" is a song written by Paul and Linda McCartney and performed by Wings. It was released as a double A-side single with \"C Moon\" in 1972.The song was recorded around the same time as \"C Moon\", in November 1972.",
                "snippetAttribution": {
                    "license": {
                        "name": "CC-BY-SA",
                        "url": "http:\/\/creativecommons.org\/licenses\/by-sa\/3.0\/"
                    },
                    "licenseNotice": "Text under CC-BY-SA license"
                },
                "dateLastCrawled": "2018-10-10T20:41:00.0000000Z",
                "language": "en",
                "isNavigational": false
            }
        ],
        "someResultsRemoved": true
    },

    "rankingResponse": {
        "mainline": {
            "items": [
                {
                    "answerType": "WebPages",
                    "resultIndex": 0,
                    "value": {
                        "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.0"
                    }
                },
                {
                    "answerType": "WebPages",
                    "resultIndex": 1,
                    "value": {
                        "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.1"
                    }
                },
                {
                    "answerType": "WebPages",
                    "resultIndex": 2,
                    "value": {
                        "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.2"
                    }
                },
                {
                    "answerType": "WebPages",
                    "resultIndex": 3,
                    "value": {
                        "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.3"
                    }
                },
                {
                    "answerType": "WebPages",
                    "resultIndex": 4,
                    "value": {
                        "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.4"
                    }
                },
                {
                    "answerType": "WebPages",
                    "resultIndex": 5,
                    "value": {
                        "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.5"
                    }
                },
                {
                    "answerType": "WebPages",
                    "resultIndex": 6,
                    "value": {
                        "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.6"
                    }
                },
                {
                    "answerType": "WebPages",
                    "resultIndex": 7,
                    "value": {
                        "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.7"
                    }
                },
                {
                    "answerType": "WebPages",
                    "resultIndex": 8,
                    "value": {
                        "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.8"
                    }
                },
                {
                    "answerType": "WebPages",
                    "resultIndex": 9,
                    "value": {
                        "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.9"
                    }
                },
                {
                    "answerType": "RelatedSearches",
                    "value": {
                        "id": "https:\/\/imaginaryapi.com\/api\/v7\/#RelatedSearches"
                    }
                }
            ]
        }
    }
}

【问题讨论】：

  • 尝试以下方法：$data = json_decode($json); foreach ($data-&gt;webPages-&gt;value as $value) { echo "$value-&gt;name -&gt; $value-&gt;id\n"; }

标签： php html json


【解决方案1】：

要打印数据，可以使用：

$result = json_decode ( $json, true);
foreach ( $result["webPages"]["value"] as $data)
{
  echo "<a href=\"" . urlencode ( $data["id"]) . "\">" . $data["name"] . "</a>\n";
}

我喜欢使用 json_decode() 方法返回数组而不是对象，使用 true 作为第二个参数，但如果你愿意，也可以将它用作对象。

【讨论】：

  • 正是我需要的。谢谢！
【解决方案2】：

在 javascript 部分试试这个...

document.body.onload = addLink;

function addLink () {

  // FIRST method : Embedding php in javascripts
  <?php foreach(json_encode($json)->webPages->value as $value) { ?>

    // Create a new markup
    var newContent = $('<a href="<?php echo $value->url ?>"><?php echo $value->id ?></a>');

    // And add the text node to your div by it's class / id
    $('.link').appendChild(newContent);

  <?php } ?>

  //////////////
  // ...OR... //
  //////////////

  // SECOND method : Pass php variable (in this case it's JSON object) into javascripts
  var json = <? echo json_encode($json)->webPages->value ?>;
  json.forEach(function(value){

    // Create a new markup
    var newContent = $('<a href="' + value.url + '">' + value.id + '</a>');

    // And add the text node to your div by it's class / id
    $('.link').appendChild(newContent);

  });

}

希望它有效，因为我不是日常的 php 编码器。

【讨论】：

  • 感谢您的回复，我觉得这很有帮助！！
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-09-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-09-16
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode