XML to JSON conversion with arrays - arrays

I have a requirement to convert xml to json. few elements required an array and for few elements it is not required.The Initial root tag also needs to be remove. Below is my xml.
<?xml version="1.0" encoding="UTF-8" ?>
<ns1:Account_Resp xmlns:ns1="test:test:services">
<row>
<bank>
<bank>1234</bank>
<bankShortName>customer</bankShortName>
</bank>
<card>
<cardLastFour>000</cardLastFour>
<cardType>00n</cardType>
</card>
<address>
<city>CA</city>
<country>CA</country>
</address>
<version>
<symbol>20200702111359</symbol>
</version>
<locks>
<lockType>06</lockType>
<lockValidFrom>00</lockValidFrom>
<lockValidTo>9</lockValidTo>
</locks>
<locks>
<lockType>0</lockType>
<lockValidFrom>000</lockValidFrom>
<lockValidTo>99</lockValidTo>
</locks>
<infoStore>
<informationCategoryCode></informationCategoryCode>
<infoDateFrom></infoDateFrom>
</infoStore>
<changedTime>111359</changedTime>
<standAloneFlag>false</standAloneFlag>
</row>
<row>
<bank>
<bank>1234</bank>
<bankShortName>customer</bankShortName>
</bank>
<card>
<cardLastFour>000</cardLastFour>
<cardType>00n</cardType>
</card>
<address>
<city>CA</city>
<country>CA</country>
</address>
<version>
<symbol>20200702111359</symbol>
</version>
<locks>
<lockType>06</lockType>
<lockValidFrom>00</lockValidFrom>
<lockValidTo>9</lockValidTo>
</locks>
<locks>
<lockType>0</lockType>
<lockValidFrom>000</lockValidFrom>
<lockValidTo>99</lockValidTo>
</locks>
<infoStore>
<informationCategoryCode></informationCategoryCode>
<infoDateFrom></infoDateFrom>
</infoStore>
<changedTime>111359</changedTime>
<standAloneFlag>false</standAloneFlag>
</row>
</ns1:Account_Resp>
For the above xml i have used the below XSLT code to convert into json.
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:ns0="http://use your namespace">
<xsl:output method="text"/>
<xsl:template match="/ns0:Account_Resp">{
<xsl:apply-templates select="*"/> }
</xsl:template>
<!-- Object or Element Property-->
<xsl:template match="*">
"<xsl:value-of select="name()"/>" : <xsl:call-template name="Properties"/>
</xsl:template>
<!-- Array Element -->
<xsl:template match="*" mode="ArrayElement">
<xsl:call-template name="Properties"/>
</xsl:template>
<!-- Object Properties -->
<xsl:template name="Properties">
<xsl:variable name="childName" select="name(*[1])"/>
<xsl:choose>
<xsl:when test="not(*|#*)">"<xsl:value-of select="."/>"</xsl:when>
<xsl:when test="count(*[name()=$childName]) > 1">{ "<xsl:value-of select="$childName"/>" :[<xsl:apply-templates select="*" mode="ArrayElement"/>] }</xsl:when>
<xsl:otherwise>{
<xsl:apply-templates select="#*"/>
<xsl:apply-templates select="*"/>
}</xsl:otherwise>
</xsl:choose>
<xsl:if test="following-sibling::*">,</xsl:if>
</xsl:template>
<!-- Attribute Property -->
<xsl:template match="#*">"<xsl:value-of select="name()"/>" : "<xsl:value-of select="."/>",
</xsl:template>
</xsl:stylesheet>
I am expecting below output, but with above code it is not giving the correct output.
[
{
"bank": {
"bank": "1234",
"bankShortName": "customer"
},
"card": {
"cardLastFour": "000",
"cardType": "00n"
},
"address": {
"city": "Monicashire",
"country": "CA"
},
"version": {
"symbol": "2345"
},
"locks": [
{
"lockType": "06",
"lockValidFrom": "00",
"lockValidTo": "9"
},
{
"lockType": "06",
"lockValidFrom": "000",
"lockValidTo": "999"
}
],
"infoStore": {
"informationCategoryCode": "",
"infoDateFrom": "",
"infoDateTo": ""
},
"changedTime": "111359",
"standAloneFlag": "false"
},
{
"bank": {
"bank": "1234",
"bankShortName": "customer"
},
"card": {
"cardLastFour": "000",
"cardType": "00n",
},
"address": {
"city": "ca",
"country": "CA",
},
"version": {
"symbol": "156"
},
"locks": [
{
"lockType": "06",
"lockValidFrom": "00010101",
"lockValidTo": "99991231"
},
{
"lockType": "06",
"lockValidFrom": "00010101",
"lockValidTo": "99991231"
}
],
"infoStore":[ {
"informationCategoryCode": "",
"infoDateFrom": "",
"infoDateTo": ""
}
],
"changedTime": "111359",
"standAloneFlag": false
}
]
Please note that if the row is single also it should show the array symbol. locks and infostore nodes also should be always array even if it single in row.All fields should be in string and standAloneFlag field should be with out quotes.
Could you please help me what corrections i have do to for the correct output.

