Display product name group by


#1

hi guys how to display product name group by order

my data json:
{
“id”: “8653624b-7775-4905-b599-4f999c028bc1”,
“number”: “2”,
“totalPrice”: 1190,
“dateCreated”: “2019-01-15T16:41:30.993”,
“dateModified”: null,
“userId”: “f61a2d2c-1bcf-4926-a742-faa0b45c65be”,
“storeId”: “00000000-0000-0000-0000-000000000000”,
“store”: “Store 2 El Maarif”,
“brandName”: “Zara”,
“logobrand”: “http://172.20.208.1:3000/images/brands/zara.png”,
“status”: “Pending”,
“currency”: “MAD”,
“workflowId”: “78600b9e-eec3-4ddc-8b9e-54257904fea4”,
“orderDetail”: [
{
“orderId”: “8653624b-7775-4905-b599-4f999c028bc1”,
“productId”: “983875b6-92d2-4bea-a990-559bcf18ac99”,
“qte”: 1,
“price”: 20,
“total”: 20,
“dateCreated”: “0001-01-01T00:00:00”,
“dateModified”: null,
“productName”: “Super Skinny Jeans With Abrasions”
},
{
“orderId”: “8653624b-7775-4905-b599-4f999c028bc1”,
“productId”: “b03952a6-cd6c-4369-baa2-797705401e68”,
“qte”: 3,
“price”: 130,
“total”: 390,
“dateCreated”: “0001-01-01T00:00:00”,
“dateModified”: null,
“productName”: “Black Leather Mid Heeled Chelsea Boots”
},
{
“orderId”: “8653624b-7775-4905-b599-4f999c028bc1”,
“productId”: “07e98dab-8137-4b10-9616-7d894ce5802a”,
“qte”: 12,
“price”: 20,
“total”: 240,
“dateCreated”: “0001-01-01T00:00:00”,
“dateModified”: null,
“productName”: “Navy Textured Backpack”
},
{
“orderId”: “8653624b-7775-4905-b599-4f999c028bc1”,
“productId”: “24965096-58fb-4890-9987-7e6ac82f7dd8”,
“qte”: 6,
“price”: 90,
“total”: 540,
“dateCreated”: “0001-01-01T00:00:00”,
“dateModified”: null,
“productName”: “Hoodie in Jersey”
}
]
},
{
“id”: “4b3a0bcb-614c-4252-8595-a7b815dbeced”,
“number”: “94676180”,
“totalPrice”: 90,
“dateCreated”: “2019-02-11T22:51:54.337”,
“dateModified”: null,
“userId”: “f61a2d2c-1bcf-4926-a742-faa0b45c65be”,
“storeId”: “00000000-0000-0000-0000-000000000000”,
“store”: “Store 2 El Maarif”,
“brandName”: “Zara”,
“logobrand”: “http://172.20.208.1:3000/images/brands/zara.png”,
“status”: “Pending”,
“currency”: “USD”,
“workflowId”: “8ff889cb-bf14-42d0-b471-2e8fb8c2b600”,
“orderDetail”: [
{
“orderId”: “4b3a0bcb-614c-4252-8595-a7b815dbeced”,
“productId”: “24965096-58fb-4890-9987-7e6ac82f7dd8”,
“qte”: 1,
“price”: 90,
“total”: 90,
“dateCreated”: “0001-01-01T00:00:00”,
“dateModified”: null,
“productName”: “Hoodie in Jersey”
}
]
},

    <App Background="#ECEFF1">

	<JavaScript>
		var Observable = require("FuseJS/Observable");

		var data = Observable();
        var Dataproduct = Observable();

		function Article(data) {
			this.title = data.number;
			this.description = data.content.description;
			this.author = data.content.author;
			this.published = new Date(data.date_published * 1000).toDateString();
			this.image = "";
			if (data.content.media.images.length > 0) this.image = data.content.media.images[0].original_url;
		};

		fetch("my url")
		.then(function(response) { return response.json(); })
		.then(function(responseObject) {
            
           responseObject
		.map(function(order){
        data.add(order)
        Dataproduct.add(order.orderDetail)
    })
		});

		module.exports = {
			dataSource: data,
            Dataproduct:Dataproduct
		};
	</JavaScript>

	<Panel ux:Class="NewsItem">
		<StackPanel ItemSpacing="10" Margin="15">
			<Text Value="{number}" TextWrapping="Wrap" FontSize="20" />
			<DockPanel>
				<Text Value="{description}" TextWrapping="Wrap" FontSize="13" />
				<Each Items="{dataSource.orderDetail}" >
					<Panel Dock="Left">
						<Text Value="{productName}" TextWrapping="Wrap" FontSize="20" />
					</Panel>
				</Each>
			</DockPanel>
			
		</StackPanel>
		<Rectangle Color="#FFF" />
	</Panel>

	<ClientPanel>
		<Panel Dock="Top" Height="46">
			<Text Value="NEWS" Color="#ECEFF1" FontSize="28" Alignment="Center" />
			<Rectangle Color="#37474F" />
			<Shadow />
		</Panel>
		<ScrollView>
			<StackPanel ItemSpacing="1">
				<Each Items="{dataSource}">
					<NewsItem />
				</Each>
                
			</StackPanel>
            
		</ScrollView>
	</ClientPanel>
</App>

#2

Hi guys i found the solution thank you all :blush: