Данные должны быть привязаны в указанном ниже формате в javascript

Мои данные JSON имеют формат:

"x": {
        "xEnabled": "N",
        "1-a": "0.0",
        "2-b": "0.0",
        "1-c": "0",
        "2-d": "0"
    },
    "y": {
        "yEnabled": "N",
        "1-a": "0.0",
        "2-b": "0.0",
        "1-c": "0",
        "2-d": "0"
    },
    "z": {
        "zEnabled": "N",
        "1-a": "0.0",
        "2-b": "0.0",
        "1-c": "0",
        "2-d": "0"
    },
    "w": {
        "wEnabled": "N",
        "1-a": "0.0",
        "2-b": "0.0",
        "1-c": "0",
        "2-d": "0"
    }

Я хочу связать эти данные с HTML, как мне связать эти данные, чтобы получить в этом формате

Data    1-a      2-b    1-c     2-d
x       0.0      0.0    0       0
y       0.0      0.0    0       0
z       0.0      0.0    0       0
w       0.0      0.0    0       0

Добавьте больше описания. Прочитайте всю страницу тур.

Empty Brain 25.02.2019 06:31

Используйте элемент table.

Teemu 25.02.2019 06:31
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
30
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуй это

var data = {
  "x": {
    "xEnabled": "N",
    "1-a": "0.0",
    "2-b": "0.0",
    "1-c": "0",
    "2-d": "0"
  },
  "y": {
    "yEnabled": "N",
    "1-a": "0.0",
    "2-b": "0.0",
    "1-c": "0",
    "2-d": "0"
  },
  "z": {
    "zEnabled": "N",
    "1-a": "0.0",
    "2-b": "0.0",
    "1-c": "0",
    "2-d": "0"
  },
  "w": {
    "wEnabled": "N",
    "1-a": "0.0",
    "2-b": "0.0",
    "1-c": "0",
    "2-d": "0"
  }
};

var a = document.querySelector("#t");
Object.keys(data).forEach((e, i) => {
  a.innerHTML += '<tr><td>' + e + '</td><td>' + data[e]["1-a"] + '</td><td>' + data[e]["2-b"] + '</td><td>' + data[e]["1-c"] + '</td><td>' + data[e]["2-d"] + '</td></tr>';
})
td {
  padding: 10px
}
<table id = "t">
  <tr>
    <td>Data</td>
    <td>1-a</td>
    <td>2-b</td>
    <td>1-c</td>
    <td>2-d</td>
  </tr>
</table>

Другие вопросы по теме