Related

Using XSLT to transform XML to JSON and add 2 Square bracket [[]]

Request to share the xslt code for xml to json conversion.
we have a requirement to convert xml to json. then Trim the OuterElement and multiple square brackets [[
a) Trim the OuterElement
<ns0:PO_Message xmlns:ns0="http://test.com/Test">
b) The last 2 lineitems(ShipmentRefference, ShipGroupList) with 2 squarebrackets [[
Input xml file:
<?xml version="1.0" encoding="UTF-8"?>
<ns0:PO_Message
xmlns:ns0="http://test.com/Test">
<domainId>MAIL</domainId>
<hubDomainId>MAIL</hubDomainId>
<isForReference>false</isForReference>
<status>releasedToVendor</status>
<docStatus>active</docStatus>
<editingStatus>confirmed</editingStatus>
<vpoNo>2826118</vpoNo>
<vpoDate>2021-02-23</vpoDate>
<instructions>METAL-No Size:1360600001-Article Number</instructions>
<businessRefNo>826118</businessRefNo>
<totalItems>1</totalItems>
<totalQty>160</totalQty>
<season>
<code>F21</code>
</season>
<custId>
<refNo>C000001</refNo>
</custId>
<vendorId>
<vendorCode>41843</vendorCode>
</vendorId>
<headerFactory>
<refNo>F000026</refNo>
<factCode>900088</factCode>
</headerFactory>
<vpoItemList>
<itemNo>19979-2021-0002-41843</itemNo>
<itemName>Base Camp 6 Footprint</itemName>
<customerItemNo>19979</customerItemNo>
<lotNo>1</lotNo>
<itemDesc>Base Camp 6 Footprint</itemDesc>
<shipQty>160</shipQty>
<planedQty>160</planedQty>
<qtyPerExportCarton>160</qtyPerExportCarton>
<qtyPerInnerCarton>160</qtyPerInnerCarton>
<factCode>900088</factCode>
<refNo>19979-2021-0002-41843-1</refNo>
<uom>
<code>PCS</code>
</uom>
<brand>
<code>MAIL</code>
</brand>
<itemId>
<itemNo>19979-2021-0002-41843</itemNo>
</itemId>
<portOfLanding>
<code>DLC Dalian</code>
</portOfLanding>
<vpoItemCsList>
<itemLotNo>19979-2021-0002-41843-Lot1</itemLotNo>
<vpoItemColorRef>METAL</vpoItemColorRef>
<vpoItemColorId>
<refNo>GUNMETAL</refNo>
<shortName>METAL</shortName>
</vpoItemColorId>
<vpoItemSizeId>
<refNo>No Size</refNo>
<displayName>No Size</displayName>
</vpoItemSizeId>
<itemId>
<iteamNo>19979-2021-0002-41843</iteamNo>
</itemId>
<lotNo>1</lotNo>
</vpoItemCsList>
<factId>
<factCode>900088</factCode>
</factId>
</vpoItemList>
<vpoShipDtlDtoGroupList>
<qty>160</qty>
<refNo>00001/19979-2021-0002-41843-1</refNo>
<vpoItemRef
xmlns:ns1="http://sap.com/xi/SAPGlobal/GDT">19979-2021-0002-41843-1
</vpoItemRef>
<vpoItemId>
<itemId>
<itemNo>19979-2021-0002-41843</itemNo>
</itemId>
</vpoItemId>
<vpoShipRef>00001</vpoShipRef>
<vpoShipId>
<shipmentNo>00001</shipmentNo>
<originalShipmentDate>2021-08-17</originalShipmentDate>
<shipmentDate>2021-08-23</shipmentDate>
<originalInDcDate>2021-09-15</originalInDcDate>
<inDcDate>2021-09-15</inDcDate>
<refNo>00001/19979-2021-0002-41843-1</refNo>
<shipMode>
<code>3</code>
</shipMode>
<finalDestination>
<code>0001</code>
</finalDestination>
<portOfLoading>
<code>DLC Dalian</code>
</portOfLoading>
</vpoShipId>
<shipMode>
<code>3</code>
</shipMode>
<portOfLoading>
<code>DLC Dalian</code>
</portOfLoading>
</vpoShipDtlDtoGroupList>
<vpoShipDtlCsGroupList>
<itemLotNo>19979-2021-0002-41843-Lot1</itemLotNo>
<shipmentNo>00001</shipmentNo>
<colorSizeQty>160</colorSizeQty>
<refNo>00001/19979-2021-0002-41843-1/GUNMETAL/No Size</refNo>
<vpoItemRef>19979-2021-0002-41843-1</vpoItemRef>
<vpoItemId>
<itemId>
<itemNo>19979-2021-0002-41843</itemNo>
</itemId>
</vpoItemId>
<vpoShipRef>00001/19979-2021-0002-41843-1</vpoShipRef>
<vpoItemColorRef>METAL</vpoItemColorRef>
<vpoItemSizeRef>No Size</vpoItemSizeRef>
<vpoShipDtlColorRef>1</vpoShipDtlColorRef>
<vpoShipDtlSizeRef>1</vpoShipDtlSizeRef>
</vpoShipDtlCsGroupList>
</ns0:PO_Message>
Expected Json Output File
{ "domainId" : "MAIL",
"hubDomainId" : "MAIL",
"isForReference" : "false",
"status" : "releasedToVendor",
"docStatus" : "active",
"editingStatus" : "confirmed",
"vpoNo" : "2118",
"vpoDate" : "2021-02-23",
"instructions" : "METAL-No Size:1360600001-Article Number",
"businessRefNo" : "2818",
"totalItems" : "1",
"totalQty" : "160",
"season" :
{ "code" : "F21" },
"custId" :
{ "refNo" : "C000001" },
"vendorId" :
{ "vendorCode" : "41843" },
"headerFactory" :
{ "refNo" : "F000026",
"factCode" : "900088" },
"vpoItemList" :
[
{ "itemNo" : "19979-2021-0002-41843",
"itemName" : "Base Camp 6 Footprint",
"customerItemNo" : "19979",
"lotNo" : "1",
"itemDesc" : "Base Camp 6 Footprint",
"shipQty" : "160",
"planedQty" : "160",
"qtyPerExportCarton" : "160",
"qtyPerInnerCarton" : "160",
"factCode" : "900088",
"refNo" : "19979-2021-0002-41843-1",
"uom" :
{ "code" : "PCS" },
"brand" :
{ "code" : "Wide" },
"itemId" :
{ "itemNo" : "19979-2021-0002-41843" },
"portOfLanding" :
{ "code" : "DLC Dalian" },
"vpoItemCsList" :
[
{ "itemLotNo" : "19979-2021-0002-41843-Lot1",
"vpoItemColorRef" : "METAL",
"vpoItemColorId" :
{ "refNo" : "GUNMETAL",
"shortName" : "METAL" },
"vpoItemSizeId" :
{ "refNo" : "No Size",
"displayName" : "No Size" },
"itemId" :
{ "iteamNo" : "19979-2021-0002-41843" },
"lotNo" : "1" } ],
"factId" :
{ "factCode" : "900088" } } ],
"vpoShipDtlDtoGroupList" :
[
[
{ "qty" : "160",
"refNo" : "00001\/19979-2021-0002-41843-1",
"vpoItemRef" : "19979-2021-0002-41843-1",
"vpoItemId" :
{ "itemId" :
{ "itemNo" : "19979-2021-0002-41843" } },
"vpoShipRef" : "00001",
"vpoShipId" :
{ "shipmentNo" : "00001",
"originalShipmentDate" : "2021-08-17",
"shipmentDate" : "2021-08-23",
"originalInDcDate" : "2021-09-15",
"inDcDate" : "2021-09-15",
"refNo" : "00001\/19979-2021-0002-41843-1",
"shipMode" :
{ "code" : "3" },
"finalDestination" :
{ "code" : "0001" },
"portOfLoading" :
{ "code" : "DLC Dalian" } } ,
"shipMode" :
{ "code" : "3" },
"portOfLoading" :
{ "code" : "DLC Dalian" } } ] ],
"vpoShipDtlCsGroupList" :
[
[
{ "itemLotNo" : "19979-2021-0002-41843-Lot1",
"shipmentNo" : "00001",
"colorSizeQty" : "160",
"refNo" : "00001\/19979-2021-0002-41843-1\/GUNMETAL\/No Size",
"vpoItemRef" : "19979-2021-0002-41843-1",
"vpoItemId" :
{ "itemId" :
{ "itemNo" : "19979-2021-0002-41843" } },
"vpoShipRef" : "00001\/19979-2021-0002-41843-1",
"vpoItemColorRef" : "METAL",
"vpoItemSizeRef" : "No Size",
"vpoShipDtlColorRef" : "1",
"vpoShipDtlSizeRef" : "1" } ] ] }
XLST Code:
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="3.0"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns="http://www.w3.org/2005/xpath-functions"
exclude-result-prefixes="#all"
expand-text="yes">
<xsl:output method="text"/>
<xsl:template match="/*" priority="5">
<xsl:variable name="json-xml">
<map>
<xsl:apply-templates/>
</map>
</xsl:variable>
<xsl:value-of select="xml-to-json($json-xml, map { 'indent' : true() })"/>
</xsl:template>
<xsl:template match="*[not(*)]">
<string key="{local-name()}">{.}</string>
</xsl:template>
<xsl:template match="*[(*) and . castable as xs:double]">
<number key="{local-name()}">{.}</number>
</xsl:template>
<xsl:template match="*[* and not(*[6])]">
<map key="{local-name()}">
<xsl:apply-templates/>
</map>
</xsl:template>
<xsl:template match="*[* and *[6]]">
<array key="{local-name()}">
<map>
<xsl:apply-templates/>
</map>
</array>
</xsl:template>
<xsl:template match="vpoShipDtlDtoGroupList | vpoShipDtlCsGroupList" priority="10">
<array key="{local-name()}">
<array>
<map>
<xsl:apply-templates/>
</map>
</array>
</array>
</xsl:template>
</xsl:stylesheet>
Thanks,
Ravi
That is basically a two step transformation from your XML to the XML format the xml-to-json function expects. You would use
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="3.0"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns="http://www.w3.org/2005/xpath-functions"
exclude-result-prefixes="#all"
expand-text="yes">
<xsl:output method="xml" indent="yes"/>
<xsl:mode on-no-match="shallow-skip"/>
<xsl:template match="/*">
<map>
<xsl:apply-templates/>
</map>
</xsl:template>
<xsl:template match="*[not(*)]">
<string key="{local-name()}">{.}</string>
</xsl:template>
<xsl:template match="*[not(*) and . castable as xs:double]">
<number key="{local-name()}">{.}</number>
</xsl:template>
<xsl:template match="*[* and not(*[2])]">
<map key="{local-name()}">
<xsl:apply-templates/>
</map>
</xsl:template>
<xsl:template match="*[* and *[2]]">
<array key="{local-name()}">
<map>
<xsl:apply-templates/>
</map>
</array>
</xsl:template>
<xsl:template match="ShipGroupList | ShipmentRefference" priority="10">
<array key="{local-name()}">
<array>
<map>
<xsl:apply-templates/>
</map>
</array>
</array>
</xsl:template>
<xsl:template match="/" name="xsl:initial-template">
<xsl:next-match/>
<xsl:comment xmlns:saxon="http://saxon.sf.net/">Run with {system-property('xsl:product-name')} {system-property('xsl:product-version')} {system-property('Q{http://saxon.sf.net/}platform')}</xsl:comment>
</xsl:template>
</xsl:stylesheet>
for the first step which gives (https://xsltfiddle.liberty-development.net/asoTJB/0) e.g.
<?xml version="1.0" encoding="UTF-8"?>
<array xmlns="http://www.w3.org/2005/xpath-functions" key="PO_Message">
<map>
<string key="domainId">Mail</string>
<string key="hubId">Mail</string>
<array key="MailItemList">
<map>
<string key="itemNo">2021-0002</string>
<string key="itemName">Camp</string>
<map key="factId">
<number key="factCode">188</number>
</map>
</map>
</array>
<array key="ShipGroupList">
<array>
<map>
<number key="GroupList1">123</number>
<number key="qty">160</number>
<map key="shipMode">
<number key="code">3</number>
</map>
</map>
</array>
</array>
<array key="ShipmentRefference">
<array>
<map>
<number key="itemLotNo">199791</number>
<number key="shipmentNo">1</number>
</map>
</array>
</array>
</map>
</array>
<!--Run with SAXON HE 9.8.0.15 -->
then a complete stylesheet would use the first step in a variable and apply the xml-to-json function to the variable:
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="3.0"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns="http://www.w3.org/2005/xpath-functions"
exclude-result-prefixes="#all"
expand-text="yes">
<xsl:output method="text"/>
<xsl:template match="/*" priority="5">
<xsl:variable name="json-xml">
<map>
<xsl:apply-templates/>
</map>
</xsl:variable>
<xsl:value-of select="xml-to-json($json-xml, map { 'indent' : true() })"/>
</xsl:template>
<xsl:template match="*[not(*)]">
<string key="{local-name()}">{.}</string>
</xsl:template>
<xsl:template match="*[not(*) and . castable as xs:double]">
<number key="{local-name()}">{.}</number>
</xsl:template>
<xsl:template match="*[* and not(*[2])]">
<map key="{local-name()}">
<xsl:apply-templates/>
</map>
</xsl:template>
<xsl:template match="*[* and *[2]]">
<array key="{local-name()}">
<map>
<xsl:apply-templates/>
</map>
</array>
</xsl:template>
<xsl:template match="ShipGroupList | ShipmentRefference" priority="10">
<array key="{local-name()}">
<array>
<map>
<xsl:apply-templates/>
</map>
</array>
</array>
</xsl:template>
</xsl:stylesheet>
https://xsltfiddle.liberty-development.net/asoTJB/1

multiple select is not working :angularjs

I'm trying to select multiple value at a time using ui-select2 and for this i have added some angular-js script like
<link rel="stylesheet" href="<?php echo base_url(); ?>angular-js/bower_components/select2/select2.css">
<script type="text/javascript" src="<?= base_url() ?>angular-js/bower_components/jquery/jquery.js"></script>
<script type="text/javascript" src="<?= base_url() ?>angular-js/bower_components/select2/select2.js"></script>
<script type="text/javascript" src="<?= base_url() ?>angular-js/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="<?= base_url() ?>angular-js/bower_components/angular-ui-select2/src/select2.js"></script>
and html code
<select multiple="multiple" ui-select2 ng-model="submitAdsFormData.city_id" ng-init="get_city_by_search()" style="width:300px" required>
<option value="{{x.name}}" ng-repeat ="x in searchResult">{{x.name}}</option>
</select>
For example, i want this type of select
https://jsfiddle.net/NathanFriend/rLmztr2d/ but in angularjs.
But not getting selected multiple value.can anyone help me to get this.
Thanks in advance.
for this you need to pass a JSON setup to ui-select2 like
<select multiple="multiple" ui-select2="multiSetup" ng-model="submitAdsFormData.city_id" ng-init="get_city_by_search()" style="width:300px" required>
<option value="{{x.name}}" ng-repeat ="x in searchResult">{{x.name}}</option>
</select>
and in a controller
$scope.searchResult = [{"text": "Group1", "id": 2}, {"text": "Group2", "id": 62}, {"text": "Group3", "id": 68}, {"text": "Group4", "id": 74}, {"text": "Group5", "id": 98}, {"text": "Group6", "id": 104}, {"text": "Group7", "id": 107}, {"text": "Group8", "id": 139}, {"text": "Group9", "id": 149}, {"text": "Group10", "id": 154}];
$scope.multiSetup = {
multiple: true,
formatSearching: 'Searching the group...',
formatNoMatches: 'No group found'
};
working plunker.

ng-repeat not working with Objects of Objects

I have data in my object of objects but ng-repeat is not showing me anything my data is json Format like:
{
"0": [
{
"question": "How often is real property re-assessed (or revalued)?",
"id": 1,
"section": "Assessment",
"sectionId": 2,
"check": true,
"index": 0
},
{
"question": "How often is real property re-assessed (or revalued)?",
"id": 1,
"section": "Assessment",
"sectionId": 2,
"check": true,
"index": 0
},
{
"key": "Survey Meta Data"
}
],
"1": [
{
"question": "When are New Assessment Notices sent out?",
"id": 2,
"section": "Assessment",
"sectionId": 2,
"check": true,
"index": 1
},
{
"key": "Assessment"
}
]
}
and I want to display all question and key how can I achieve this I am trying something like this:
<div class="form-group" ng-repeat="data in viewQuestions">
<div ng-repeat="values[$index] in data ">
<label for="comment">{{values.questions}}</label>
</div>
<label for="comment">{{data.key}}</label>
<textarea class="form-control" rows="2" id="comment"></textarea>
</div>
remove the $index in your ng-repeat.
also, change the {{values.questions}} to {{values.question}}
<div class="form-group" ng-repeat="data in viewQuestions">
<div ng-repeat="values in data ">
<label >{{values.question}}</label>
</div>
<label for="comment">{{data.key}}</label>
<textarea class="form-control" rows="2" id="comment"></textarea>
</div>
Demo
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.viewQuestions = {
"0": [
{
"question": "How often is real property re-assessed (or revalued)?",
"id": 1,
"section": "Assessment",
"sectionId": 2,
"check": true,
"index": 0
},
{
"question": "How often is real property re-assessed (or revalued)?",
"id": 1,
"section": "Assessment",
"sectionId": 2,
"check": true,
"index": 0
},
{
"key": "Survey Meta Data"
}
],
"1": [
{
"question": "When are New Assessment Notices sent out?",
"id": 2,
"section": "Assessment",
"sectionId": 2,
"check": true,
"index": 1
},
{
"key": "Assessment"
}
]
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div class="form-group" ng-repeat="data in viewQuestions">
<div ng-repeat="values in data ">
<label >{{values.question}}</label>
</div>
<label for="comment">{{data.key}}</label>
<textarea class="form-control" rows="2" id="comment"></textarea>
</div>
</div>
Proably you need this,
<div class="form-group" ng-repeat="(key,value) in viewQuestions track by $index">
<div ng-repeat="values in value ">
<label for="comment">{{values.question}}</label>
<label for="comment">{{values.key}}</label>
<textarea class="form-control" rows="2" id="comment"></textarea>
</div>
</div>
DEMO
var pegasusWebApp = angular.module('ReqWebApp', [])
pegasusWebApp.controller('ReqAppController', function ReqAppController($scope) {
$scope.viewQuestions = {
"0": [
{
"question": "How often is real property re-assessed (or revalued)?",
"id": 1,
"section": "Assessment",
"sectionId": 2,
"check": true,
"index": 0
},
{
"question": "How often is real property re-assessed (or revalued)?",
"id": 1,
"section": "Assessment",
"sectionId": 2,
"check": true,
"index": 0
},
{
"key": "Survey Meta Data"
}
],
"1": [
{
"question": "When are New Assessment Notices sent out?",
"id": 2,
"section": "Assessment",
"sectionId": 2,
"check": true,
"index": 1
},
{
"key": "Assessment"
}
]
};
});
<!DOCTYPE html>
<html ng-app="ReqWebApp">
<head>
<meta charset="UTF-8">
<title>New Request</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="ReqAppController">
<div class="form-group" ng-repeat="(key,value) in viewQuestions track by $index">
<div ng-repeat="values in value ">
<label for="comment">{{values.question}}</label>
<label for="comment">{{values.key}}</label>
<textarea class="form-control" rows="2" id="comment"></textarea>
</div>
</div>
</body>
</html>
angular.module("Myapp",[])
.controller("Myctrl",function($scope){
$scope.viewQuestions = {
"0": [
{
"question": "How often is real property re-assessed (or revalued)?",
"id": 1,
"section": "Assessment",
"sectionId": 2,
"check": true,
"index": 0
},
{
"question": "How often is real property re-assessed (or revalued)?",
"id": 1,
"section": "Assessment",
"sectionId": 2,
"check": true,
"index": 0
},
{
"key": "Survey Meta Data"
}
],
"1": [
{
"question": "When are New Assessment Notices sent out?",
"id": 2,
"section": "Assessment",
"sectionId": 2,
"check": true,
"index": 1
},
{
"key": "Assessment"
}
]
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div ng-app="Myapp" ng-controller="Myctrl">
<div class="form-group" ng-repeat="(key,val) in viewQuestions track by $index">
<div ng-repeat="v in val ">
<label for="comment">{{v.question}}</label>
</div>
<label for="comment">{{val.key}}</label>
<textarea class="form-control" rows="2" id="comment"> </textarea>
</div>
</div>
Here is the JsFiddle link
HTML
<div ng-app="myApp">
<div ng-controller="ctrl">
<div ng-repeat="obj in data">
<div ng-repeat="item in obj">
<label ng-if="item.question">Question:{{item.question}}</label>
<label ng-if="item.key">Key: {{item.key}}</label>
<br>
<textarea ng-if="item.key" class="form-control" rows="2" id="comment">
</textarea>
<hr>
</div>
</div>
</div>
</div>
JS Code
var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
$scope.data = {
"0": [{
"question": "How often is real property re-assessed (or revalued)?",
"id": 1,
"section": "Assessment",
"sectionId": 2,
"check": true,
"index": 0
}, {
"question": "How often is real property re-assessed (or revalued)?",
"id": 2,
"section": "Assessment",
"sectionId": 2,
"check": true,
"index": 0
}, {
"key": "Survey Meta Data"
}],
"1": [{
"question": "When are New Assessment Notices sent out?",
"id": 2,
"section": "Assessment",
"sectionId": 2,
"check": true,
"index": 1
}, {
"key": "Assessment"
}]
};
});
This will print out as you want.

Using an external Angular element with Polymer

I'm teaching myself how to use Polymer [1.0], and I'm attempting to implement a data grid. Problem is...Polymer doesn't have a data grid as a base iron/paper/core element, so I've had to go out and find one.
Luckily, there's a nice one that follows the Google Material Design design specifications, so my intention is to use this one!
My page is set up so that there is a left page drawer, a top header, and a content section. I want the data grid to go into this content section.
The problem I'm facing is that it doesn't appear that the DOM is rendering the data grid component table. It's like it's not running those scripts and filling in the Angular data. My inkling is that it has to do with the way Polymer elements are self-contained, so the data grid scripts aren't reaching it.
I have successfully run this Codepen locally by putting the HTML into a test.html file, and adding the JS to a <script> tag at the bottom of the test HTML page. Everything renders fine. When I try copying and pasting into my application, something happens and the grid won't render.
My index.html code is below:
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Project Emerald" />
<title>Data Grid</title>
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<!-- endbuild -->
<!-- will be replaced with elements/elements.vulcanized.html -->
<link rel="import" href="elements/elements.html">
<!-- endreplace-->
<!-- Custom SCSS Styles -->
<link rel="stylesheet" href="styles/scss/styles.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.min.css">
<link rel="stylesheet" href="http://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.css">
</head>
<body unresolved class="fullbleed layout vertical">
<paper-drawer-panel id="paperDrawerPanel">
<!-- Drawer Scroll Header Panel -->
<paper-scroll-header-panel drawer fixed>
<!-- Drawer Toolbar -->
<paper-toolbar id="drawerToolbar">
<img src="images/dark-green.svg" class="app-logo" />
</paper-toolbar>
<!-- Drawer Content -->
<paper-menu class="list" attr-for-selected="data-route" selected="[[route]]">
<a data-route="inbox" href="#">
<iron-icon icon="inbox"></iron-icon>
<span>Inbox</span>
</a>
<a data-route="outbox" href="#">
<iron-icon icon="send"></iron-icon>
<span>Outbox</span>
</a>
<a data-route="trash" href="#">
<iron-icon icon="delete"></iron-icon>
<span>Trash</span>
</a>
<a data-route="spam" href="#">
<iron-icon icon="report"></iron-icon>
<span>Spam</span>
</a>
<paper-submenu>
<div class="menu-trigger">
<a data-route="forum" href="#">
<iron-icon icon="question-answer"></iron-icon>
<span>Forums</span>
</a>
</div>
<paper-menu class="menu-content">
<paper-item>General</paper-item>
<paper-item>UI/UX</paper-item>
<paper-item>Frontend Dev</paper-item>
<paper-item>Graphic Design</paper-item>
<paper-item>Photography</paper-item>
</paper-menu>
</paper-submenu>
<a data-route="updates" href="#">
<iron-icon icon="flag"></iron-icon>
<span>Updates</span>
</a>
<a data-route="promos" href="#">
<iron-icon icon="card-membership"></iron-icon>
<span>Promos</span>
</a>
</paper-menu>
</paper-scroll-header-panel>
<!-- Main Area -->
<paper-scroll-header-panel main fixed>
<!-- Main Toolbar -->
<paper-toolbar id="mainToolbar">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<!-- Application name -->
<div class="top top-container center horizontal layout flex">
<div class="title">Grid Title</div>
</div>
<!-- Toolbar icons -->
<paper-icon-button icon="filter-list"></paper-icon-button>
<paper-icon-button icon="search"></paper-icon-button>
</paper-toolbar>
<!-- Main Content -->
<div class="content cards layout">
<md-content layout="column" flex>
<md-card ng-controller="nutritionController">
<md-data-table-toolbar ng-show="!selected.length">
<h2 class="md-title">Nutrition</h2>
</md-data-table-toolbar>
<md-data-table-toolbar class="alternate" ng-show="selected.length">
<div>{{selected.length}} {{selected.length > 1 ? 'items' : 'item'}} selected</div>
</md-data-table-toolbar>
<md-data-table-container>
<table md-data-table class="md-primary" md-row-select="selected" md-progress="deferred">
<thead md-order="query.order" md-trigger="onorderchange">
<tr>
<th order-by="name" name="Dessert" unit="100g serving"></th>
<th order-by="type" name="Type"></th>
<th numeric order-by="calories.value" name="Calories"></th>
<th numeric unit="g" order-by="fat.value" name="Fat"></th>
<th numeric unit="g" order-by="carbs.value" name="Carbs"></th>
<th numeric unit="g" order-by="protein.value" name="Protein"></th>
<th numeric unit="mg" order-by="sodium.value" name="Sodium"></th>
<th numeric unit="%" order-by="calcium.value" name="Calcium"></th>
<th numeric unit="%" order-by="iron.value" name="Iron"></th>
</tr>
</thead>
<tbody>
<tr md-auto-select md-disable-select="dessert.name === 'Jelly bean'" ng-repeat="dessert in desserts.data | orderBy: query.order | limitTo: query.limit: (query.page - 1) * query.limit">
<td>{{dessert.name}}</td>
<td>
<md-select ng-model="dessert.type" placeholder="Other">
<md-option ng-value="type" ng-repeat="type in getTypes()">{{type}}</md-option>
</md-select>
</td>
<td>{{dessert.calories.value}}</td>
<td>{{dessert.fat.value | number: 2}}</td>
<td>{{dessert.carbs.value}}</td>
<td>{{dessert.protein.value | number: 2}}</td>
<td>{{dessert.sodium.value}}</td>
<td show-unit>{{dessert.calcium.value}}</td>
<td show-unit>{{dessert.iron.value}}</td>
</tr>
</tbody>
</table>
</md-data-table-container>
<md-data-table-pagination md-limit="query.limit" md-page="query.page" md-total="{{desserts.count}}" md-trigger="onpagechange"></md-data-table-pagination>
</md-card>
</md-content>
</div>
</paper-scroll-header-panel>
</paper-drawer-panel>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
<!-- Core jQuery -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Data table libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.min.js"></script>
<script src="http://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.js"></script>
<script src="bower_components/md-data-table/dist/sample.js"></script>
</body>
</html>
Code for sample.js:
angular.module('demoApp', ['ngMaterial', 'md.data.table'])
.controller('nutritionController', ['$q', '$scope', '$timeout', function ($q, $scope, $timeout) {
$scope.selected = [];
$scope.query = {
order: 'name',
limit: 5,
page: 1
};
$scope.desserts = {
"count": 9,
"data": [
{
"name": "Frozen yogurt",
"type": "Ice cream",
"calories": { "value": 159.0 },
"fat": { "value": 6.0 },
"carbs": { "value": 24.0 },
"protein": { "value": 4.0 },
"sodium": { "value": 87.0 },
"calcium": { "value": 14.0 },
"iron": { "value": 1.0 }
}, {
"name": "Ice cream sandwich",
"type": "Ice cream",
"calories": { "value": 237.0 },
"fat": { "value": 9.0 },
"carbs": { "value": 37.0 },
"protein": { "value": 4.3 },
"sodium": { "value": 129.0 },
"calcium": { "value": 8.0 },
"iron": { "value": 1.0 }
}, {
"name": "Eclair",
"type": "Pastry",
"calories": { "value": 262.0 },
"fat": { "value": 16.0 },
"carbs": { "value": 24.0 },
"protein": { "value": 6.0 },
"sodium": { "value": 337.0 },
"calcium": { "value": 6.0 },
"iron": { "value": 7.0 }
}, {
"name": "Cupcake",
"type": "Pastry",
"calories": { "value": 305.0 },
"fat": { "value": 3.7 },
"carbs": { "value": 67.0 },
"protein": { "value": 4.3 },
"sodium": { "value": 413.0 },
"calcium": { "value": 3.0 },
"iron": { "value": 8.0 }
}, {
"name": "Jelly bean",
"type": "Candy",
"calories": { "value": 375.0 },
"fat": { "value": 0.0 },
"carbs": { "value": 94.0 },
"protein": { "value": 0.0 },
"sodium": { "value": 50.0 },
"calcium": { "value": 0.0 },
"iron": { "value": 0.0 }
}, {
"name": "Lollipop",
"type": "Candy",
"calories": { "value": 392.0 },
"fat": { "value": 0.2 },
"carbs": { "value": 98.0 },
"protein": { "value": 0.0 },
"sodium": { "value": 38.0 },
"calcium": { "value": 0.0 },
"iron": { "value": 2.0 }
}, {
"name": "Honeycomb",
"type": "Other",
"calories": { "value": 408.0 },
"fat": { "value": 3.2 },
"carbs": { "value": 87.0 },
"protein": { "value": 6.5 },
"sodium": { "value": 562.0 },
"calcium": { "value": 0.0 },
"iron": { "value": 45.0 }
}, {
"name": "Donut",
"type": "Pastry",
"calories": { "value": 452.0 },
"fat": { "value": 25.0 },
"carbs": { "value": 51.0 },
"protein": { "value": 4.9 },
"sodium": { "value": 326.0 },
"calcium": { "value": 2.0 },
"iron": { "value": 22.0 }
}, {
"name": "KitKat",
"type": "Candy",
"calories": { "value": 518.0 },
"fat": { "value": 26.0 },
"carbs": { "value": 65.0 },
"protein": { "value": 7.0 },
"sodium": { "value": 54.0 },
"calcium": { "value": 12.0 },
"iron": { "value": 6.0 }
}
]
};
$scope.getTypes = function () {
return ['Candy', 'Ice cream', 'Other', 'Pastry'];
};
$scope.onpagechange = function(page, limit) {
var deferred = $q.defer();
$timeout(function () {
deferred.resolve();
}, 2000);
return deferred.promise;
};
$scope.onorderchange = function(order) {
var deferred = $q.defer();
$timeout(function () {
deferred.resolve();
}, 2000);
return deferred.promise;
};
}]);
Solved. The solution is simple, and will be obvious to those who know what they're doing with regards to Angular.
I should have mentioned that I'm also new to Angular and I forgot the all-important html tag definitions. Here's the fix.
Before:
<html lang="">
After:
<html lang="en" ng-app="demoApp" class="ng-scope">
There are some styling conflicts between the data grid and the default Polymer element styling, but those are much easier to sort out.

How to set width for Kendo Angular input kendo-auto-complete?

I need to set width of the autocomplete input in the Angular Kendo.
How can i do it programatically please?
Thanks for any help.
Setting it with an initial value, you should use style="width: 200px;".
Example:
<input kendo-auto-complete="my_autocomplete" ng-model="country" k-data-source="countryNames" style="width: 200px" />
If then you need to modify it, you should change the width via css method for wrapper element.
Example
$scope.my_autocomplete.wrapper.css("width", "300px");
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.countryNames = [
"Albania",
"Andorra",
"Armenia",
"Austria",
"Azerbaijan",
"Belarus",
"Belgium",
"Bosnia & Herzegovina",
"Bulgaria",
"Croatia",
"Cyprus",
"Czech Republic",
"Denmark",
"Estonia",
"Finland",
"France",
"Georgia",
"Germany",
"Greece",
"Hungary",
"Iceland",
"Ireland",
"Italy",
"Kosovo",
"Latvia",
"Liechtenstein",
"Lithuania",
"Luxembourg",
"Macedonia",
"Malta",
"Moldova",
"Monaco",
"Montenegro",
"Netherlands",
"Norway",
"Poland",
"Portugal",
"Romania",
"Russia",
"San Marino",
"Serbia",
"Slovakia",
"Slovenia",
"Spain",
"Sweden",
"Switzerland",
"Turkey",
"Ukraine",
"United Kingdom",
"Vatican City"
];
setTimeout(function() {
alert("Changing width");
$scope.my_autocomplete.wrapper.css("width", "300px");
}, 4000);
});
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<input kendo-auto-complete="my_autocomplete" ng-model="country" k-data-source="countryNames" style="width: 200px" />
</div>
</div>

Resources