How to display json object to html?

Question

My Json Object is like this :

[{
    "attributes": {
        "Code": "SGL",
        "Total": "19421340.27"
    },
    "DayPrice": [{
        "Date": "2016-07-22",
        "Rate": "4900439.85"
    }, {
        "Date": "2016-07-23",
        "Rate": "4845150.21"
    }, {
        "Date": "2016-07-24",
        "Rate": "4845150.21"
    }, {
        "Date": "2016-07-25",
        "Rate": "4830600"
    }]
}, {
    "attributes": {
        "Code": "DBL",
        "Total": "6473780.09"
    },
    "DayPrice": [{
        "Date": "2016-07-22",
        "Rate": "1633479.95"
    }, {
        "Date": "2016-07-23",
        "Rate": "1615050.07"
    }, {
        "Date": "2016-07-24",
        "Rate": "1615050.07"
    }, {
        "Date": "2016-07-25",
        "Rate": "1610200"
    }]
}, {
    "attributes": {
        "Code": "QUAD",
        "Total": "6473780.09"
    },
    "DayPrice": [{
        "Date": "2016-07-22",
        "Rate": "1633479.95"
    }, {
        "Date": "2016-07-23",
        "Rate": "1615050.07"
    }, {
        "Date": "2016-07-24",
        "Rate": "1615050.07"
    }, {
        "Date": "2016-07-25",
        "Rate": "1610200"
    }]
}]

From the json object array, I want display like this image:

I had try it, but I'm still confused. I feel it can not be done.

I try loop in loop like this :

countRoomType = json_object.length;
for(var i=0; i<countRoomType; i++){ 
    countDayPrice = json_object[i].DayPrice.length;
    for(var j=0; j<countDayPrice; j++){
        ...
    }
}

Any solution to solve my problem?

try jquery template plugin

Muhammed Shevil KP
– Muhammed Shevil KP

2016-05-17 07:01:33 +00:00
Commented May 17, 2016 at 7:01 — Muhammed Shevil KP
– Muhammed Shevil KP, Commented May 17, 2016 at 7:01
@DharaParmar, See my question. I update it

samuel toh
– samuel toh

2016-05-17 07:04:48 +00:00
Commented May 17, 2016 at 7:04 — samuel toh
– samuel toh, Commented May 17, 2016 at 7:04
I try loop in loop, but I'm still confused. It seems wrong

samuel toh
– samuel toh

2016-05-17 07:06:43 +00:00
Commented May 17, 2016 at 7:06 — samuel toh
– samuel toh, Commented May 17, 2016 at 7:06
github.com/mastermatt/tmpljs

Muhammed Shevil KP
– Muhammed Shevil KP

2016-05-17 07:07:36 +00:00
Commented May 17, 2016 at 7:07 — Muhammed Shevil KP
– Muhammed Shevil KP, Commented May 17, 2016 at 7:07
@MuhammedShevilKP, I want to change my json as the picture

samuel toh
– samuel toh

2016-05-17 07:12:42 +00:00
Commented May 17, 2016 at 7:12 — samuel toh
– samuel toh, Commented May 17, 2016 at 7:12

Pranav C Balan · Accepted Answer · 2016-05-17 08:03:48Z

3

You can do something like this using $.map()

var json_object = [{
  "attributes": {
    "Code": "SGL",
    "Total": "19421340.27"
  },
  "DayPrice": [{
    "Date": "2016-07-22",
    "Rate": "4900439.85"
  }, {
    "Date": "2016-07-23",
    "Rate": "4845150.21"
  }, {
    "Date": "2016-07-24",
    "Rate": "4845150.21"
  }, {
    "Date": "2016-07-25",
    "Rate": "4830600"
  }]
}, {
  "attributes": {
    "Code": "DBL",
    "Total": "6473780.09"
  },
  "DayPrice": [{
    "Date": "2016-07-22",
    "Rate": "1633479.95"
  }, {
    "Date": "2016-07-23",
    "Rate": "1615050.07"
  }, {
    "Date": "2016-07-24",
    "Rate": "1615050.07"
  }, {
    "Date": "2016-07-25",
    "Rate": "1610200"
  }]
}, {
  "attributes": {
    "Code": "QUAD",
    "Total": "6473780.09"
  },
  "DayPrice": [{
    "Date": "2016-07-22",
    "Rate": "1633479.95"
  }, {
    "Date": "2016-07-23",
    "Rate": "1615050.07"
  }, {
    "Date": "2016-07-24",
    "Rate": "1615050.07"
  }, {
    "Date": "2016-07-25",
    "Rate": "1610200"
  }]
}];

