Skip to main content

JSON in JavaScript: What it is and how to use it with practical examples

JSON in JavaScript

Learn what JSON is and how to use it in JavaScript. Discover how to read, create, and manipulate data with simple examples for beginners.

What is JSON and what is it used for in programming?​

JSON (JavaScript Object Notation) is a lightweight data interchange format that is easy for humans to read and write, and easy for machines to parse and generate. It is commonly used to transmit data between a server and a web application, as well as to store configurations and structured data.

Differences between JSON and JavaScript​

Although JSON is derived from JavaScript's object syntax, there are key differences between the two:

  • Syntax: JSON uses double quotes for string keys and values, while JavaScript can use either single or double quotes.

  • Data Types: JSON supports a limited set of data types: strings, numbers, objects, arrays, booleans, and nulls. JavaScript has additional data types such as functions, symbols, andundefined

  • Structure: JSON is strictly a data format, while JavaScript is a complete programming language.

Basic JSON Syntax: Keys and Values​

JSON syntax is based on key-value pairs. A key is a string that identifies a value, and the value can be of various data types. Here is a basic example of a JSON object:

{
  "nombre": "Juan",
  "edad": 30,
  "esEstudiante": false,
  "cursos": ["Matemáticas", "Física"],
  "direccion": {
    "calle": "Calle Falsa 123",
    "ciudad": "Springfield"
  }
}

Supported Data Types in JSON​

JSON supports the following data types:

  • Strings: Must be enclosed in double quotes. Example:"Hola, mundo!"

  • Numbers: These can be whole numbers or decimals. Example:42,3.14

  • Objects: Collections of key-value pairs enclosed in curly braces{}. Example: {"clave": "valor"}

  • Arrays: Ordered lists of values enclosed in square brackets[]. Example: ["manzana", "banana", "naranja"]

  • Booleans (Booleans): Values true either false

  • Null: Represents the absence of a value. Example:null

Creating a JSON Object in JavaScript​

To create a JSON object in JavaScript, you can define an object using JavaScript object syntax and then convert it to a JSON string usingJSON.stringify()Here's an example:

const persona = {
  nombre: "Ana",
  edad: 25,
  esEstudiante: true,
  cursos: ["Historia", "Literatura"],
  direccion: {
    calle: "Avenida Siempre Viva 742",
    ciudad: "Springfield",
  },
};

const personaJSON = JSON.stringify(persona);

console.log(personaJSON);

Result:

{
  "nombre": "Ana",
  "edad": 25,
  "esEstudiante": true,
  "cursos": ["Historia", "Literatura"],
  "direccion": { "calle": "Avenida Siempre Viva 742", "ciudad": "Springfield" }
}

Reading and Parsing JSON Data in JavaScript​

To read and parse JSON data in JavaScript, you can use the following methodJSON.parse()This converts a JSON string into a JavaScript object. Here's an example:

const personaJSON =
  '{"nombre":"Ana","edad":25,"esEstudiante":true,"cursos":["Historia","Literatura"],"direccion":{"calle":"Avenida Siempre Viva 742","ciudad":"Springfield"}}';

const persona = JSON.parse(personaJSON);

console.log(persona.nombre); // Ana

console.log(persona.edad); // 25

console.log(persona.direccion.ciudad); // Springfield

Manipulating JSON Data in JavaScript​

Once you've parsed a JSON string into a JavaScript object, you can manipulate the data just like you would with any other object. Here are some examples:

const personaJSON =
  '{"nombre":"Ana","edad":25,"esEstudiante":true,"cursos":["Historia","Literatura"],"direccion":{"calle":"Avenida Siempre Viva 742","ciudad":"Springfield"}}';

const persona = JSON.parse(personaJSON);

// Agregar un nuevo curso

persona.cursos.push("Matemáticas");

// Actualizar la edad

persona.edad = 26;

// Eliminar la propiedad esEstudiante

delete persona.esEstudiante;

console.log(persona);

Example: Storing Data with JSON in Local Storage​

