Конвертировать JSON в JQuery DataTables

Question

У меня есть JSON данные:

{
    "M1":[
        {"Name":"Front","AVG":272},
        {"Name":"Middle","AVG":13},
        {"Name":"Back","AVG":2}
    ],
    "M2":[
        {"Name":"Back","AVG":1},
        {"Name":"Front","AVG":271},
        {"Name":"Middle","AVG":14}
    ],
    "M3":[
        {"Name":"Front","AVG":300},
        {"Name":"Middle","AVG":15}
    ],
    "M4":[
        {"Name":"Back","AVG":300},
        {"Name":"Middle","AVG":16}
    ]
}

Я хочу заполнить эти данные до JQuery DataTables.

Примерно так:

Name    | M1 | M2 | M3 | M4
Front     272  271  300  
Middle    13   14   15   16
Back      2    1         300

Как это сделать. Или что-то вроде создания массива с функцией JQuery Map. Пожалуйста, помогите мне. Заранее спасибо

Что я пробовал:

$.each(result, function (index, month) {
    $.each(month, function (index, profile) {
        var Profile = profile.Name;
        var Avg = profile.AVG;

        oTable.row.add([Profile, Avg]).draw();
    })
});

Answer 1

Ты выглядишь примерно так (?):

const INPUT_DATA = {
    "M1":[
        {"Name":"Front","AVG":272},
        {"Name":"Middle","AVG":13},
        {"Name":"Back","AVG":2}
    ],
    "M2":[
        {"Name":"Back","AVG":1},
        {"Name":"Front","AVG":271},
        {"Name":"Middle","AVG":14}
    ],
    "M3":[
        {"Name":"Front","AVG":300},
        {"Name":"Middle","AVG":15}
    ],
    "M4":[
        {"Name":"Back","AVG":300},
        {"Name":"Middle","AVG":16}
    ]
}

const mappedValues = []

Object.keys(INPUT_DATA).forEach(key =>  
  mappedValues.push(
    $(INPUT_DATA[key])
      .map((index, item) => ({ ...item, parent: key }))
    )
)

$(mappedValues).each((index, items) => 
  items.each((index2, item) => $('#' + item.Name.toLowerCase() + item.parent).text(item.AVG))
)

table td{
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
 <thead>
  <tr>
    <td></td>
    <td id='m1'>M1</td>
    <td id='m2'>M2</td>
    <td id='m3'>M3</td>
    <td id='m4'>M4</td>
  </tr>
 </thead>
 <tbody>
  <tr>
    <td>Front</td>
    <td id='frontM1'></td>
    <td id='frontM2'></td>
    <td id='frontM3'></td>
    <td id='frontM4'></td>
  </tr>
  <tr>
    <td>Middle</td>
    <td id='middleM1'></td>
    <td id='middleM2'></td>
    <td id='middleM3'></td>
    <td id='middleM4'></td>
  </tr>
  <tr>
    <td>Back</td>
    <td id='backM1'></td>
    <td id='backM2'></td>
    <td id='backM3'></td>
    <td id='backM4'></td>
  </tr>
 </tbody>
</table>