Javascript 如何从JSON文件中以颜色加载特定数据

大家好，我正在尝试从JSON文件加载数据，我想用它作为每个获得惠誉的块的背景

所以这个块是一个盒子，每个盒子有4个小盒子，我想针对这4个盒子，根据JSON文件数据改变背景颜色

下面是我使用的JSON格式

[
  {
  "name" : "color1" ,
  "box1" : "#7f6ded" ,
  "box2" : "#343434" ,
  "box3" : "#ffffff" ,
  "box4" : "#858585"
  } ,
  {
  "name" : "color2" ,
  "box1" : "#58c9b9" ,
  "box2" : "#343434" ,
  "box3" : "#ffffff" ,
  "box4" : "#9dc8c8"
  }
]

这里是呼叫jq

$(function () {

  // start calling colors
  $.getJSON( "js/colors.json", function( data ) {

    // console.log(data[1].box1);
    var output = "";
    var output2 = "";
    for (var i = 0; i < data.length; i++) {

      output +=
                "<div class=" + "col-md-4" + ">" +
                "<div class=" + "co-palet" + ">" +
                "<div class=" + "box box-1" + "></div>" +
                "<div class=" + "box box-2" + "></div>" +
                "<div class=" + "box box-3" + "></div>" +
                "<div class=" + "box box-4" + "></div>"
                + "</div>" + "</div>"

      $('#myColors').html(output);      
    };

  });
  // end calling colors



});

$（函数（）{
//开始调用颜色
$.getJSON（“js/colors.json”，函数（数据）{
//console.log（数据[1].box1）；
var输出=”；
var output2=“”；
对于（变量i=0；i

然后我输出到

<div id="myColors"></div>

---

任何帮助都将不胜感激：）

只需在方框中添加样式属性即可

$.getJSON( "js/colors.json", function( data ) {

  var output = "";
  for (var i = 0; i < data.length; i++) {

    output +=
            "<div class=\"col-md-4\">" +
            "<div class=\"co-palet\">" +
            "<div class=\"box box-1\" style=\"background-color:" + data[i].box1 + "\"></div>" +
            "<div class=\"box box-2\" style=\"background-color:" + data[i].box2 + "\"></div>" +
            "<div class=\"box box-3\" style=\"background-color:" + data[i].box3 + "\"></div>" +
            "<div class=\"box box-4\" style=\"background-color:" + data[i].box4 + "\"></div>"
            + "</div>" + "</div>";

  };
  $('#myColors').html(output); //move this outside the loop so it isn't overwritten every time
});

$.getJSON（“js/colors.json”），函数（数据）{
var输出=”；
对于（变量i=0；i

---

另外，请确保正确转义引号。

您可以访问json对象，然后将颜色作为样式传递，而不是传递类：

$.getJSON( "js/colors.json", function( data ) {

// console.log(data[1].box1);
var output = "";
var output2 = "";

对于（变量i=0；i

输出+=
'' +
'' +
'' +
'' +
'' +
'' +
+ '';
$（'#myColors'）.html（输出）；
};

}))

如果您更喜欢使用双引号来构建字符串，可以尝试像\“这样对字符串中的双引号进行转义

---

关于

如果您使用的是jQuery，您最好使用

$。每个

方法都可以获得更好的性能。希望这对您有所帮助

$(document).ready(function () {

$.getJSON( "datos.json", function( data ) {

    var output = "";
    $.each(data, function (val, ob) {
        output +=
            "<div class=\"col-md-4\">" +
            "<div class=\"co-palet\">" +
            "<div class=\"box box-1\" style=\"background-color:" + ob.box1 + "\">"+ ob.box1+"</div>" +
            "<div class=\"box box-2\" style=\"background-color:" + ob.box2 + "\">"+ ob.box2+"</div>" +
            "<div class=\"box box-3\" style=\"background-color:" + ob.box3 + "\">"+ ob.box3+"</div>" +
            "<div class=\"box box-4\" style=\"background-color:" + ob.box4 + "\">"+ ob.box4+"</div>"
            + "</div>" + "</div>";
    });

    $('#myColors').html(output);
});
// end calling colors
});

$（文档）.ready（函数（）{
$.getJSON（“datos.json”，函数（数据）{
var输出=”；
$。每个（数据、函数（val、ob）{
输出+=
"" +
"" +
“”+ob.box1+“”+
“”+ob.box2+“”+
“”+ob.box3+“”+
“”+ob.box4+“”
+ "" + "";
});
$（'#myColors'）.html（输出）；
});
//结束呼叫颜色
});

var-arr=[
{
“名称”：“颜色1”，
“框1”：“7f6ded”，
“框2”：“#3434”，
“框3”：“ffffff”，
“方框4”：“#8585”
},
{
“名称”：“颜色2”，
“框1”：“58c9b9”，
“框2”：“#3434”，
“框3”：“ffffff”，
“第四栏”：“9dc8c8”
}
];
变量输出=“”，
颜色=''；
$。每个（arr，函数（索引，值）{
var colorID='#'+value.name+''；
输出+='\
';
$。每个（值、函数（i、v）{
输出+=（i！='name'）？“”：“”；
colors+=（i！=“name”）？colorID+'.+i+'{background:'+v+'}\n'：''；
});
输出+=''；
});
$（'#myColors'）.html（输出）；
$（“#手写笔”）。文本（颜色）；

.box{
宽度：100px；
高度：100px；
利润率：10px；
}

---

循环内部

警报（数据[i].name）；

你的救生员伴侣：）

$(document).ready(function () {

$.getJSON( "datos.json", function( data ) {

    var output = "";
    $.each(data, function (val, ob) {
        output +=
            "<div class=\"col-md-4\">" +
            "<div class=\"co-palet\">" +
            "<div class=\"box box-1\" style=\"background-color:" + ob.box1 + "\">"+ ob.box1+"</div>" +
            "<div class=\"box box-2\" style=\"background-color:" + ob.box2 + "\">"+ ob.box2+"</div>" +
            "<div class=\"box box-3\" style=\"background-color:" + ob.box3 + "\">"+ ob.box3+"</div>" +
            "<div class=\"box box-4\" style=\"background-color:" + ob.box4 + "\">"+ ob.box4+"</div>"
            + "</div>" + "</div>";
    });

    $('#myColors').html(output);
});
// end calling colors
});