Feed a Json Array With Brackets Into a Data Attribute via Jquery

JavaScript Object Notation (JSON) is a convenient way to pass values back and forth between your website pages. JSON takes over where XML left off. While XML is still popular for some legacy applications, JSON is the newest format and useful to know as a developer. JSON is becoming the default when passing values from APIs, so you'll need to know how to parse the information in your own applications. A JSON array is just one type of variable, but they are a bit more complex than a regular JSON value.

Get started with Ajax, jQuery and JSON for developers at Udemy.com.

Basic JSON

Arrays are more complicated structures than regular data types. JSON uses a key-value structure. The following JSON code is an example of a simple key-value pair:

"firstName":"Paul"

As you can see, the key-value pairs are separated using a colon. The first string is the name of the variable. In this example the variable name is "firstName." The next string is the variable's value. In this example, the value is "Paul." You separate multiple values using a comma, so you can add multiple key-values in your JSON structure. The following code shows you how to pass multiple values:

"firstName":"Paul", "firstName":"Jennifer"

This is basic JSON, but you also need to pass objects at some point. JSON indicates values are an object using brackets  { } . The following code is an example of a customer object in JSON:

{"firstName":"John", "lastName":"Smith"}

Notice no name is given to this object, but if you parsed it, you could still get the first and last name of your customer. Use a comma after the ending bracket and you can pass several objects in your JSON string. The following code sends two customer objects in JSON:

{"firstName":"John", "lastName":"Smith"}  , {"firstName":"Paul", "lastName":"Smith"}

Get JSON training with an online course at Udemy.com.

What is an Array?

In other development languages, an array is a variable that holds several values of the same type. You define the array type and then fill it with your variable values. With JSON, it's similar except you don't define a type. The following code is an example of a JSON array:

"customers":[

    {"firstName":"Jason", "lastName":"Smith"},

    {"firstName":"Joan", "lastName":"Smith"},

    {"firstName":"Jennifer", "lastName":"Jones"}

]

Notice the above code is much more complex than the previous examples. The above code is an array of customers. The advantage between this code and the previous object code is that you can loop through the above array more easily, and you have a name for your array. The name makes it easier to identify what is packaged in your JSON string.

Notice that the array in JSON is somewhat similar to what you're used to in other languages, There is a variable name  (customers) and then the list of values is in brackets. Each value is enclosed by brackets.

Just like the other JSON elements, you can add multiple arrays to a JSON string. The following code adds an orders array to the JSON string:

"customers":[

    {"firstName":"Jason", "lastName":"Smith"},

    {"firstName":"Joan", "lastName":"Smith"},

    {"firstName":"Jennifer", "lastName":"Jones"}

],

"orders":[

    {"id":"1", "amount":"$10.00"},

    {"id":"2", " amount ":"$15.00"},

    {"id":"3", " amount ":"$20.00"}

]

Retrieving Values on Your Pages

In most cases, you'll use JSON strings to retrieve values from an API. This API can be your own or an external API on another website. Whatever the case, you need to be able to parse the data from the JSON string to use it on your web pages. You'll probably use JavaScript or jQuery to parse these values. jQuery is a JavaScript library, so you'll notice the syntax for both are similar.

The following code is an example of reading a JSON string and printing the first value to an alert text box:

var customers = jsonString;

alert(customers[0].firstName + " " + customers.[0].lastName );

The above code grabs a JSON string. While this string isn't defined, it can be any string you grab from an API, another web page in your application or a controller in an MVC application. In this example, it's assumed that the jsonString variable contains the vale from the array defined as "customers" in the previous code snippet.

The next JavaScript line is what displays the JSON array value. In this example, the first array value is displayed. It's identified with the array's index value. Since arrays start with the zero index, the first value in the array is "customers[0]." Notice that the value after the period is "firstName" and this corresponds with the variable contained in the array. This is the great thing about JSON. You wouldn't be able to use the variable's name like this in XML. With JSON, you can just use the variable's name, which will then display the variable's value.

The above code shows you how to display one value, but usually you want to loop through an array. In the next example, we'll use jQuery to loop through the customers array. The following code loops through the array and prints the results to an HTML div element named "customers":

$.each(customers, function(index, data) {

                $('#customers').append(data.firstName);

});

This code is a little less intuitive. The function loads the data for the customers array, so you can loop through it. Within the looping function, the "customers" div is used to display the first name for each element in the array. This is a simple display of the array's content, but you can take it a step further and manipulate the values in other ways such as adding them to a text box, sending them to a processing form or displaying them as a hyperlink.

Learn web development from scratch at Udemy.com.

There are many more ways you can use JSON for your applications. If you plan to program for the web, you'll definitely run across JSON for your customers. Even working in corporate, you'll find that knowing JSON will be a requirement when you search for jobs. While JSON is newer technology, it's still good to know XML. Some companies convert XML APIs to JSON to keep up with the latest changes. JSON is definitely easier to work with than XML, so although it takes time to learn, JSON is worth the added effort to move on from legacy XML code.

lynchlabould.blogspot.com

Source: https://blog.udemy.com/json-array/

Share this post