Click here to Skip to main content
13,867,740 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


4 bookmarked
Posted 22 Mar 2017
Licenced CPOL

Populate Grid from Json using XmlhttpRequest

, 23 Mar 2017
Rate this:
Please Sign up or sign in to vote.
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:

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:


  • 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

You may also be interested in...


Comments and Discussions

QuestionHave you consider to post this as a tip? Pin
Nelek22-Mar-17 22:59
protectorNelek22-Mar-17 22:59 
AnswerRe: Have you consider to post this as a tip? Pin
Ricardo_Torres_Torres22-Mar-17 23:44
professionalRicardo_Torres_Torres22-Mar-17 23: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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03 | 2.8.190214.1 | Last Updated 23 Mar 2017
Article Copyright 2017 by Ricardo_Torres_Torres
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid