Developing a table with JavaScript by parsing JSON data

Question

Developing a table with JavaScript by parsing JSON data

Starting off, I am relatively new to working with JavaScript. Recently, I attempted to generate a table using data from a JSON file. After researching and following some tutorials, I successfully displayed the table on a web browser. However, I noticed that the arrays in the JSON file were always sorted and only allowed unique values. Here is an example of the JSON data:

var json = {
            "data": [
                {
                    "number": "13",
                    "position": "GK",
                    "name": "John"
                },
                {
                    "number": "2",
                    "position": "CB",
                    "name": "Bill"
                },
                {
                    "number": "26",
                    "position": "CB",
                    "name": "Nick"
                }

When I input this data into my table, it appears like this:

| Number | Position | Name |
|   2    |    GK    | John |
|   13   |    CB    | Bill |
|   26   |undefined | Nick |

As you can see, the numbers in the JSON file do not correspond correctly with the names, and they are sorted incorrectly. For instance, John should have number 13, not 2. Additionally, it does not allow duplicate values - there are 2 entries for CB position, but only one is displayed while the other shows as undefined.

I have included the code snippet below:

     JSONDataLouder = {
     getPlayers: function(json) {
      var object = {
        "number": {}
        , "position": {}
        , "name": {}
    };

    var personData = null; 
    for (var i = 0; i < json.data.length; i++) {
        personData = json.data[i];
        object.number[personData.number] = 1;
        object.position[personData.position] = 1;
        object.name[personData.name] = 1;
    }

    var u = {
        "number": []
        , "position": []
        , "name": []
    };

    for(var k in object.number) u.number.push(k);
    for(var k in object.position) u.position.push(k);
    for(var k in object.name) u.name.push(k);


    return u;

}

,getTable: function(json) {

    var obj = this.getPlayers(json);

    var number = obj.number;
    var position = obj.position;
    var name = obj.name;

    var table = this.createTable();


    var headerRow = table.insertRow();
    headerRow.insertCell().innerHTML = "Number";
    headerRow.insertCell().innerHTML = "Position";
    headerRow.insertCell().innerHTML = "Name"


    for (var i = 0; i < number.length; i++) {
        var secondRow = table.insertRow();
        secondRow.style.textAlign="center";
        secondRow.insertCell().innerHTML = number[i];
        secondRow.insertCell().innerHTML = position[i];
        secondRow.insertCell().innerHTML = name[i];

    }

    return table;
}


,render: function(mainDiv) {

    $( mainDiv ).empty();
    var json = {
        "data": [
            {
                "number": "13",
                "position": "GK",
                "name": "John"
            },
            {
                "number": "2",
                "position": "CB",
                "name": "Bill"
            },
            {
                "number": "26",
                "position": "CB",
                "name": "Nick"
            }

It seems I may have erred in understanding how to push objects into an array, despite attempting multiple fixes. Any assistance or insight would be greatly appreciated. Thank you for taking the time to help.

javascript arrays json unique

Answer 1

Answer №1

It seems like the issue you're encountering is related to the unordered nature of hashes in JavaScript. When using for(var k in object.number), it's not guaranteed that each number will be retrieved in the same order they were inputted.

On the other hand, arrays maintain their order.

You may not even need the object variable. Instead, you can simplify your code like this:

JSONDataLouder = {
  getPlayers: function(json) {

  var u = {
    "number": [],
    "position": [],
    "name": []
  };

  var personData; 
  for (var i = 0; i < json.data.length; i++) {
    personData = json.data[i];
    u.number.push(personData.number);
    u.position.push(personData.position);
    u.name.push(personData.name);
  }

  return u;
}

Answer 2

It seems like the issue you're encountering is related to the unordered nature of hashes in JavaScript. When using for(var k in object.number), it's not guaranteed that each number will be retrieved in the same order they were inputted.

On the other hand, arrays maintain their order.

You may not even need the object variable. Instead, you can simplify your code like this:

JSONDataLouder = {
  getPlayers: function(json) {

  var u = {
    "number": [],
    "position": [],
    "name": []
  };

  var personData; 
  for (var i = 0; i < json.data.length; i++) {
    personData = json.data[i];
    u.number.push(personData.number);
    u.position.push(personData.position);
    u.name.push(personData.name);
  }

  return u;
}

Answer 3

Answer №2

When experimenting with different test data, you may encounter even more surprising outcomes. While there are various issues within the code, one major setback seems to be the mix-up of data structures. Instead of focusing solely on the table setup, consider first establishing a suitable intermediate data structure, perhaps resembling a two-dimensional array in practice.

An interesting point to note is that an intermediate structure may not be necessary at all. The JSON.data already contains an array which you transform into a different format within your code.

To simplify the table generation process, here's a snippet that captures the essence while bypassing some details:

var json = {
    "data": [
        {
            "number": "13",
            "position": "GK",
            "name": "John"
        },
        {
            "number": "2",
            "position": "CB",
            "name": "Bill"
        },
        {
            "number": "26",
            "position": "CB",
            "name": "Nick"
        }
    ]
};


function objToTable(obj) {
    var data = obj.data;
    var output = '<table>';
    for (var i = 0; i < data.length; i++) {
        output += '<tr>';
        output += '<td>' + data[i].number + '</td>';
        output += '<td>' + data[i].position + '</td>';
        output += '<td>' + data[i].name + '</td>';
        output += '</tr>\n'; // included newline for better readability
    }
    output += '</table>';
    return output;
}


console.log(objToTable(json));

Answer 4

When experimenting with different test data, you may encounter even more surprising outcomes. While there are various issues within the code, one major setback seems to be the mix-up of data structures. Instead of focusing solely on the table setup, consider first establishing a suitable intermediate data structure, perhaps resembling a two-dimensional array in practice.

An interesting point to note is that an intermediate structure may not be necessary at all. The JSON.data already contains an array which you transform into a different format within your code.

To simplify the table generation process, here's a snippet that captures the essence while bypassing some details:

var json = {
    "data": [
        {
            "number": "13",
            "position": "GK",
            "name": "John"
        },
        {
            "number": "2",
            "position": "CB",
            "name": "Bill"
        },
        {
            "number": "26",
            "position": "CB",
            "name": "Nick"
        }
    ]
};


function objToTable(obj) {
    var data = obj.data;
    var output = '<table>';
    for (var i = 0; i < data.length; i++) {
        output += '<tr>';
        output += '<td>' + data[i].number + '</td>';
        output += '<td>' + data[i].position + '</td>';
        output += '<td>' + data[i].name + '</td>';
        output += '</tr>\n'; // included newline for better readability
    }
    output += '</table>';
    return output;
}


console.log(objToTable(json));

Answer 5

Answer №3

Maybe this solution could be of assistance to you

    var data = {
      "items": [
        {
          "number": "13",
          "position": "GK",
          "name": "John"
        },
        {
          "number": "2",
          "position": "CB",
          "name": "Bill"
        },
        {
          "number": "26",
          "position": "CB",
          "name": "Nick"
        }]
      };
        
        console.log('|  Number  |  Position  |  Name  |');

        $.each(data.items, function(index, element)
        {
         
             console.log(element.number + '|' + element.position + '|' + element.name + '|');
        
        });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 6

Maybe this solution could be of assistance to you

    var data = {
      "items": [
        {
          "number": "13",
          "position": "GK",
          "name": "John"
        },
        {
          "number": "2",
          "position": "CB",
          "name": "Bill"
        },
        {
          "number": "26",
          "position": "CB",
          "name": "Nick"
        }]
      };
        
        console.log('|  Number  |  Position  |  Name  |');

        $.each(data.items, function(index, element)
        {
         
             console.log(element.number + '|' + element.position + '|' + element.name + '|');
        
        });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Developing a table with JavaScript by parsing JSON data

Answer №1

Answer №2

Answer №3

Similar questions

Is Jacksson up to the task of managing enums?

Stopping Angular.js $http requests within a bind() event

Give me an example of converting a MultiDimensional JSON Array into a data class in Kotlin

Combining element.scrollIntoView and scroll listener for smooth scrolling by using JavaScript

Harvesting information from an HTML table

Using AJAX to dynamically load Javascript

What's causing the "Uncaught SyntaxError: Unexpected token u" error to consistently pop up in Chrome?

Utilizing Think ORM seamlessly across multiple files without the need to repeatedly establish a connection to the

The array is being initialized with a higher number of elements than prescribed

Tips on optimizing a setTimeout script for seamless integration with an HTML form

What is the best way to configure a metered subscription plan on Stripe that invoices annually but bills extra fees for overage on a monthly basis

Utilizing Spring's Rest Service in Version 4.x

What specific types of errors is this try-catch block designed to catch and manage?

Tips for adjusting the vertical position of an image within a bootstrap column by a small amount

Passing JSON information using JQuery's ajax.post to PHP

A method for utilizing history.goBack in linked tabs while preventing the user from reverting to the previously selected tab

Make sure that a specific script is loaded prior to another script

Parsing JSON responses in Titanium mobile

Executing a background.js function in response to an event trigger within the active tab in a Chrome extension

Reactive Form value is not displaying in view because of FormControlName issue