How am I supposed to parse through this data?

Question

So I have a JSON file with information I want to parse through. It looks like this:

{
  "file_1": {
    "configurations": {
      "config_1": {
        "config_explanation": "TYPE",
        "value": "xx",
        "value_explanation": "XX"
      },
      "config_2": {
        "config_explanation": "SOME",
        "value": "YY",
        "value_explanation": "DOSA"
      }
   },
    "not_important": {
         .
         .
     },
   "file_2": {
    "configurations": {
      "config_1": {
        "config_explanation": "TYPE",
        "value": "ZZ",
        "value_explanation": "PP"
      },
      "config_2": {
        "config_explanation": "SOME",
        "value": "GG",
        "value_explanation": "BB"
      }
    },
    "not_important": {
         .
         .
    }
   }

So the data is created with multiple files. The "config_X" part is hard coded and static. The "not_important" part is information that is not relevant for me at this moment.

What I try to do is to parse through the data in "config_X" and add it to a list. The problem I am having is that if I scan through "configurations" I can easily just scan file_1, add the hard coded config_1, config_2 and config_explanation, but when I want to add the value beside it in the table I do not understand how I should do it. This is the way I did it, but it does not look good or work well.

$(document).ready(function() {
    var requestURL = 'http://localhost:3000/xx';
    var request = new XMLHttpRequest();
    request.open('GET', requestURL);
    request.onload = function() {
        var data = JSON.parse(request.responseText);
        //console.log(data);
        $(parse_car_config(data)).appendTo(".list");

    };   
    request.send();
});

//Just add the "config_x" part and "config_explanation"
function parse_car_config(data) {
    var tableRowsHtml = "";
    var file = 1;
    for(file in data) {
        $.each(data[file]['configurations'], function(section, content) {
            tableRowsHtml = tableRowsHtml + "<tr>\n<td>" + section + "</td>\n" + "<td>" + content["config_explanation"] + "</td>\n" + "/tr";

        });
        break;
    }
    return tableRowsHtml;
}

It is supposed to look something like this:

<table>
<tbody>
<tr>
  <td>config_1</td>
  <td>TYPE</td>
  <td>xx</td> <!-- From file_1 -->
  <td>ZZ</td> <!-- From file_2 -->
</tr>
<tr>
  <td>config_2</td>
  <td>SOME</td>
  <td>YY</td> <!-- From file_1 -->
  <td>GG</td> <!-- From file_2 -->
</tr>
</tbody>
</table>

Can some one please help me solve this one? Note: The file name, ex "file_1" can change, both in file name and how many files it is.

Answer 1

Maybe you can format your data into something like this:

const formatted = {};
const fileKeys = Object.keys(data);

fileKeys.forEach((file) => {
  const config = data[file].configurations;
  const configKeys = Object.keys(config);

  configKeys.forEach((key) => {
    formatted[key] = Object.assign({},
      formatted[key],
      {
        config_explanation: config[key].config_explanation,
        [file]: {
          value: config[key].value,
          value_explanation: config[key].value_explanation,
        },
      }
    );
  });
});

const data = {
  "file_1": {
    "configurations": {
      "config_1": {
        "config_explanation": "TYPE",
        "value": "xx",
        "value_explanation": "XX"
      },
      "config_2": {
        "config_explanation": "SOME",
        "value": "YY",
        "value_explanation": "DOSA"
      },
    },
  },
  "file_2": {
    "configurations": {
      "config_1": {
        "config_explanation": "TYPE",
        "value": "ZZ",
        "value_explanation": "PP"
      },
      "config_2": {
        "config_explanation": "SOME",
        "value": "GG",
        "value_explanation": "BB"
      },
    },
  },
};

const formatted = {};
const fileKeys = Object.keys(data);

fileKeys.forEach((file) => {
  const config = data[file].configurations;
  const configKeys = Object.keys(config);

  configKeys.forEach((key) => {
    formatted[key] = Object.assign({},
      formatted[key],
      {
        config_explanation: config[key].config_explanation,
        [file]: {
          value: config[key].value,
          value_explanation: config[key].value_explanation,
        },
      }
    );
  });
});

console.log(formatted);

And then use the formatted data for your table.

Or instead of files as keys of an object, you can place them in an array like so:

const formatted = {};
const fileKeys = Object.keys(data);

fileKeys.forEach((file) => {
  const config = data[file].configurations;
  const configKeys = Object.keys(config);

  configKeys.forEach((key) => {
    formatted[key] = Object.assign({},
      formatted[key],
      {
        config_explanation: config[key].config_explanation,
      }
    );

    if (!formatted[key].files) {
      formatted[key].files = [];
    }

    formatted[key].files.push({
      file,
      value: config[key].value,
      value_explanation: config[key].value_explanation,
    });
  });
});

const data = {
  "file_1": {
    "configurations": {
      "config_1": {
        "config_explanation": "TYPE",
        "value": "xx",
        "value_explanation": "XX"
      },
      "config_2": {
        "config_explanation": "SOME",
        "value": "YY",
        "value_explanation": "DOSA"
      },
    },
  },
  "file_2": {
    "configurations": {
      "config_1": {
        "config_explanation": "TYPE",
        "value": "ZZ",
        "value_explanation": "PP"
      },
      "config_2": {
        "config_explanation": "SOME",
        "value": "GG",
        "value_explanation": "BB"
      },
    },
  },
};

const formatted = {};
const fileKeys = Object.keys(data);

fileKeys.forEach((file) => {
  const config = data[file].configurations;
  const configKeys = Object.keys(config);

  configKeys.forEach((key) => {
    formatted[key] = Object.assign({},
      formatted[key],
      {
        config_explanation: config[key].config_explanation,
      }
    );
    
    if (!formatted[key].files) {
      formatted[key].files = [];
    }

    formatted[key].files.push({
      file,
      value: config[key].value,
      value_explanation: config[key].value_explanation,
    });
  });
});

console.log(formatted);