Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML5

Populate Grid from Json using XmlhttpRequest

3.00/5 (2 votes)
23 Mar 2017CPOL1 min read 11.7K   103  
The power of the XmlHttpRequest in Ajax requests to retrieve data from server side

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:

Image 1

You need to populate this grid:

Image 2

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

C++
[
    {"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.

Image 3

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:

Image 4

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

Image 5

History

  • 1st version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)