How to select values from a JSON object using jQuery ? Last Updated : 18 Jan, 2021 Comments Improve Suggest changes Like Article Like Report 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. Syntax: $(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. Example: HTML <!DOCTYPE html> <html lang="en"> <head> <title> How to select values from a JSON object using jQuery? </title> <!-- Import jQuery cdn library --> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script> $(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) { select.append($("<option></option>") .attr("value", json.name).text(json.text)); }); $("#GFG").html(select); }); }); </script> </head> <body style="text-align: center;"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> How to select values from a JSON object using jQuery? </h3> <div id="GFG"></div> <button>Submit</button> </body> </html> Output: Before Click Button: After Click Button: Comment More infoAdvertise with us Next Article How to select values from a JSON object using jQuery ? V vkash8574 Follow Improve Article Tags : Web Technologies JQuery jQuery-Questions Similar Reads How to Update JSON Object Value Dynamically in jQuery? In jQuery, we can update JSON object values dynamically by manipulating the object directly or using utility functions. We will explore two approaches to update JSON object values dynamically in jQuery. Below are the approaches to update JSON object values dynamically in jQuery. Table of Content Usi 3 min read How to get the object's name using jQuery ? In this article, we will learn how to find the name of an element using jQuery. The name attribute can be applied to multiple elements in HTML and is used to specify a name for any element. The name attribute of any element can be found out using the attr() method. This method is used to find the va 2 min read How to Convert HTML Form Field Values to JSON Object using JavaScript? Storing HTML input data into JSON format using JavaScript can be useful in various web development scenarios such as form submissions, data processing, and AJAX requests. Here we will explore how to convert the HTML form input data into the JSON format using JavaScript. ApproachThe HTML file contain 2 min read How to select all on focus in input using JQuery? The select() event is applied to an element using jQuery when the user makes a text selection inside an element or on focus the element. This event is limited to some fields. Syntax: $("selected element").select(); //Select all Input field on focus $("input").select(); //Select Input field on focus 1 min read How to make Basic selects using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making Basic selects using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet" h 1 min read How to make a JSON call using jQuery ? Use the getJSON() function in jQuery to load JSON data. The getJSON() function uses a GET HTTP request to retrieve JSON-encoded data from the server. In this article, we will learn about the jQuery getJSON() function and its implementation through examples. Syntax: $(selector).getJSON(url, data, suc 3 min read How to filter nested JSON object to return certain value using JavaScript ? Given a collection that contains the detail information of employees who are working in the organization. We need to find some values from that nested collections of details. That collection is known as the JSON object and the information inside object are known as nested JSON object. Example 1: We 4 min read How to send a JSON object to a server using Javascript? JavaScript Object Notation (JSON). It is a lightweight data transferring format. It is very easy to understand by human as well as machine. It is commonly used to send data from or to server. Nowadays it is widely used in API integration because of its advantages and simplicity.In this example we ar 2 min read How to get selected text from a drop-down list using jQuery? In this article, we will learn how we can get the text of the selected option in a select tag using jQuery. There are two ways in jQuery that we can use to accomplish this task. Table of Content Using the val() method By using option:selected selector and text() method togehterUsing the val() method 2 min read How to get text value of a selected option in jQuery ? Introduction: In this article, we will see how we can use jQuery to get the text value from the selected option. While working on some form-related user interface, we often use the select option, and to use that, we will surely need those values that are being selected. Approach: We will use select 2 min read Like