// generate the object for generating table easly 
var res = {};
json_object.forEach(function(v, i) {
  var code = v.attributes.Code; // get value of property code
  v.DayPrice.forEach(function(v1) {
    var date = v1.Date; // get date value from inner object
    res[date] = res[date] || {}; // initialize object with date if not 
    res[date][code] = v1.Rate; // add code value

  });
});

// genarate tr and td using generated object
$('#table').html($.map(res, function(v, i) { // iterate over the generated object
  return $('<tr/>', { // generate tr
    html: [$('<td/>', { // generate first column
      text: i // set first column value as date (key)
    }), $('<td/>', { // generate second column
      html: $.map(v, function(i1, v1) { // iterate over inner ibject to generate  second columnn  content
          return i1 + ':' + v1 + '(per room)'; // generate second column content
        }).join('<br>') // seperate each line using br tag
    })]
  })
}))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table" border=1></table>

edited May 17, 2016 at 8:03

answered May 17, 2016 at 7:20

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

samuel toh Over a year ago

I need you help. Look here : stackoverflow.com/questions/39652796/…

Pranav C Balan Over a year ago

@samueltoh : check the comments added in your question

kapantzak · Accepted Answer · 2016-05-17 07:31:07Z

1

You can use for loop to iterate through the object.

UPDATE

Check this FIDDLE

// Create a new blank object
var dateObj = {};

// Iterate original object
for (key in json_object) {
  var obj = json_object[key];
  var day = obj.DayPrice;
  for (dt in day) {
    var dtObj = day[dt];
    var dtKey = dtObj.Date;    
    if (dateObj.hasOwnProperty(dtKey)) {
        dateObj[dtKey].push({ Code: obj.attributes.Code, Rate: dtObj.Rate });
    } else {
        dateObj[dtKey] = [{ Code: obj.attributes.Code, Rate: dtObj.Rate }];
    }
  }
}

// Iterate the newly created object
for(d in dateObj) {
    var obj = dateObj[d];
    var row = '<tr><td>' + d + '</td><td><ul>';
  $.each(obj, function(i, val) {
    console.log(val);
    row += '<li>' + val.Code + ': ' + val.Rate + '</li>';
  });
  row += '</ul></td></tr>';
  $('#target').find('tbody').append(row);
}

edited May 17, 2016 at 7:31

answered May 17, 2016 at 7:06

kapantzak

11.8k5 gold badges42 silver badges63 bronze badges

1 Comment

samuel toh Over a year ago

I need you help. Look here : stackoverflow.com/questions/39652796/…

Vladimir Drenovski · Accepted Answer · 2016-05-17 07:49:32Z

EDIT: My understanding is that you want to rebuild your JSON, to do so you could follow some of the explenations below.

You could iterate through the whole JSON with forEach() method. Something like this:

 json_object.forEach(function(v,i){
      v.DayPrice.forEach(function(vv,ii){
          var date = vv.Date;
          var rate = vv.Rate;
          var code = v.attributes.Code;
          var Total = v.attributes.Total;
          //below you can implement your own logic to not duplicate dates
          console.log(date + " : " + code+" : " + rate);

    })})

You will need to implement aditional logic on how to prevent date duplication. One suggestion is to build your own object and then use it to display the data like such:

var myObj = {};

json_object.forEach(function(v,i){
          v.DayPrice.forEach(function(vv,ii){
              var date = vv.Date;
              var rate = vv.Rate;
              var code = v.attributes.Code;
              var Total = v.attributes.Total;

              if(date in myObj){
               myObj[date].push({'code':code, 'rate':rate});                   
              }else{
               myObj[date] = [];
              }

        })})

Afterwards you need to Use the newly created myObj to append the values to the html either using lists or tables, its entirely up to you. You can use this code:

for(key in myObj){
 //append the key asd value in the desired html element.
 myObj[key].forEach(function(v,i){
 var code = v.code;
 var rate = v.rate;
 //append code and rate to the corresponding html element
});

}

If you would like to implement it further please provide a sample html or even better a JSFiddle

Collectives™ on Stack Overflow

How to display json object to html?

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related