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

时间:2018-10-14 21:24:52

标签: php html json

我对编码非常陌生。

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

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

使用PHP从API获得JSON数据后,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"
                    }
                }
            ]
        }
    }
}

2 个答案:

答案 0 :(得分:0)

要打印数据,可以使用:

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

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

答案 1 :(得分:0)

在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程序员。