如何顯示json對象到html？

Question

我的JSON對象是這樣的：

[{ 
    "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" 
    }] 
}] 

從JSON對象數組，我要顯示這樣的形象：

我有嘗試，但我仍然感到困惑。 我覺得無法做到。

我嘗試循環中循環是這樣的：

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

任何解決方案來解決我的問題呢？

Answer 1

您可以使用for循環遍歷該對象。

UPDATE

入住這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); 
} 

Answer 2

你可以用做這樣的事情$.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>

Answer 3

編輯：我的理解是，你想重建你的JSON，這樣做，你可以按照下面的一些explenations。

您可以使用forEach（）方法迭代整個JSON。 事情是這樣的：

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); 

    })}) 

您將需要實現怎樣防止重複日期邏輯aditional的。一個建議是建立自己的對象，然後用它來顯示像這樣的數據：

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] = []; 
       } 

     })}) 

之後，您需要使用新創建MyObj中的值追加到HTML或者使用列表或表格，其完全由你決定。 您可以使用此代碼：

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

}