Local Storage is a browser API that allows you to persistently store data in the user's browser. You can use JSON to store complex objects in Local Storage. Here's an example:

// Crear un objeto JavaScript

const usuario = {
  nombre: "Carlos",
  edad: 28,
  preferencias: {
    tema: "oscuro",
    idioma: "español",
  },
};

// Convertir el objeto a una cadena JSON y almacenarlo en Local Storage

localStorage.setItem("usuario", JSON.stringify(usuario));

// Recuperar la cadena JSON de Local Storage y parsearla a un objeto JavaScript

const usuarioGuardado = JSON.parse(localStorage.getItem("usuario"));

console.log(usuarioGuardado.nombre); // Carlos

console.log(usuarioGuardado.preferencias.tema); // oscuro

Reading JSON data from an external file​

You can read JSON data from an external file using the functionfetch()in JavaScript. Here's an example of how to do it:

fetch("datos.json")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
    // Manipular los datos JSON aquí
  })
  .catch((error) => console.error("Error al cargar el archivo JSON:", error));

Using JSON in APIs and HTTP Requests​

JSON is the most commonly used data format in APIs and HTTP requests due to its simplicity and ease of use. When you make a request to an API, the data is usually sent and received in JSON format.

Here's an example of how to make a GET request to an API that returns data in JSON format:

fetch("https://api.example.com/usuarios")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
    // Manipular los datos JSON aquí
  })
  .catch((error) =>
    console.error("Error al hacer la petición a la API:", error),
  );

Converting between JSON and other data formats​

JSON is a very versatile data format and can be easily converted to other data formats such as XML, CSV, etc. Libraries and tools exist to facilitate these conversions. Here's a simple example of how to convert a JSON object to CSV using JavaScript:

function jsonToCsv(json) {
  const keys = Object.keys(json[0]);
  const csv = [
    keys.join(","), // encabezados
    ...json.map((row) =>
      keys.map((key) => JSON.stringify(row[key], replacer)).join(","),
    ),
  ].join("\n");
  return csv;
}

const data = [
  { nombre: "Ana", edad: 25, ciudad: "Springfield" },
  { nombre: "Carlos", edad: 28, ciudad: "Shelbyville" },
];

const csvData = jsonToCsv(data);

console.log(csvData);

Handling Errors When Converting JSON​

When working with JSON, it's important to handle potential errors that may arise during the conversion between JSON strings and JavaScript objects. Here's an example of how to handle errors when parsing a JSON string:

const jsonString = '{"nombre":"Ana","edad":25,"esEstudiante":true}'; // Cadena JSON válida

try {
  const persona = JSON.parse(jsonString);
  console.log(persona);
} catch (error) {
  console.error("Error al parsear JSON:", error);
}

Difference Between XML and JSON in Data Exchange​

XML (eXtensible Markup Language) and JSON (JavaScript Object Notation) are two popular formats for data exchange. Here are some key differences between them:

  • Syntax: XML uses a tag-based syntax, while JSON uses a key-value pair-based syntax.

  • Readability: JSON is generally easier for humans to read and write due to its simplicity, while XML can be more verbose.

  • Size: JSON is typically more compact than XML, which can result in faster transfer times.

  • JavaScript Support: JSON is native to JavaScript, making it easy to use in web applications, while XML requires additional parsing.

Best Practices When Working with JSON in JavaScript​

  • Validate JSON: Always validate JSON strings before parsing them to avoid errors.

  • Handling errors: Use try-catch blocks to handle errors when parsing JSON.

  • Use JSON.stringify with care: When converting objects to JSON, make sure they don't contain circular functions or properties.

  • Keep the structure simple: Avoid overly complex JSON structures to make them easier to handle and understand.

Conclusion​

JSON is an essential tool in modern web development, facilitating the efficient exchange and storage of data. Its simplicity and compatibility with JavaScript make it a popular choice for working with structured data. By mastering JSON, you can improve your data manipulation and API interaction skills, which are fundamental for any web developer.

Resources
Exercises

💻Try this basic exercise on Local Storage and JSON data in JavaScript: