Nested ngrepeats with inconsistent data structures - html

Question

I am creating a set of divs from a JSON object using ng-repeat that construct "note" cards. The number of cards is determined by the number of JSON objects in the array. "Type" designates the header of the card, and "Content" designates the body. However, the contents of "Content" is not consistent. In some examples, the content is merely a sentence or paragraph. In others, the content is an array. When the content is a sentence, the formatting is handled fine. When the content is an array, I end up with the actual array in text format [{"year":"2009", "operation":"caesarean"},{"year":"2010", "operation":"torn meniscus"}] as the body of the card. Any ideas of how to implement this without scripting each card individually?
HTML
<section name="patientinfo">
<div align="center" ng-controller="HistoryCtrl">
<div class="grid-container" ng-repeat="record in historyItems">
<div class="row" row>
<div class="col-2" ng-repeat="history in record.History">
<div class="note" draggable="true">
<div class="row" id="rowhead3">
<div class="col-6" >
<span class="note-header">{{history.type}}</span>
</div>
</div>
<div class="row">
<div class="col-6" style="overflow: auto; height:250px;">
<div>
<span class="note-content">
{{history.content}}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
JSON Example (the actual JSON is huge). There are many other entries besides "history". Also, these notes are not from a real person, so don't worry.
"History": [
{
"type": "medical",
"content": [
{
"condition": "IBS"
},
{
"condition": "Torn Meniscus Right Knee"
},
{
"condition": "Seasonal Allergies"
}
]
},
{
"type": "SOCIAL HISTORY",
"content": "Lives with husband and 3 children. No history of violence, domestic violence, or rape. Feels safe at home and in relationship. ETOH on weekends (socially 4 drinks in one weekend occasionally) and occasionally smokes cigarettes and marijuana. Admits to very rare marijuana on special occasions."
}]
Example of what I'm ending up with:
http://i.stack.imgur.com/MtuBN.png

Answer 1

You should transform or augment the data into a new format where you have the following structure for each note:
{
type: "string",
contentType: "(text|list)",
content: "string" // OR array of strings
}
To do this, you will need to have custom logic to transform each object in the array to a single string.
Then just use an ng-switch on the contentType attribute to decide which markup to use (e.g. a <ul> if contentType is list).