Tag: json

How to create SAP UI5 Responsive table with JSON Data

This post contains the actual XML View code and the controller javascript code to construct a SAP UI5 Responsive table with JSON data of type sap.m.Table and connent it to JSON Data

            <mvc:View  
                xmlns:mvc="sap.ui.core.mvc"
                xmlns="sap.m"
                controllerName="initialView.controller"                
                displayBlock="true">
                <Page id="page1" title="Customers1" showHeader="true" enableScrolling="true"
                        class="sapUiContentPadding">
                      <Table id="Customers" headerText="Customers" items="{path: '/'}" >
                        <columns>
                            <Column>
                              <Text text="Customer ID" />
                            </Column>
                            <Column>
                              <Text text="Customer Name" />
                            </Column>                            
                        </columns>
                        <items>
                            <ColumnListItem>
                                <cells>
                                    <Text text="{Id}" />
                                </cells>
                                <cells>
                                    <Text text="{Name}" />
                                </cells>                                
                            </ColumnListItem>
                        </items>
                      </Table>
                </Page>
            </mvc:View>

Below controller code shows how the JSON Data is set on the Responsive table of type sap.m.Table

              onInit : function() {
                var jsonD = [
                  {Id : '1000', Name : 'Vikas'},
                  {Id : '1001', Name : 'Rao'}
                ];

                var jsonM = new sap.ui.model.json.JSONModel(jsonD);
                var table1 = this.getView().byId('Customers');
                table1.setModel(jsonM);
              }

Getting started with JSON in JavaScript

JSON is an acronym of JavaScript Object Notation. It is a storage format derived from JavaScript programming language and it is language independent.It is a text-based data format that is used to store and transfer data. It’s quite important to know while data which we fetch from external API are always in JSON format.

  • It can transport the data from server to client, client to server and server to server.
  • It can generate and store data from user input.
  • It can also build and verify data

JSON Syntax:

JSON objects are in a .json file which is quite similar to object literal syntax which consists of name, value pairs but the format is text only. Both the name and values are quoted in double quotation.

Points to remember:

  • Data is in name/value pair.
  • Curly braces hold objects.
  • Square brackets hold arrays.
  • Data is separated by commas.

If JSON objects are in .js or .html file then the syntax is

In terms of Syntax JSON is similar to JavaScript objects but the name in JavaScript objects are not in double quotes.

JSON Data:

JSON data is written as name and a value pairs. A name/value pair is like field name in double quotes followed by colon (:), then value.

JSON Objects:

As mentioned earlier JSON objects are in curly braces.

JSON Arrays:

JSON arrays are in square brackets.

Here ‘names’ is an array, and it contains 3 objects. Each object is a record of a person.

Accessing JSON Data:

JSON data can be accessed using dot (.) notation.

Output:
Anna
Mills

We can also use square brackets to access JSON data.

JSON vs JavaScript Objects:

JSONJavaScript Objects
The name in name/value pair should be in double quotesThe name can be without double quotes
JSON cannot contain functionsJavaScript objects can contain functions
JSON can be created and used by other programming languagesJavaScript objects can only be used in JavaScript.

Converting JSON to JavaScript Object:

You can convert JSON data to JavaScript object using in-built JSON.parse() function.

Output:

Converting JavaScript object to JSON:

You can convert JavaScript object to JSON using in-built JSON.stringify().

Output:

Keypoints to note:

  • JSON syntax is like Object literal where both name-value pair is in inverted commas.
  • JSON.stringify() Object to JSON
  • JSON.parse() JSON to Object