Skip to main content

Loop through json data using javascript

By

Introduction:

In this article I am going to explain about how to loop through the JSON. It is explained using two drop down values which means for city and std codes.

Explanation:

In  our code we have two drop down lists. One for selecting city and another one for loading the corresponding stdcodes. The javascript function is used to loop through this json data. In this javascript code we first removing all the items from the stdcode dropdown. After that we are getting the comma separated values of the particular selected city. Then we are splitting the comma separated stdcodes and loading it to the stdcode drop down. The source code for this is given below

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList runat="server" ID="city" onchange="loadSTDCode(this.value);">
<asp:ListItem Text="Select City" Value="" />
<asp:ListItem Text="Bangalore" Value="0" />
<asp:ListItem Text="Chennai" Value="1" />
<asp:ListItem Text="Delhi" Value="2" />
</asp:DropDownList>

<asp:DropDownList ID="stdcode" runat="server">
</asp:DropDownList>
</div>
<script type="text/javascript">
function loadSTDCode(cityid) {
var list = document.getElementById('<%=stdcode.ClientID %>');
var optlength = list.options.length;
for (var i = 0; i < optlength; i++) {
    list.remove(0);

}
var city = 'c' + cityid;

var arr = [{ "c1": "562,343,534", "c2": "79,123,124,967", "c3": "532", "c4": "183", "c5": "240", "c6": "80", "c0": "1521,1522,1520,151,1523"}];
for (var i = 0; i < arr.length; i++) {
    var obj = arr[i];
    for (var key in obj) {
        var attrName = key;

        var attrValue = obj[key];
        if (attrName == city) {

            var posi = attrValue.indexOf(",");
            if (posi == -1) {
                var opt = document.createElement("option");
                document.getElementById('<%=stdcode.ClientID %>').options.add(opt);
                opt.text = attrValue;
                opt.value = attrValue;
            }
            else {
                var mySplitResult = attrValue.split(",");
                for (var i = 0; i < mySplitResult.length; i++) {
                    var opt = document.createElement("option");
                    document.getElementById('<%=stdcode.ClientID %>').options.add(opt);
                    opt.text = mySplitResult[i];
                    opt.value = mySplitResult[i];
                }
            }
        }
    }
}
}
</script>
</form>
</body>
</html>

If you have any doubts in above code then enter it in comments.

Do you like this article. Then comment here or share with your friends. Or like our Facebook  page.

Download Source Code Here




Labels:

Comments

Post a Comment

Popular posts from this blog

Code To Convert rupees(numbers) into words using C#.Net

By
Introduction: In my previous article I have explained about how to validate emailid using javascript . In this article I am going to explain about code used to convert rupees(numbers) into words using C#.Net . Explanation: For explanation purpose I have a page. It has a textbox to input the numbers. And when you click on the convert to words button then it will convert the input numbers into words and shows it in the below label. Below is the C# code used to do this functionality. public static string NumbersToWords( int inputNumber) {     int inputNo = inputNumber;     if (inputNo == 0)         return "Zero" ;     int [] numbers = new int [4];     int first = 0;     int u, h, t;     System.Text. StringBuilder sb = new System.Text. StringBuilder ();     if (inputNo < 0)     { ...
16 comments
Read More...

C# Extension Methods Example

By
In this article i am going to explain about Extension Methods  with example. Extension methods enable you to "add" methods to existing types without creating a new derived type, recompiling, or otherwise modifying the original type. Extension methods are a special kind of static method, but they are called as if they were instance methods on the extended type. For client code written in C# and Visual Basic, there is no apparent difference between calling an extension method and the methods that are actually defined in a type. If you do implement extension methods for a given type, remember the following points: An extension method will never be called if it has the same signature as a method defined in the type. Extension methods are brought into scope at the namespace level. For example, if you have multiple static classes that contain extension methods in a single namespace named Extensions, they will all be brought into scope by the using Extensions; directive. ...
Post a Comment
Read More...

Dynamically programmatically add contols at run time Asp.Net

By
Introduction: In my previous article I have explained about What is View State? How to Store and retrieve values from View State . In this article I am going to explain how to add controls programmatically on run time. Explanation: This example adds a text box and button to a Web Forms page at run time. It also dynamically binds an event handler to the button's   Click   event. The handler displays the values of the dynamically generated text box. The controls are added into a   Panel   Web server control, which acts as a placeholder. The controls are separated in the panel with line breaks (HTML <BR> elements), which are added to the panel using the   LiteralControl   control.
Post a Comment
Read More...