CODEWITHSUNDEEP
javascriptjqueryjson
CrazyCoder
CrazyCoder

Reputation: 2388

Access JSON object based on the value of another JSON object

Kindly forgive me for my subject line. Couldn't understand what to put.

I have some dynamically generated data. The data is similar this.

var TypeA ={ "length" : "100" , "width" :"80" , "color" : "#ffffff" }    
var TypeB ={ "length" : "150" , "width" :"120" , "color" : "#4286f4" }
var TypeC ={ "length" : "150" , "width" :"120" , "color" : "#4202f4" }

The above few JSONs define the properties for type A , B, C respectively. (In actual ,there are many types.)

Now I have the actual data as below :

 var data =[{id : "1" , label : "A1" , type : "TypeA" },
            {id : "2" , label : "A2" , type : "TypeA" },
            {id : "3" , label : "B1" , type : "TypeB" },
            {id : "4" , label : "A3" , type : "TypeA" },
            {id : "5" , label : "C1" , type : "TypeC" },
            {id : "6" , label : "B2" , type : "TypeB" }
            ]

Now I'm running loop through the data .In this loop I need to access the Type properties based on the type defined in data JSON.

I'm doing something like this, but it doesn't seem to work.

$.each(JSON.parse(data), function(index,jsonObject){
      console.log("ColorCode : "+ jsonObject.type.color);
 });

Can anyone help me how can I access the type properties here. Thanks.

Upvotes: 0

Views: 121

Answers (3)

blex
blex

Reputation: 25659

In the example you gave, you have defined one variable per type definition. It's making them harder to access. Instead, you should have either this:

var types = {
  "TypeA": { "length" : "100" , "width" :"80" , "color" : "#ffffff" },
  "TypeB": { "length" : "150" , "width" :"120" , "color" : "#4286f4" },
  "TypeC": { "length" : "150" , "width" :"120" , "color" : "#4202f4" }
};

or this:

var TypeA ={ "length" : "100" , "width" :"80" , "color" : "#ffffff" };  
var TypeB ={ "length" : "150" , "width" :"120" , "color" : "#4286f4" };
var TypeC ={ "length" : "150" , "width" :"120" , "color" : "#4202f4" };
var types = {
  "TypeA": TypeA,
  "TypeB": TypeB,
  "TypeC": TypeC
};

Then, it's easy to do this:

JSON.parse(data).forEach(function(el) {
  console.log("ColorCode : " + types[el.type].color);
});

Demo

var types = {
  "TypeA": { "length": "100", "width": "80", "color": "#ffffff" },
  "TypeB": { "length": "150", "width": "120", "color": "#4286f4" },
  "TypeC": { "length": "150", "width": "120", "color": "#4202f4" }
};

var data =[
  {id : "1" , label : "A1" , type : "TypeA" },
  {id : "2" , label : "A2" , type : "TypeA" },
  {id : "3" , label : "B1" , type : "TypeB" },
  {id : "4" , label : "A3" , type : "TypeA" },
  {id : "5" , label : "C1" , type : "TypeC" },
  {id : "6" , label : "B2" , type : "TypeB" }
];

data.forEach(function (el) {
  console.log("ColorCode : " + types[el.type].color);
});

Upvotes: 3

alessandrio
alessandrio

Reputation: 4370

call the variables with window.

var TypeA ={ "length" : "100" , "width" :"80" , "color" : "#ffffff" }    
var TypeB ={ "length" : "150" , "width" :"120" , "color" : "#4286f4" }
var TypeC ={ "length" : "150" , "width" :"120" , "color" : "#4202f4" }

var dataO = [{id : "1" , label : "A1" , type : "TypeA" },
            {id : "2" , label : "A2" , type : "TypeA" },
            {id : "3" , label : "B1" , type : "TypeB" },
            {id : "4" , label : "A3" , type : "TypeA" },
            {id : "5" , label : "C1" , type : "TypeC" },
            {id : "6" , label : "B2" , type : "TypeB" }];

/*The data is already parsed.*/

dataO.forEach(function(key, index){
  console.log(window[key.type].color);
});

/*dataO.forEach(key => console.log(window[key.type].color));*/

Upvotes: -2

Satpal
Satpal

Reputation: 133433

I would recommend, You to define the Type in a object

var obj = {
  "TypeA": {.... },
  "TypeB": {.... },,
  "TypeC": {.... },
};

then you can easily use Bracket notation to access the property based string key. 

 $.each(data, function(index,jsonObject){
      console.log("ColorCode : ", obj[jsonObject.type].color);
 });


var obj = {
  "TypeA": {
    "length": "100",
    "width": "80",
    "color": "#ffffff"
  },
  "TypeB": {
    "length": "150",
    "width": "120",
    "color": "#4286f4"
  },
  "TypeC": {
    "length": "150",
    "width": "120",
    "color": "#4202f4"
  }
};

var data = [{
    id: "1",
    label: "A1",
    type: "TypeA"
  },
  {
    id: "2",
    label: "A2",
    type: "TypeA"
  },
  {
    id: "3",
    label: "B1",
    type: "TypeB"
  },
  {
    id: "4",
    label: "A3",
    type: "TypeA"
  },
  {
    id: "5",
    label: "C1",
    type: "TypeC"
  },
  {
    id: "6",
    label: "B2",
    type: "TypeB"
  }
]

 $.each(data, function(index,jsonObject){
      console.log("ColorCode : ", obj[jsonObject.type].color);
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

Related Questions