Article Categories

Selected Reading

Parse JSON in JavaScript to display a specific name/value pair?

Javascript Web Development Object Oriented Programming

To parse JSON in JavaScript, you can use the native JSON.parse() method or jQuery's parseJSON() function. To display specific name/value pairs, you can use array methods like forEach() or jQuery's $.each() function.

Using Native JSON.parse()

The modern approach uses the built-in JSON.parse() method:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parse JSON Example</title>
</head>
<body>
    <div id="output"></div>
    
    <script>
        const APIData = '[{"Name":"John","Age":21},{"Name":"David","Age":24},{"Name":"Bob","Age":20}]';
        const parsedData = JSON.parse(APIData);
        
        // Display names in the webpage
        const outputDiv = document.getElementById('output');
        parsedData.forEach(function(person) {
            outputDiv.innerHTML += '<p>Name: ' + person.Name + '</p>';
            console.log(person.Name);
        });
    </script>
</body>
</html>

John
David
Bob

Using jQuery parseJSON()

If you're using jQuery, you can use the parseJSON() method with $.each():

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery JSON Parse</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="names"></div>
    
    <script>
        const APIData = '[{"Name":"John","Age":21},{"Name":"David","Age":24},{"Name":"Bob","Age":20}]';
        const getObject = jQuery.parseJSON(APIData);
        
        $.each(getObject, function(index, obj) {
            $('#names').append('<p>' + obj['Name'] + ' is ' + obj['Age'] + ' years old</p>');
            console.log(obj['Name']);
        });
    </script>
</body>
</html>

John
David
Bob

Accessing Specific Properties

You can access any specific property from the parsed JSON data:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Access Specific Properties</title>
</head>
<body>
    <div id="result"></div>
    
    <script>
        const APIData = '[{"Name":"John","Age":21},{"Name":"David","Age":24},{"Name":"Bob","Age":20}]';
        const parsedData = JSON.parse(APIData);
        
        // Access only ages
        parsedData.forEach(function(person, index) {
            document.getElementById('result').innerHTML += 
                '<p>Person ' + (index + 1) + ' Age: ' + person.Age + '</p>';
            console.log('Age:', person.Age);
        });
    </script>
</body>
</html>

Age: 21
Age: 24
Age: 20

Comparison

Method	Dependency	Browser Support	Recommended
`JSON.parse()`	None (Native)	All modern browsers	Yes
`jQuery.parseJSON()`	jQuery library	Depends on jQuery version	Only if using jQuery

Conclusion

Use native JSON.parse() for modern JavaScript applications, as it's built-in and widely supported. jQuery's parseJSON() is useful only when you're already using jQuery in your project.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

627 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next