JSON Tutorial:Anmod om API-data med JavaScript eller PHP

JSON bruges til at overføre data mellem en server og en browser. Her er et grundlæggende eksempel på, hvad der kan være i en .json streng.

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

Som du kan se, er det et menneskeligt læsbart dataformat, der traditionelt kan være gemt i en tabel. Nogle virksomheder har muligvis offentlig .json filer placeret, som du kan få adgang til og udtrække data fra (en API, du kan oprette forbindelse til). Du kan også gemme en .json fil et sted i dit projekt, som du vil udtrække data fra.

Mål

JSON-data kan tilgås og bruges med mange programmeringssprog. I dette selvstudie lærer vi, hvordan du får adgang til JSON med PHP og JavaScript.

Forudsætninger

Du skal enten have en lokal server opsat eller en vært, der kører PHP og noget grundlæggende PHP viden.
Grundlæggende viden om programmeringskoncepter (arrays og variabler) og brug af JavaScript.

Hvad er JSON?

JSON står for J avaS skrift O bject N notation. Det er data gemt i en .json fil, og består af en række nøgle/værdi-par .

{ "key": "value" }

værdien af enhver JSON-nøgle kan være en streng, boolesk, tal, null, matrix eller objekt. Kommentarer er ikke tilladt i JSON.

Selvom JSON ligner et objekt eller en matrix, er JSON en streng . En serialiseret streng, hvilket betyder, at den senere kan parses og afkodes til datatyper.

Brug af data fra JSON med PHP

For det første, for at bore i, at JSON simpelthen er en streng, skriver vi JSON ind i en PHP-streng og anvender den på en variabel kaldet $data .

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

Så bruger vi json_decode() funktion til at konvertere JSON-strengen til et PHP-objekt.

$character = json_decode($data);

Nu kan vi få adgang til det som et PHP-objekt.

echo $character->name;

Her er hele filen.

<?php

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

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

Her er outputtet.

Aragorn

Adgang til et JSON-feed fra en URL

Herfra lægger vi alle JSON-data i deres egen .json fil. På denne måde kan vi hente indholdet af filen i stedet for at beholde det som en PHP-streng.

Her er hvad data.json vil se ud.

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

Og her er, hvordan vi udtrækker disse data i 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

For at få én indgang skal vi have adgang til det relevante arraynummer. Husk, at tælling begynder med 0 i programmering.

echo $characters[0]->name;

Aragorn

Jeg kan få adgang til alle data i arrayet med en foreach løkke.

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

Aragorn
Legolas
Gimli

Her er den fulde PHP-fil.

<?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>';
}

Vi kan vise dataene i en tabel, for eksempel.

<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>

Navn	Løb
Aragorn	Menneske
Gimli	Dværg
Legolas	Elver

Brug af associative arrays

Der er en anden måde, vi kan få adgang til dataene i PHP. Hvis du passerer true som argumentet i json_decode() , bliver dataene et associativt array i stedet for et objekt. Det betyder, at vi vil bruge notation med firkantet parentes[] i stedet for den tynde pil-> .

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

I stedet for ->race , vil vi få adgang til værdien med ['race'] .

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

Human

Og her er, hvordan du får adgang til løkken.

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

Human
Elf
Dwarf

Hent data fra indlejrede arrays

Indtil videre har vi kun brugt JSON-feeds med nøgle/værdi-par, men det er almindeligt at støde på nesting. Her er endnu et nørdet eksempel, som vi kan gemme i en ny fil kaldet 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"
			}
		]
	}
]

Afkodning af feedet.

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

Vi vil være i stand til at få adgang til det indlejrede array ved hjælp af $wizard['key'][0]['key'] i en løkke, eller hvilket nummer der svarer korrekt, hvis du kun vil udskrive én.

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.

Konvertering af et PHP-objekt eller en array til JSON

Ligesom du bruger json_decode() for at gøre JSON til PHP, kan du gøre PHP til JSON med json_encode() .

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

echo json_encode($data);

Vi lavede et PHP-array og kodede det. Her er outputtet:

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

Brug af data fra JSON med JavaScript

Vi vil oprette en JavaScript-variabel kaldet data og anvend JSON-strengen.

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

Nu vil vi bruge JavaScript indbygget i JSON.parse() funktion til at afkode strengen.

data = JSON.parse(data);

Herfra kan vi få adgang til dataene som et almindeligt JavaScript-objekt.

console.log(data[1].name)

Gimli

Og vi kan sløjfe gennem hver iteration med en for løkke.

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.

Det var nemt! Nu bliver vi sandsynligvis nødt til at få adgang til JSON fra en URL. Der er et ekstra trin involveret, hvor vi skal lave en anmodning til filen. Lad os bare tage ovenstående JSON-streng og lægge den i data.json .

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

Nu laver vi en XMLHttpRequest() .

var request = new XMLHttpRequest()

Vi åbner filen (data.json ) via GET (URL) anmodning.

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

Herfra vil vi parse og arbejde med alle vores JSON-data inden for onload funktion.

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

Så indsend endelig anmodningen.

request.send()

Her er den endelige kode.

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()

Og outputtet.

Aragorn is a Human.
Gimli is a Dwarf.

Brug af Hent

Nu kan du også bruge Fetch API til at gøre det samme. Læs, hvordan du bruger JavaScript Fetch API til at få JSON-data for en nemmere metode til at få disse data.

// 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
  })

Brug af jQuery

Som du kan se, er det ikke så svært at hente et JSON-feed med almindelig JavaScript. Det er dog endnu nemmere med jQuery, ved at bruge getJSON() fungere. Hvis du ikke ved, hvordan jQuery fungerer, skal du indlæse jQuery JavaScript-biblioteket før nogen af denne tilpassede kode.

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

Du kan også se jQuery få adgang til JSON via en AJAX-anmodning, som er lidt mere udførlig.

$(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)
    },
  })
})

Begge vil have samme output.

Aragorn

Konklusion

Forhåbentlig har denne artikel lært dig lidt om, hvad JSON er og gør, og hvordan du får adgang til JSON-data med PHP, JavaScript eller jQuery.

JSON Tutorial:Anmod om API-data med JavaScript eller PHP

Mål

Forudsætninger

Hvad er JSON?

Brug af data fra JSON med PHP

Adgang til et JSON-feed fra en URL

Brug af associative arrays

Hent data fra indlejrede arrays

Konvertering af et PHP-objekt eller en array til JSON

Brug af data fra JSON med JavaScript

Brug af Hent

Brug af jQuery

Konklusion

Opret en Netflix-klon fra bunden:JavaScript PHP + MySQL Dag 39

Send et PHP-array til en JavaScript-funktion

Byg en videokonferenceapp fra bunden ved hjælp af WebRTC,Websocket,PHP +JS Dag 36

Byg en videokonferenceapp fra bunden ved hjælp af WebRTC,Websocket,PHP +JS Dag 3

Opret en Netflix-klon fra bunden:JavaScript PHP + MySQL Dag 61

Hvordan kan jeg gemme JavaScript-variabel output i en PHP-variabel?