JSON Tutorial: Usage with JavaScript or PHP

JSON Tutorial: Usage with JavaScript or PHP

JSON is used to transmit data between a server and a browser. Here is a basic example of what might be in a string. As you can see, it's a…

As you can see, it's a human readable format of data that might traditionally be stored in a table. Some companies might have public .json files located that you can access and extract data from (an API you can connect to). You might also save a .json file somewhere in your project that you want to extract data from.

Goals

JSON data can be accessed and utilized with many programming languages. In this tutorial, we'll learn how to access JSON with PHP and JavaScript.

Prerequisites

What is JSON?

JSON stands for JavaScript Object Notation. It is data saved in a .json file, and consists of a series of key/value pairs.

{ "key": "value" }

The value of any JSON key can be a string, Boolean, number, null, array, or object. Comments are not allowed in JSON.

Although JSON resembles an object or an array, JSON is a string. A serialized string, which means it can later be parsed and decoded into data types.

Using data from JSON with PHP

First, to drill in that JSON is simply a string, we're going to write JSON into a PHP string and apply it to a variable called $data.

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

Then we'll use the json_decode() function to convert the JSON string into a PHP object.

$character = json_decode($data);

Now we can access it as a PHP object.

echo $character->name;

Here's the whole file.

<?php

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

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

Here is the output.

Aragorn

Accessing a JSON feed from a URL

From here out, we'll put all JSON data into its own .json file. This way, we can retrieve the contents of the file instead of keeping it as a PHP string.

Here's what data.json will look like.

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

And here's how we'll extract that data in 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

In order to get one entry, we'll have to access the appropriate array number. Remember, counting begins with 0 in programming.

echo $characters[0]->name;
Aragorn

I can access all the data in the array with a foreach loop.

foreach ($characters as $character) {

api javascript php tutorial

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Consume Web API Post method in ASP NET MVC | Calling Web API | Rest API Bangla Tutorial

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, I will discussed about how to consume Web API Get method and display records in the ASP.NET View. Here, ...

Consume Web API Get method in ASP NET MVC | Calling Web API | Rest API Bangla Tutorial

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, I will discussed about How to Consume Web API Get method in ASP NET MVC. Blog : http://aspdotnetexplorer...

Consume Web API Put method in ASP NET MVC | Calling Web API | Rest API Bangla Tutorial

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, we learned how to consume Web API Get and Post methods in the ASP.NET View. Here, we will see how to con...

Consume Web API Delete Method in ASP NET MVC | Calling Web API | Rest API Bangla Tutorial

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, we learned how to consume Web API Get,Post and PUT methods in the ASP.NET View. Here, we will see how to...

Top 10 API Security Threats Every API Team Should Know

Learn what are the most important API security threats engineering leaders should be aware of and steps you can take to prevent them