Click here to Skip to main content
14,574,529 members

Populate Grid from Json using XmlhttpRequest

Rate this:
3.00 (2 votes)
Please Sign up or sign in to vote.
3.00 (2 votes)
22 Mar 2017CPOL
The power of the XmlHttpRequest in Ajax requests to retrieve data from server side


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.


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:

    {"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


  • 1st version


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


About the Author

Software Developer (Senior)
Colombia Colombia
I am Software Developer with a passion for technology with strong backend (PHP, MySQL, PostgreSQL and SQL Server) and frontend (HTML5, CSS3, AngularJs and KnockOutJs) experience. I combine my education with expertise in CSS3, HTML5, Javascript to build creative and effective websites and applications.

If you wish to contact me then please do so on or feel free to skype me on

Comments and Discussions

QuestionHave you consider to post this as a tip? Pin
Nelek22-Mar-17 21:59
protectorNelek22-Mar-17 21:59 
AnswerRe: Have you consider to post this as a tip? Pin
Ricardo_Torres_Torres22-Mar-17 22:44
professionalRicardo_Torres_Torres22-Mar-17 22:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Posted 22 Mar 2017

Tagged as


4 bookmarked