Добавить языковые цвета для репозиториев, используя REST API

Question

Я хотел отобразить все репозитории с именем пользователя, используя REST API, поэтому я хочу получить цвет языка, который отображается на Github.

например

Я отображал общее количество звезд, вилок и языка. Но я хочу также показать языковые значки. Надеюсь, я объяснил достаточно, чтобы понять.

var request = new XMLHttpRequest();
    request.open('GET','https://api.github.com/users/murtazajafari/repos?per_page=3' , 
    true)
    request.onload = function() {
        var data = JSON.parse(this.response);
        console.log(data);
        var statusHTML = '';
        $.each(data, function(i, status){
            statusHTML += '<div class="card"> \
                <a href=""> \
                    <div class="col-auto"> \
                        <i class="fa fa-github"></i> \
                    </div> \
                    <h4>' + status.name +  '</h4> \
                    <div class="state"> \
                        <span class="mr-4"><i class="fa fa-star mr-2"></i>' + status.stargazers_count +  '</span> \
                        <span class="mr-4"><i class="fa fa-code-fork mr-2"></i>' + status.forks_count + '</span> \
                        <span class="repo-language-color mr-1" style="background-color:' + site.data.colors[status.language]["color"] + '"></span><span itemprop="programmingLanguage">' + repository.language + '</span> \
                    </div> \
                </a> \
            </div>';
        });
        $('.repositories').html(statusHTML);
    }
    request.send();

Answer 1

простой поиск в Google возвращает несколько репозиториев с нужными вам данными, выбранное мной было https://github.com/ozh/github-colors, а в исходном коде есть простой файл JSON, который вы можете загрузить, так же, как вы загружаем GitHub API ...

Я буду использовать fetch, поскольку это проще и, как я уже говорил, ненавижу писать HTML ... вот простое решение:

.color {
  display: inline-block;
  background-color: transparent;
  width: 10px;
  height: 10px;
}

  <div id="app">
    <ul>
      <li v-for="(repo, idx) in repos" :key="idx">
        <span class="color" :style="{ background: languageColor(repo.language) }">&nbsp;</span>
        {{ repo.language }} | 
        <a :href="`https://github.com/${repo.full_name}`">{{ repo.name }}</a> | 
        {{ repo.stargazers_count }} | 
        {{ repo.forks_count }}
      </li>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

new Vue({
  el: '#app',
  data: function() {
    return {
      repos: null,
      colors: null
    }
  },
  created() {
    var _ = this
    var urlApi = 'https://api.github.com/users/murtazajafari/repos?per_page=10'
    var urlColors = 'https://raw.githubusercontent.com/ozh/github-colors/master/colors.json'

    fetch(urlApi)                    // fetch API data
      .then(res => res.json())
      .then(json => _.repos = json)  // append to repos
    fetch(urlColors)                 // fetch colors data
      .then(res => res.json())
      .then(json => _.colors = json) // append to colors
  },
  methods: {
    languageColor(language) {
      return this.colors[language].color // pick up the right color by language
    }
  }
})

жить на JsBin и использовать Veutify на CodePen