Hello I am new to JavaScript and I have been trying to parse JSON data into a JavaScript array. I can load the local .json file and print it to the console. I want to print each 'key' and 'value' pair. Having come from a python background, this is new to me. This is a sample JSON data. The structure of the data I want to use is the same. I am mostly having trouble because of the strucure of the JSON data. I have to control to change the structure of the JSON data

{
    "emp_details":[
    {
        "emp_name":["abc"],
        "email":["[email protected]"],
        "job_profile":["Full time"]
    }
    
    ]
}

And here is what I have done. Which is just read the local file and print it to the console.

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

readTextFile("./data.json",function(text){
    var data = JSON.parse(text);
    var dataArray = []
    dataArray.push(data)    
    //alert(data);
    console.log(dataArray[0]);
});

Ideally I want the result to be like to display in an HTML table:

emp_name	email	job_profile
abc	[email protected]	Full time

Thank you!

CodePudding user response：

You can use console.table to print tabular data.

let data = {
  "emp_details": [
    {
      "emp_name": ["abc"],
      "email": ["[email protected]"],
      "job_profile": ["Full time"]
    },
    {
      "emp_name": ["def"],
      "email": ["[email protected]"],
      "job_profile": ["Full time"]
    }
  ]
}

// convert the array in each property to a string
let emp_details = data["emp_details"].map(function(employee) {
  return {
    emp_name: employee.emp_name[0],
    email: employee.email[0],
    job_profile: employee.job_profile[0],
  }
});

// print the data in a table
console.table(emp_details)

CodePudding user response：

You could create a table in your html file with an id of table:

<table id="table"></table>

And then use a nested for loop to iterate through the data by doing something like this:

readTextFile("./data.json", function(text) {
    var data = JSON.parse(text);
    var dataArray = data.emp_details;
    var table = document.getElementById("table");

    for (var i = 0; i < dataArray.length; i  ) {
        var row = table.insertRow();

        for (var key in dataArray[i]) {
            var cell1 = row.insertCell();
            var cell2 = row.insertCell();

            cell1.innerHTML = key;
            cell2.innerHTML = dataArray[i][key];
        }
    }
});

The first for loop iterates through the emp_details array, and the second for loop iterates through each object in the array.

The key and value of each object is then inserted into a new row in the table, with the key in the first cell and the value in the second cell.

CodePudding user response：

I am assuming that you already have defined HTML table named emp_table, so in that case, you can get desired output by following code: -

const empTable = document.getElementById('emp_table');

empTable.innerHTML = json.emp_details.map((emp) =>
  Object.keys(emp).map(
    (key) =>
      `<tr><td><label><strong>${key}</strong><label></td><td>${emp[key][0]}</td></tr>`
  )
);

CodePudding user response：

To print each 'key' and 'value' pair in the JSON data, you can use a nested loop. The outer loop will iterate through the top-level keys of the JSON object, and the inner loop will iterate through the key-value pairs of each nested object. Here's an example of how you can accomplish this:

var emp_details = data.emp_details;
for (var i = 0; i < emp_details.length; i  ) {
    var employee = emp_details[i];
    for (var key in employee) {
        console.log(key   ": "   employee[key]);
    }
}

This code will iterate through the array "emp_details" in the JSON object, and for each element in the array, it will iterate through the key-value pairs of the nested object using a for-in loop. The key and value of each pair are logged to the console.

If you want to display the data in an HTML table, you can use JavaScript to create the table and insert the data dynamically. Here's an example of how you can do this:

var table = document.createElement("table");
table.setAttribute("id", "employee-table");
document.body.appendChild(table);

var headerRow = document.createElement("tr");
table.appendChild(headerRow);

var headers = ["emp_name", "email", "job_profile"];
for (var i = 0; i < headers.length; i  ) {
    var headerCell = document.create