Skip to content
Related Articles

Related Articles

Improve Article

How to select values from a JSON object using jQuery ?

  • Last Updated : 18 Jan, 2021
Geek Week

In this article, we will select values from a JSON object and display them on the browser using jQuery. To select values from a JSON object to webpage, we use append() method. 

This append() method in jQuery is used to insert some content at the end of the selected elements.


$(selector).append( content, function(index, html) )

Approach: First we store a JSON object containing (key, value) pair in a variable. We have created a button using <button> element and when we click the button, the jQuery function called with selector and click events. After click the button, the attr() method added the name attribute with <select> element. The <option> element is appended to each element using append() and each() methods.



<!DOCTYPE html>
<html lang="en">
        How to select values from a
        JSON object using jQuery?
    <!-- Import jQuery cdn library -->
    <script src=
        $(document).ready(function () {
            var json = [
                { "name": "GFG", "text": "GFG" },
                { "name": "Geeks", "text": "Geeks" },
                { "name": "GeeksforGeeks", 
                    "text": "GeeksforGeeks" }
            $('button').click(function () {
                var select = $("<select></select>")
                    .attr("name", "cities");
                $.each(json, function (index, json) {
<body style="text-align: center;">
    <h1 style="color: green;">
        How to select values from a
        JSON object using jQuery?
    <div id="GFG"></div>


Before Click Button:

After Click Button:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

My Personal Notes arrow_drop_up
Recommended Articles
Page :