Výukový program JSON:Žádost o data API pomocí JavaScriptu nebo PHP

JSON se používá k přenosu dat mezi serverem a prohlížečem. Zde je základní příklad toho, co může být v .json řetězec.

{
  "name": "Tania",
  "title": "Web Developer",
  "website": ""
}

Jak vidíte, jde o lidsky čitelný formát dat, který může být tradičně uložen v tabulce. Některé společnosti mohou mít veřejné .json umístěné soubory, ke kterým máte přístup a můžete z nich extrahovat data (rozhraní API, ke kterému se můžete připojit). Můžete také uložit .json soubor někde ve vašem projektu, ze kterého chcete extrahovat data.

Cíle

K datům JSON lze přistupovat a využívat je v mnoha programovacích jazycích. V tomto tutoriálu se naučíme, jak přistupovat k JSON pomocí PHP a JavaScriptu.

Předpoklady

Musíte mít buď nastavený místní server, nebo hostitele s PHP a základní znalosti PHP.
Základní znalost programovacích konceptů (pole a proměnné) a používání JavaScriptu.

Co je JSON?

JSON je zkratka pro J avaS kript O bjekt N otace. Jsou to data uložená v .json a skládá se z řady párů klíč/hodnota .

{ "key": "value" }

Hodnota z libovolného klíče JSON může být řetězec, logická hodnota, číslo, null, pole nebo objekt. Komentáře nejsou v JSON povoleny.

Přestože JSON připomíná objekt nebo pole, JSON je řetězec . Serializovaný řetězec, což znamená, že jej lze později analyzovat a dekódovat do datových typů.

Používání dat z JSON s PHP

Nejprve, abychom se dostali do toho, že JSON je prostě řetězec, zapíšeme JSON do řetězce PHP a použijeme ho na proměnnou nazvanou $data .

$data = '{
	"name": "Aragorn",
	"race": "Human"
}';

Potom použijeme json_decode() funkce pro převod řetězce JSON na objekt PHP.

$character = json_decode($data);

Nyní k němu můžeme přistupovat jako k objektu PHP.

echo $character->name;

Zde je celý soubor.

<?php

$data = '{
	"name": "Aragorn",
	"race": "Human"
}';

$character = json_decode($data);
echo $character->name;

Zde je výstup.

Aragorn

Přístup ke zdroji JSON z adresy URL

Odtud vložíme všechna data JSON do vlastního .json soubor. Tímto způsobem můžeme načíst obsah souboru místo toho, abychom jej uchovávali jako řetězec PHP.

Zde je soubor data.json bude vypadat.

;[
  {
    name: 'Aragorn',
    race: 'Human',
  },
  {
    name: 'Legolas',
    race: 'Elf',
  },
  {
    name: 'Gimli',
    race: 'Dwarf',
  },
]

A zde je návod, jak tato data extrahujeme v PHP.

$url = 'data.json'; // path to your JSON file
$data = file_get_contents($url); // put the contents of the file into a variable
$characters = json_decode($data); // decode the JSON feed

Abychom získali jeden záznam, musíme získat přístup k příslušnému číslu pole. Pamatujte, že při programování začíná počítání nulou.

echo $characters[0]->name;

Aragorn

Ke všem datům v poli mám přístup pomocí foreach smyčka.

foreach ($characters as $character) {
	echo $character->name . '<br>';
}

Aragorn
Legolas
Gimli

Zde je úplný soubor PHP.

<?php

$url = 'data.json'; // path to your JSON file
$data = file_get_contents($url); // put the contents of the file into a variable
$characters = json_decode($data); // decode the JSON feed

echo $characters[0]->name;

foreach ($characters as $character) {
	echo $character->name . '<br>';
}

Data můžeme zobrazit například v tabulce.

<table>
	<tbody>
		<tr>
			<th>Name</th>
			<th>Race</th>
		</tr>
		<?php foreach ($characters as $character) : ?>
        <tr>
            <td> <?php echo $character->name; ?> </td>
            <td> <?php echo $character->race; ?> </td>
        </tr>
		<?php endforeach; ?>
	</tbody>
</table>

Název	Závod
Aragorn	Člověk
Gimli	Trpaslík
Legolas	Elf

Použití asociativních polí

Existuje další způsob, jak můžeme přistupovat k datům v PHP. Pokud předáte true jako argument v json_decode() , data se stanou asociativním polem namísto objektu. To znamená, že budeme používat zápis v hranatých závorkách[] místo hubené šipky-> .

$characters = json_decode($data, true); // decode the JSON feed and make an associative array

Místo ->race , k hodnotě přistoupíme pomocí ['race'] .

echo $characters[0]['race'];

Human

A zde je návod, jak získat přístup ke smyčce.

foreach ($characters as $character) {
	echo $character['race'] . "\n";
}

Human
Elf
Dwarf

Získávání dat z vnořených polí

Doposud jsme používali pouze zdroje JSON s páry klíč/hodnota, ale běžně se setkáváme s vnořováním. Zde je další praštěný příklad, který můžeme uložit do nového souboru s názvem wizards.json .

[
	{
		"name": "Harry Potter",
		"wand": [
			{
"core": "phoenix feather",
"length": "11 inches",
"wood": "holly"
			}
		]
	},
	{
		"name": "Hermione Granger",
		"wand": [
			{
"core": "dragon heartstring",
"length": "10 and 3/4 inches",
"wood": "vine"
			}
		]
	}
]

Dekódování zdroje.

$url = 'wizards.json';
$data = file_get_contents($url);
$wizards = json_decode($data, true);

