Javascript 使用RESTAPI为存储库添加语言颜色

我希望使用RESTAPI显示用户名的所有存储库，因此我希望获得Github上显示的语言颜色

e、 g

我确实展示了所有的星星、叉子和语言。但我也想展示语言徽章。 我希望我解释得足够明白

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();

var-request=new-XMLHttpRequest（）；
request.open（'GET'，'https://api.github.com/users/murtazajafari/repos?per_page=3' , 
（对）
request.onload=函数（）{
var data=JSON.parse（this.response）；
控制台日志（数据）；
var statusHTML=''；
$。每个（数据、功能（i、状态）{
状态HTML+='\
\
';
});
$（'.repositories'）.html（statusHTML）；
}
request.send（）；

一个简单的谷歌搜索会返回几个包含您想要的数据的repo，我选择的是，源代码有一个简单的JSON文件，您可以加载，就像加载GitHub API一样

我将使用

fetch

，因为它更简单，而且我也说过讨厌编写HTML。。。以下是一个简单的解决方案：

.color{
显示：内联块；
背景色：透明；
宽度：10px；
高度：10px；
}

回购中的（回购、idx）：key=“idx”>
{{repo.language}}}
| 
{{repo.stargazers_count}}}
{{repo.forks_count}

newvue({
el:“#应用程序”，
数据：函数（）{
返回{
回购协议：无效，
颜色：空
}
},
创建（）{
var=这个
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）//获取API数据
.then（res=>res.json（））
.then（json=>\u0.repos=json）//追加到repos
fetch（urlColors）//获取颜色数据
.then（res=>res.json（））
.then（json=>\uu0.colors=json）//附加到颜色
},
方法：{
语言颜色（语言）{
返回此。颜色[language]。颜色//按语言选择正确的颜色
}
}
})

---

继续生活并使用Veutify on

我用您想要的数据创建了一个回购协议。它是从一个地方来的。从中获取数据并使用它。如果你想在Reactjs中显示你的GitHub卡，请看我制作的。

你有所有的答案是肯定的，但我如何在我的存储库循环中显示它？这是一个json。。。只需加载并使用它。。。如果你想变得花哨：：）只需对两者都使用fetch，用

本票包装。所有
调用并执行。。。再简单不过了。我讨厌弄乱javascript和标记。。。在我使用Vue之前，但我从来没有像你这样把事情搞砸过。。。下一次你想更新代码的时候，要改变任何东西都是非常困难的。。。关注点分离如果编码器应该自豪地实现的最佳方法之一：）使用jQuery最简单的方法是，对颜色文件和api使用
getJSON
，而不是
XMLHttpRequest