How to Deep Clone a JavaScript Object

August 12, 2024

javascript json

// Using JSON methods
const deepClone = (obj) => {
    return JSON.parse(JSON.stringify(obj));
};

// Using structured cloning (modern browsers)
const deepCloneModern = structuredClone(obj);

// Usage
const original = { a: 1, b: { c: 2 } };
const clone = deepClone(original);

Continue Reading

Handpicked posts just for you — based on your current read.

التعامل مع JSON في JavaScript: قراءة البيانات وكتابتها

من خلال هذا الدليل، تعلمنا كيفية تحويل الكائنات إلى JSON باستخدام JSON.stringify()، وكيفية قراءة بيانات JSON باستخدام JSON.parse()، وكذلك كيفية جلب البيانات من API والتعامل مع JSON المعقد.

نصائح إضافية:

Sep 26, 2024 Tutorial

AJAX with JavaScript: A Practical Guide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX with Fetch API</title>
</head>
<body>
    <button id="fetchDataBtn">Fetch Data</button>
    <div id="dataOutput"></div>

    <script>
        document.getElementById('fetchDataBtn').addEventListener('click', function() {
            fetch('https://jsonplaceholder.typicode.com/posts/1')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    document.getElementById('dataOutput').innerHTML = `
                        <h3>${data.title}</h3>
                        <p>${data.body}</p>
                    `;
                })
                .catch(error => console.error('There was a problem with the fetch operation:', error));
        });
    </script>
</body>
</html>

With the Fetch API:

Sep 18, 2024 Tutorial