Objects and JSON in JavaScript

JSON is a lightweight data interchange format, easy for humans to read, and easy for machines to parse and generate.

The relationship between JavaScript objects and JSON is very close. In fact, JSON stands for JavaScript Object Notation (so imagine how close their relationship is 😉).

Working with JSON in JavaScript is a common task, as JSON is a widely used format in web applications and APIs for data interchange.

Therefore, let’s look at the methods we have to work with them.

JSON Structure

In JavaScript, JSON is represented as a text string that follows a structure similar to that of a JavaScript object or array, but in plain text format.

JSON uses a syntax similar to JavaScript objects, but there are some key differences:

For example,

{
    "name": "Luis",
    "age": 30,
    "skills": ["JavaScript", "Python", "Java"]
}

const person = {
    name: "Luis",
    age: 30,
    skills: ["JavaScript", "Python", "Java"],
    greet: function() { //... }
}

Conversion between Objects and JSON

JavaScript provides built-in methods to convert objects to JSON and vice versa: JSON.stringify() and JSON.parse().

const person = {
  name: 'Juan',
  age: 30,
  city: 'Madrid'
};

const personJSON = JSON.stringify(person);
console.log(personJSON);
// Result: {"name":"Juan","age":30,"city":"Madrid"}

const personJSON = '{"name":"Juan","age":30,"city":"Madrid"}';

const person = JSON.parse(personJSON);
console.log(person);
// Result: { name: 'Juan', age: 30, city: 'Madrid' }

Errors when working with JSON

When converting JSON to objects using JSON.parse(), errors may occur if we try to parse invalid JSON.

const invalidJson = 'notJSON';

try {
  const object = JSON.parse(invalidJson);
  console.log(object);
} catch (error) {
  console.error('Error parsing JSON:', error.message);
}
// Result: Error parsing JSON: Unexpected token o in JSON at position 0