Populate Grid from Json using XmlhttpRequest

• Download source code - 151 KB

Introduction

Ajax (Asynchronous JavaScript And XML) is a technique to create a more powerful app that increases the interactivity, so users will be more satisfied using your app, because they will find that it is more dynamic and faster in requests to server side.

Background

One thing I've learned during my career as a Software Engineer is that there isn't a single to do something, I think that you must adjust tools and components to your specific needs and then you must look for a way to improve it, so consider this code and think of a way to make it better.

Using the Code

I start by creating a new HTML5 file that will render the data that comes from a file called data.json. I will use the object XmlHttpRequest to retrieve an array of n records, so please consider the next files structure:

You need to populate this grid:

With data that is coming in a JSON file (data.json), and this file has the next structure:

[
    {"first": "Ricardo", "last": "Torres", "Position":"Full Stack Developer"},
    {"first": "karina", "last": "Gonzalez", "Position":"Front End Engineer"},
    {"first": "Pepe", "last": "Pillow", "Position":"Associate Director"}
]

In this case, your main.js file is going to mediate between two files (data.json and index.html) to show data.

You can inspect what this main.js is doing by inspecting in Console.

You will find that the instruction JSON.parse takes each item as an object:

As a result, your grid is going to be populated:

History

• 1^st version