K vnořenému poli budeme moci přistupovat pomocí $wizard['key'][0]['key'] ve smyčce nebo jakékoli číslo, které správně odpovídá, pokud chcete vytisknout pouze jedno.

foreach ($wizards as $wizard) {
	echo $wizard['name'] . '\'s wand is ' .
	$wizard['wand'][0]['wood'] . ', ' .
	$wizard['wand'][0]['length'] . ', with a ' .
	$wizard['wand'][0]['core'] . ' core. <br>' ;
}

Harry Potter's wand is holly, 11 inches, with a phoenix feather core.
    Hermione Granger's wand is vine, 10 and 3/4 inches, with a dragon heartstring core.

Převod objektu nebo pole PHP na JSON

Stejně jako používáte json_decode() Chcete-li změnit JSON na PHP, můžete změnit PHP na JSON pomocí json_encode() .

$data = [
	'name' => 'Aragorn',
	'race' => 'Human'
];

echo json_encode($data);

Vytvořili jsme pole PHP a zakódovali ho. Zde je výstup:

{"name":"Aragorn","race":"Human"}

Používání dat z JSON s JavaScriptem

Vytvoříme proměnnou JavaScriptu s názvem data a použijte řetězec JSON.

var data = '[ { "name": "Aragorn", "race": "Human" }, { "name": "Gimli", "race": "Dwarf" } ]'

Nyní použijeme JavaScript vestavěný v JSON.parse() funkce pro dekódování řetězce.

data = JSON.parse(data);

Odtud můžeme přistupovat k datům jako běžný objekt JavaScript.

console.log(data[1].name)

Gimli

A můžeme procházet každou iteraci pomocí for smyčka.

for (var i = 0; i < data.length; i++) {
  console.log(data[i].name + ' is a ' + data[i].race + '.')
}

Aragorn is a Human.
    Gimli is a Dwarf.

To bylo jednoduché! Nyní budeme pravděpodobně potřebovat přístup k JSON z adresy URL. Je s tím spojen další krok, kdy musíme podat žádost do souboru. Vezměme výše uvedený řetězec JSON a vložíme jej do data.json .

;[
  {
    name: 'Aragorn',
    race: 'Human',
  },
  {
    name: 'Gimli',
    race: 'Dwarf',
  },
]

Nyní vytvoříme XMLHttpRequest() .

var request = new XMLHttpRequest()

Otevřeme soubor (data.json ) prostřednictvím požadavku GET (URL).

request.open('GET', 'data.json', true)

Odtud budeme analyzovat a pracovat se všemi našimi daty JSON v rámci onload funkce.

request.onload = function () {
  // begin accessing JSON data here
}

Poté žádost odešlete.

request.send()

Zde je konečný kód.

var request = new XMLHttpRequest()

request.open('GET', 'data.json', true)

request.onload = function () {
  // begin accessing JSON data here
  var data = JSON.parse(this.response)

  for (var i = 0; i < data.length; i++) {
    console.log(data[i].name + ' is a ' + data[i].race + '.')
  }
}

request.send()

A výstup.

Aragorn is a Human.
Gimli is a Dwarf.

Použití funkce Načíst

Nyní můžete k tomu samému použít také rozhraní Fetch API. Přečtěte si, jak používat JavaScript Fetch API k získání dat JSON, kde je snazší způsob získání těchto dat.

// Replace ./data.json with your JSON feed
fetch('./data.json')
  .then((response) => {
    return response.json()
  })
  .then((data) => {
    // Work with JSON data here
    console.log(data)
  })
  .catch((err) => {
    // Do something for an error here
  })

Použití jQuery

Jak vidíte, není příliš obtížné načíst zdroj JSON pomocí prostého JavaScriptu. S jQuery je to však ještě jednodušší s použitím getJSON() funkce. Pokud nevíte, jak jQuery funguje, budete muset načíst knihovnu JavaScriptu jQuery před jakýmkoli tímto vlastním kódem.

$(document).ready(function () {
  $.getJSON('data.json', function (data) {
    // begin accessing JSON data here
    console.log(data[0].name)
  })
})

Můžete také vidět, že jQuery přistupuje k JSON prostřednictvím požadavku AJAX, což je trochu podrobnější.

$(document).ready(function () {
  var data
  $.ajax({
    dataType: 'json',
    url: 'data.json',
    data: data,
    success: function (data) {
      // begin accessing JSON data here
      console.log(data[0].name)
    },
  })
})

Oba budou mít stejný výstup.

Aragorn

Závěr

Doufáme, že vás tento článek trochu naučil o tom, co je a dělá JSON a jak přistupovat k datům JSON pomocí PHP, JavaScriptu nebo jQuery.

Výukový program JSON:Žádost o data API pomocí JavaScriptu nebo PHP

Cíle

Předpoklady

Co je JSON?

Používání dat z JSON s PHP

Přístup ke zdroji JSON z adresy URL

Použití asociativních polí

Získávání dat z vnořených polí

Převod objektu nebo pole PHP na JSON

Používání dat z JSON s JavaScriptem

Použití funkce Načíst

Použití jQuery

Závěr

Vytvořte klon Netflix od nuly:JavaScript PHP + MySQL Den 4

jak získat data do javascriptu z php pomocí json_encode?

Jak volat funkci JavaScript z PHP?

Vytvořte klon Netflixu od nuly:JavaScript PHP + MySQL Den 37

Nejlepší průvodce pro transpilaci kódu PHP

Jak vytvořit jednoduchý ekvivalent foreach php v Javascriptu?