Cómo agregar y modificar datos de un JSON con JavaScript

Como siempre me gusta destacar en mis clases, el manejo de datos es esencial en cualquier aplicación moderna. Uno de los formatos más comunes para el intercambio de datos es JSON (JavaScript Object Notation). En este artículo veremos cómo agregar y modificar datos en un JSON utilizando JavaScript empleando ejemplos prácticos.

¿Qué es JSON?

Si bien ya he definido anteriormente qué es JSON en un artículo donde explico y ejemplifico el tema, en esta ocasión vamos a profundizar sobre como manejar los datos incluidos en un JSON que tenemos en JavaScript.

Vale recordar que JSON es un formato que facilita el intercambio de datos entre un cliente y un servidor, pero que también podemos tener declarado en una variable de JavaScript en nuestro código. Su estructura es similar a la de un objeto en JavaScript, lo que lo hace especialmente fácil de manipular dentro de este lenguaje.

La siguiente es una estructura de datos JSON, en este caso un producto.

{
    "productCode": "P001",
    "productName": "Laptop",
    "price": 1200
}

Para estos ejemplos usará los nombres de variables y keys de JSON en inglés. Si bien pueden declararse en español puede resultar más seguro usarlas en inglés para evitar acentos y otros caracteres especiales. Esto resulta recomendable en especial si trabajamos con equipos de diferentes lugares del mundo, que pueden hablar diferentes idiomas.

Manipulando JSON en JavaScript

Vamos a comenzar con un objeto JSON básico y luego veremos cómo podemos agregar y modificar datos dentro de él.

En este caso vamos a pensar en un array de productos, donde cada producto está representado con datos en formato JSON. Cada producto tiene un código, un nombre y un precio.

const products = [
    {
        "productCode": "P001",
        "productName": "Laptop",
        "price": 1200
    },
    {
        "productCode": "P002",
        "productName": "Smartphone",
        "price": 800
    }
];

Agregar datos a un array de JSON

Para agregar un nuevo producto al array, simplemente podemos utilizar el método push():

const newProduct = {
    "productCode": "P003",
    "productName": "Tablet",
    "price": 450
};

products.push(newProduct);

Ahora, el array products incluirá el nuevo producto y se verá como se muestra en el código que se detalla a continuación:

[
    {
        "productCode": "P001",
        "productName": "Laptop",
        "price": 1200
    },
    {
        "productCode": "P002",
        "productName": "Smartphone",
        "price": 800
    },
    {
        "productCode": "P003",
        "productName": "Tablet",
        "price": 450
    }
]

Modificar un Producto Existente

Ya que tenemos una array de JSON, en primer lugar debemos ubicar el producto deseado. Si definimos que productCode es único, entonces lo podemos usar como campo clave para buscar.

Para modificar un producto existente, podemos encontrar el producto utilizando el método find() de JavaScript y tomar su productCode como referencia. Con el siguiente código vamos a actualizar el precio del producto cuyo código es P002.

const productToUpdate = products.find(product => product.productCode === "P002");
productToUpdate.price = 750;

Un ejemplo con países y ciudades

Consideraremos ahora un JSON que almacena información sobre países y sus ciudades. En este caso no nos basaremos en un array de JavaScript de la misma manera que en el ejemplo anterior.

En esta oportunidad, la variable countries tendrá como claves los nombres de los países cada valor estará representado por el array que contiene un conjunto de ciudades ubicadas en cada país (respectivamente).

Para ser más claro, veamos el ejemplo a continuación:

const countries = {
    "USA": ["New York", "Los Angeles", "Chicago"],
    "Spain": ["Madrid", "Barcelona", "Valencia"]
};

Agregar una nueva ciudad a un país

Para agregar una ciudad a un país, simplemente especificamos el país entre corchetes y así podremos acceder al array de ciudades y utilizar push() como vemos en el siguiente código:

countries["USA"].push("San Francisco");

Agregar un nuevo país con ciudades

Si queremos agregar un país completamente nuevo podemos escribir un código como el siguiente:

countries["Germany"] = ["Berlin", "Munich", "Hamburg"];

Ejemplo con datos de clientes

Supongamos que tenemos un array de JSON que almacena datos simulados de clientes:

const customers = [
    {
        "id": 1,
        "name": "Nombre Apellido 1",
        "email": "test@damiandeluca.com.ar",
        "purchases": ["P001", "P003"]
    },
    {
        "id": 2,
        "name": "Nombre Apellido 2",
        "email": "test2@damiandeluca.com.ar",
        "purchases": ["P002"]
    }
];

Agregar un Nuevo Cliente

Podemos agregar un nuevo cliente al array de la misma manera que lo hicimos con los productos:

let newCustomer = {
    "id": 3,
    "name": "Nombre Apellido 3",
    "email": "test3@damiandeluca.com.ar",
    "purchases": []
};

customers.push(newCustomer);

Modificar los datos de un cliente existente

Para modificar los datos de un cliente, podemos encontrarlo utilizando su id y actualizar su información. Para este ejemplo, nuevamente, utilizamos el método find() para encontrar al cliente por su id y, en este caso, modificamos su email como vemos en el código a continuación:

const customerToUpdate = customers.find(customer => customer.id === 2);
customerToUpdate.email = "newemail@damiandeluca.com.ar";

Uso de map() para modificaciones masivas

Supongamos que queremos incrementar el precio de todos los productos en un 10%. Podemos usar map() para crear un nuevo array con los precios actualizados:

const updatedProducts = products.map(product => {
    return {
        ...product,
        price: product.price  + ((product.price*10)/100)
    };
});

En conclusión

Trabajar con JSON en JavaScript es una tarea fundamental que se simplifica con la práctica. Al comprender cómo agregar y modificar datos en JSON, estaremos mejor equipado para manejar las necesidades dinámicas de nuestras aplicaciones web o las de nuestra empresa. Dominar estas técnicas nos permitirá desarrollar aplicaciones más robustas y flexibles.

Vale señalar que este artículo cubre los aspectos básicos y también incorpora técnicas modernas de JavaScript que permiten escribir código más limpio y eficiente. Pero hay mucho más que aprender acerca de este tema antes de aplicarlo en proyectos que se lleven a producción. El manejo de datos avanzado es un conocimiento esencial si deseamos aplicar a un puesto de trabajo o crecer en nuestra empresa como desarrolladores.

Más sobre Diseño y desarrollo Web

Acerca de Damián De Luca

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.