2017-10-03 31 views
-2

私はJsonとjavascriptで新しくなっています。私が望むのは、オプション付きの選択タグです。オプションを選択することによって、JSONから特定のオブジェクトがフェッチされて表示され、ネストされたJSONが使用されました。javascriptでselectを使用してjsonからデータを取得できません

data.json:

var data = { 

     "abc":{ 
      "color":["rgb(4,45,97)","rgb(255,122,0)"], 
      "font":"Interface Thin", 
      "logo":"<img src='logo.png' width='200' height='150'>" 
     } 


    } 

index.htmlにこの行が間違っている

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<script type="text/javascript" src="data.json"></script> 
</head> 

<body> 
<!--document.getElementById('color').innerHTML += '<div style="border:1px solid black;padding:2px;width:100px;background-color:'+data.AllenandHanburys[j]+';height:100px"></div>'--> 

<p id="demo"></p> 
<p id="color"></p> 
<p id="logo"></p> 

<select id="brand" onChange="run()"> 
    <option>Select Option</option> 
    <option value="abc">abc</option> 
</select> 
</body> 

<script> 
var i; 
function run() { 
var brand_name=document.getElementById('brand').value;// 
for(x in data) 
{ 
    if(x==brand_name) 
    { 
     for(j in data.brand_name) 
      { 
       document.getElementById('demo').innerHTML +=j+":"+data.abc[j]+"<br>"; 
       if(j=='color') 
        { 
          for(i=0;i<data.abc.color.length;i++) 
          { 
           document.getElementById('color').innerHTML +='<div style="border:1px solid black;padding:2px;width:100px;background-color:'+data.abc.color[i]+';height:100px"></div>'+"<br>"; 
          } 


        } 



      } 
    } 
} 
} 
</script> 

</html> 
+0

たぶん、あなたはあなたがしようとしたものにいくつかのコードを示すべきです。 – epascarello

+0

ここに私がコードをアップロードしたリンクがあります:https://gist.github.com/anonymous/2f97c3d0f77d96eb91dce216ac7762ea –

答えて

1

for(j in data.brand_name) //because `brand_name` property is not exist in the object 

変更それ

012へ
for(j in data[brand_name]) //data[brand_name] will parsed as data['abc'] which is same as data.abc 

ここでデモ

var data = { 
 

 
     "abc":{ 
 
      "color":["rgb(4,45,97)","rgb(255,122,0)"], 
 
      "font":"Interface Thin", 
 
      "logo":"<img src='logo.png' width='200' height='150'>" 
 
     } 
 

 

 
    } 
 

 

 

 
var i; 
 
function run() { 
 
var brand_name=document.getElementById('brand').value;// 
 
for(x in data) 
 
{ 
 
    if(x==brand_name) 
 
    { 
 
     for(j in data[brand_name]) 
 
      { 
 
       document.getElementById('demo').innerHTML +=j+":"+data.abc[j]+"<br>"; 
 
       if(j=='color') 
 
        { 
 
          for(i=0;i<data.abc.color.length;i++) 
 
          { 
 
           document.getElementById('color').innerHTML +='<div style="border:1px solid black;padding:2px;width:100px;background-color:'+data.abc.color[i]+';height:100px"></div>'+"<br>"; 
 
          } 
 

 

 
        } 
 

 

 

 
      } 
 
    } 
 
} 
 
}
<p id="demo"></p> 
 
<p id="color"></p> 
 
<p id="logo"></p> 
 

 
<select id="brand" onChange="run()"> 
 
    <option>Select Option</option> 
 
    <option value="abc">abc</option> 
 
</select>

+0

私は試しましたが、作業していません... –

+0

私の答えを更新しました..私のために働いているデモをご覧ください –

+0

エラーが来ています... –