如何在Javascript文件中读取RESTAPI生成的数据并在其他文件中使用？_Javascript_Html_D3.js

如何在Javascript文件中读取RESTAPI生成的数据并在其他文件中使用？

javascript html d3.js

如何在Javascript文件中读取RESTAPI生成的数据并在其他文件中使用？,javascript,html,d3.js,Javascript,Html,D3.js,我正在尝试制作我的第一个web应用程序，但在尝试将所有部分粘合在一起时遇到了一些问题我有三个文件： getData.js-有一个main函数，它对REST API进行一些调用，处理数据并返回一个包含随时可用数据的数组。这本身就行 getData.js： const fetch = require('node-fetch'); var tag = "BQDmciWElpq393aJqhpUOjX_V0kSJFp2zLS1ycH4piTl9rNOFjCsjKqHUXTfzv3hXGU3

我正在尝试制作我的第一个web应用程序，但在尝试将所有部分粘合在一起时遇到了一些问题

我有三个文件： getData.js-有一个main函数，它对REST API进行一些调用，处理数据并返回一个包含随时可用数据的数组。这本身就行

getData.js：

const fetch = require('node-fetch');

var tag = "BQDmciWElpq393aJqhpUOjX_V0kSJFp2zLS1ycH4piTl9rNOFjCsjKqHUXTfzv3hXGU3ELM3k8bS6WQzMKnDNygLlzaLmvo2v28pOGCI4KFzEY3jm3MUImBezBQ1-wU9IK2MYo1CXwnXAq3OLMa4TkeM76iQK2kD4nE"

async function getUserPlaylists(input){
    const url = input;
    const options = {
      headers: {
        Authorization: "Bearer ".concat(tag)
      }
    };

    const result = fetch(url,options)
      .then(result => result.json())
      return result;
}

async function getPlaylistIdFromUsersPlaylists(item) {
  var temp = [];
  item.forEach(async function(it){
    await temp.push(it['id']);
  });
  return temp;
}

async function getAllTracks(playlists) {
  var temp = [];
  await Promise.all(playlists.map(async (playlist) => {
      var result = await getPlaylistTracks("https://api.spotify.com/v1/playlists/"+playlist+"/tracks");
      temp.push(...Object.values(result)[1]);

      while(result['next'] !== null){
        let temp2 = await getPlaylistTracks(result['next']);
        temp.push(...Object.values(temp2)[1]);
        result = temp2;
      }
  }));
  return temp;
}

async function getPlaylistTracks(link) {
  const url = link;
  const options = {
    headers: {
      Authorization: "Bearer ".concat(tag)
    }
  };

  const result = fetch(url,options)
    .then(result => result.json())
    return result;
}


async function getAllArtists(tracklist){
  var map = new Map();

  tracklist.forEach(function(track){

    //get all artists
    var trackArtists = track['track']['artists'];

    //for all artists
    trackArtists.forEach(function(artist){

      //if artist is in hashMap add +1 to key
      if(map.has(artist['id'])){
        map.set(artist['id'], map.get(artist['id'])+1);

      //else add new artists with value 1
      }else {
        map.set(artist['id'], 1);
      }
    })
  })
  return map;
}

async function createDataFromMap(map){
  var ret = [];
  for (let [id, value] of map) {
    ret.push({id: id, value: value});
  }

  ret.sort(function(a,b) {
    if (a['value'] > b['value']) {
      return -1;
    }
    if (a['value'] < b['value']) {
      return 1;
    }
    return 0;
  });

  return ret.slice(0,50);
}

async function getNamesAndImages(ids) {
  var temp = [];
  await Promise.all(ids.map(async (id) => {

      var result = await getArtist("https://api.spotify.com/v1/artists/"+id['id']);
      temp.push({'id': id['id'], 'name': result['name'], 'value': id['value'], 'image': result['images'][0]});
      //console.log(result);
  }));

  temp.sort(function(a,b) {
    if (a['value'] > b['value']) {
      return -1;
    }
    if (a['value'] < b['value']) {
      return 1;
    }
    return 0;
  });
  return temp;
}

