CSS（外部JSONファイルからのJSONデータ）をカスタマイズするJSONデータ*更新された問題（JSONデータから配列を作成する方法）

Question

JSONデータをJavaScriptに解析するのが難しいです。 JSONだけでCSS機能をカスタマイズできるようにしたかったのです。たとえば、基本的なボタンを作成したかったのです。私はCSSスタイルを作成し、それをHTMLにリンクしました。しかし、JavascriptがJSONデータを読み込んだときに正しい答えが得られるかどうかを確認する方法はわかりません。 CSSには数値などが含まれているため（50％）、カスタマイズするのが難しくなります。

私は、ボタンのサイズ、background-color、paddingとボタンのテキストを変更したかったのです。

誰でも私にこれを手伝ってもらえますか？ありがとう 私はHTMLに

var info=JSON.parse(request.responseText); 

------ JSONファイルここ------

{ 
     "button": { 
     "width" : "100%", 
     "backgroundColor": "#4CAF50", 
     "border": "none", 
     "color": "red", 
     "padding": "15px 32px", 
     "textAlign": "center", 
     "textDecoration": "none", 
     "display": "inline-block", 
     "fontSize": "16px", 
     "margin": "4px 2px", 
     "cursor": "pointer" 
     } 
    } 

JS file 
window.onload = loadJSON; 
function loadJSON() 
{ 
var request; 
    if (window.XMLHttpRequest){ 
     request=new XMLHttpRequest(); 
    } else { 
     request =new ActiveXObject("Microsoft.XMLHTTP"); 
     } 

    request.onreadystatechange = function() 
     { 
     if ((request.status ===200) && 
      (request.readyState ===4)) 
      { 

      var info=JSON.parse(request.responseText); 

      if(info!= null) 
       { 
        Object.keys(info).forEach(function(k) { 
        $('<' + k + ' />', info[k].attr).css(info[k].css).appendTo('#container'); 
        }); 

       } 
       else {alert("error")}; 
      } 
     } 

最新のコードがあるとJSONを解析するために、このコードを使用していました。 2つ以上のボタンをカスタマイズしたいと思ったら可能でしょうか？私はそれを解決できないので、コードはどうあるべきですか？

Answer 1

オブジェクトの構造は、jQueryが新しい要素を作成するときに期待するCSSプロパティとよく似ています。したがって、要素を作成するために使用するjQueryオブジェクトにオブジェクトを適用するだけで済みます。

要素の種類を指定するには、Object.keysを使用してオブジェクトのプロパティを取得し、ループオーバーすることができます。

あなたは要素のテキストを設定したい場合は、CSSのプロパティを供給するために、あなたのデータ構造を修正する必要があるだろうとHTMLは別に属性なので、彼らは関連するメソッドを介して適用することができ、このような何か：

var obj = { 
 
    button: { 
 
    css: { 
 
     width: "100%", 
 
     backgroundColor: "#4CAF50", 
 
     border: "none", 
 
     color: "red", 
 
     padding: "15px 32px", 
 
     textAlign: "center", 
 
     textDecoration: "none", 
 
     display: "inline-block", 
 
     fontSize: "16px", 
 
     margin: "4px 2px", 
 
     cursor: "pointer" 
 
    }, 
 
    attr: { 
 
     text: 'Foo' 
 
    } 
 
    }, 
 
    a: { 
 
    css: {}, 
 
    attr: { 
 
     href: 'http://stackoverflow.com', 
 
     text: 'Visit StackOverflow.com' 
 
    } 
 
    } 
 
} 
 

 
Object.keys(obj).forEach(function(k) { 
 
    $('<' + k + ' />', obj[k].attr).css(obj[k].css).appendTo('#container'); 
 
});

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

注意すべき

ことの一つは、オブジェクトのプロパティの順序が保証されないということですので、あなたが順序に依存する必要がある場合、私はあなたがの配列にオブジェクトからデータ構造を変更することをお勧めしたいですオブジェクト。

Answer 2

ここであなただけの[ドキュメントを読む]、1構文解析の問題については、より解決https://jsfiddle.net/sopv9652/3/

var data = { 
 
    "button": { 
 
    "width" : "100%", 
 
    "backgroundColor": "#4CAF50", 
 
    "border": "none", 
 
    "color": "red", 
 
    "padding": "15px 32px", 
 
    "textAlign": "center", 
 
    "textDecoration": "none", 
 
    "display": "inline-block", 
 
    "fontSize": "16px", 
 
    "margin": "4px 2px", 
 
    "cursor": "pointer" 
 
    } 
 
} 
 

 
var tags = Object.keys(data); 
 

 
$.each(tags, function(i){ 
 
\t $('body').append($('<' + tags[i] + '>')); 
 
    $(tags[i]).css(data[tags[i]]); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>