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

时间:2022-10-08 18:36:27

I'm very new to coding.

我对编码很新。

I'm using PHP to get a JSON response from an API. The JSON response consists of Titles and URLs to pages on the web. The sample JSON response is at the bottom of the page.

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

How do I write each item in this JSON data using PHP to my HTML page in the body tag? I want to create HTML "a" tags with the text being the JSON name value and the href being the JSON url value for each item.

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

Where does the JSON data end up after I get it from the API using PHP, and then how do I access it and format it with PHP? I'm using PHP to keep my API access key server side so the client can't see it. Here is my code:

在我使用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 个解决方案

#1


0  

To print the data, you can use:

要打印数据,您可以使用:

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

I like to use json_decode() method returning array instead of object, using true as second parameter, but you can also use it as object if you prefer.

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

#2


0  

Try this in the javascript section...

在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);

  });

}

Hopefully it works, because I'm not a daily php coder.

希望它有效,因为我不是每天的php编码器。

#1


0  

To print the data, you can use:

要打印数据,您可以使用:

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

I like to use json_decode() method returning array instead of object, using true as second parameter, but you can also use it as object if you prefer.

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

#2


0  

Try this in the javascript section...

在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);

  });

}

Hopefully it works, because I'm not a daily php coder.

希望它有效,因为我不是每天的php编码器。