async function getArtist(link) {
  const url = link;
  const options = {
    headers: {
      Authorization: "Bearer ".concat(tag)
    }
  };

  const result = fetch(url,options)
    .then(result => result.json())
    return result;
}



const main = async () => {
  console.log("hej");
  //get all user playlists in an array of playlists
  var listsOfPlaylists = [];
  let temp = await getUserPlaylists("https://api.spotify.com/v1/users/juliusraphael/playlists");
  listsOfPlaylists.push(...Object.values(temp)[1]);

  while(temp['next'] !== null){
    let temp2 = await getUserPlaylists(temp['next']);
    listsOfPlaylists.push(...Object.values(temp2)[1]);
    temp = temp2;
  }

  //get all playlist ids in an array
  var playlists = await getPlaylistIdFromUsersPlaylists(listsOfPlaylists);

  //for all playlists get all tracks in each playlist
  var tracks = await getAllTracks(playlists);

  //get all artitst from tracks and put in hashmap
  var artistsHashmap = await getAllArtists(tracks);
  //console.log(artistsHashmap);

  var ids = await createDataFromMap(artistsHashmap);

  var data = await getNamesAndImages(ids);
  console.log(data);

  return data;
};

index.html-如下所示

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device, initial-scale=1.0">
  <title>D3.js</title>
  <style>
    .container {
      width: 800px;
      height: 800px;
    }
    .bar {
      fill: #b2d8d8;
    }
  </style>
  <script src="getData.js" defer></script>
  <script src="https://d3js.org/d3.v5.min.js" defer></script>
  <script src="https://d3js.org/d3-dispatch.v1.min.js" defer></script>
  <script src="https://d3js.org/d3-quadtree.v1.min.js" defer></script>
  <script src="https://d3js.org/d3-timer.v1.min.js" defer></script>
  <script src="https://d3js.org/d3-force.v2.min.js" defer></script>
  <script src="renderChart.js" defer></script>
</head>

<body>


  <svg></svg>


</body>
</html>

如果我将som数据硬编码到renderChart.js中的数据变量中，并执行index.html，则会正确呈现所有内容。在执行index.html时，我现在想做的是首先运行getData.js中的main方法来生成数据并在renderChart.js中使用该数据。我试图用谷歌搜索一个解决方案，但我担心我的术语不够好，无法找到正确的答案

编辑：我添加了其他文件的代码，并将脚本src=getData.js延迟到.html

干杯/Julius

在其他脚本旁边添加。

然后在getData.js中导出main方法，然后您就可以从renderChart.js文件中调用它。

当主函数中有数据时，为什么不调用或启动d3.js图表？当您准备好数据后，请绑定图表。从示例来看，不清楚您在main中做了什么，或者renderchart代码是什么样子的。请说明这一点。我已经在原始帖子中添加了代码。main函数正在使用getData.js文件中的其他函数，我是否也必须导出所有函数？不，只需要导出您稍后将调用的内容，main就可以访问该文件中的所有内容。事实上，如果getData.js没有设置为模块，您可能根本不需要导出它！尝试一下添加脚本标记，看看在render中运行main时会发生什么。嗯，它仍然不起作用。我编辑了原始帖子，并将代码添加到其他文件中。当我运行.html时，它似乎没有运行主函数，我在控制台中没有看到我在主函数开头添加的任何打印。当你只是将代码全部复制并粘贴到一个文件中时会发生什么？那么它能工作吗？不，如果从getData文件复制并粘贴代码，但仍然使用硬代码数据作为数据变量，那么它也不能工作

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device, initial-scale=1.0">
  <title>D3.js</title>
  <style>
    .container {
      width: 800px;
      height: 800px;
    }
    .bar {
      fill: #b2d8d8;
    }
  </style>
  <script src="getData.js" defer></script>
  <script src="https://d3js.org/d3.v5.min.js" defer></script>
  <script src="https://d3js.org/d3-dispatch.v1.min.js" defer></script>
  <script src="https://d3js.org/d3-quadtree.v1.min.js" defer></script>
  <script src="https://d3js.org/d3-timer.v1.min.js" defer></script>
  <script src="https://d3js.org/d3-force.v2.min.js" defer></script>
  <script src="renderChart.js" defer></script>
</head>

<body>


  <svg></svg>


</body>
</html>