Загрузить внешний JSON в HTML

Question

Я очень плохо знаком с HTML, извините, если это глупый вопрос.

В настоящее время у меня есть данные внешнего JSON и вызова для загрузки в HTML. Вместо того, чтобы загружать его, я просто хочу скопировать его в HTML и сохранить как часть этого. Как бы я это сделал, не меняя структуру данных?

Пример данных JSON:

[
{ 
    "User" : "COMP",
    "Runtime" : 931.216111111
},
{ 
    "User" : "AUTO",
    "Runtime" : 600.404444444
}
]

Где я его загружаю:

// load data
d3.json("data.json", function(error, data) {

    data.forEach(function(d) {
        d.User = d.User;
        d.Runtime = +d.Runtime;
    });

  // scale the range of the data
  x.domain(data.map(function(d) { return d.User; }));
  y.domain([0, d3.max(data, function(d) { return d.Runtime; })]);

Я посмотрел на ответы, но мой вопрос в том, как мне скопировать его в HTML и при этом иметь возможность вызывать параметры d.Runtime и d.User одинаково

Answer 1

Внутри вашей HTML-страницы вам нужно добавить тег сценария для хранения JavaScript. Возможно, было бы неплохо поместить это в тело, чтобы оно выполнялось при загрузке страницы.

<script type="text/javascript">

</script>

Далее вам нужно определить константу для данных внутри тега script. Содержимое файла .json можно скопировать и вставить после знака равенства:

const data = [
  { 
    "User" : "COMP",
    "Runtime" : 931.216111111 
  },
  { 
    "User" : "AUTO",
    "Runtime" : 600.404444444
  }
]

Теперь вы можете добавить код, который вы использовали в вашем обратном вызове d3.json:

data.forEach(function(d) {
    d.User = d.User;
    d.Runtime = +d.Runtime;
});

// scale the range of the data
x.domain(data.map(function(d) { return d.User; }));
y.domain([0, d3.max(data, function(d) { return d.Runtime; })]);