如何加載特定的數據從JSON文件顏色

Question

嗨，大家好我試圖從JSON文件加載數據，我想用它作爲背景爲每一個獲得惠譽

塊，塊是一個盒子，每個盒子都有4個小boxs和我想針對這些4個boxs並基於JSON文件數據

這裏是我使用

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

的JSON格式和這裏有背景色是調用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 



}); 

和I輸出到

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

任何幫助，將不勝感激:)

Answer 1

如果您正在使用jQuery你可能以及使用$.each方法有更好的表現。希望這有助於！

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

Answer 2

style屬性只是添加到您的箱子。

$.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 
}); 

此外，請務必正確地轉義您的引號。

Answer 3

你可以訪問JSON對象，然後而不是傳遞的類，通過顏色作爲樣式：

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

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

爲（VAR I = 0;我< data.length;我++）{

   output += 
        '<div class="col-md-4">' + 
        '<div class="co-palet">' + 
        '<div class = "box" style = "background :' + 
        data[0].box1 + '"></div>' + 
        '<div class = "box" style = "background :' + 
        data[0].box2 + '"></div>' + 
        '<div class = "box" style = "background :' + 
        data[0].box3 + '"></div>' + 
        '<div class = "box" style = "background :' + 
        data[0].box4 + '"></div>' + 
        + '</div></div>'; 

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

}）;

如果你喜歡使用雙引號構建字符串，也許試圖逃跑你想在字符串中像\」這個雙引號。

問候

Answer 4

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

 
var output = '', 
 
    colors = ''; 
 

 
$.each(arr, function(index, value) { 
 
    var colorID = '#' + value.name + ' '; 
 

 
    output += '<div class="col-md-4">\ 
 
<div class="col-palet" id="' + value.name + '">'; 
 

 
    $.each(value, function(i, v) { 
 
    output += (i != 'name') ? '<div class="box ' + i + '"></div>' : ''; 
 
    colors += (i != 'name') ? colorID + '.' + i + ' {background:' + v + '}\n': ''; 
 
    }); 
 

 
    output += '</div></div>'; 
 
}); 
 

 
$('#myColors').html(output); 
 
$('#stylus').text(colors);

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<style id="stylus"></style> 
 
<div id="myColors"></div>