md-contact-chips with complex data object - angularjs

I have a complex object like attached below. I want to implement tag functionality like in stackoverflow using angular material-contact-chip codepen link. Can someone help me on getting this done
{
"statusReason": "OK",
"responseHeaders": {
"Transfer-Encoding": "chunked",
"Server": "Apache-Coyote\/1.1",
"Date": "Sat, 12 Dec 2015 15:22:00 GMT",
"Content-Type": "application\/json"
},
"isSuccessful": true,
"responseTime": 4,
"totalTime": 6,
"rows": [{
"doc": {
"over16": true,
"address3": "Waterside",
"familyName": "tlor",
"ldapId": 2,
"acceptedTermsAndConditions": true,
"id": 2,
"email": "kevin#gmail.com",
"status": {
"name": "Active",
"id": 2
}
}
}, {
"doc": {
"over16": true,
"address3": "Waterside",
"familyName": "sarha",
"ldapId": 2,
"acceptedTermsAndConditions": true,
"id": 2,
"email": "ain#gmail.com",
"status":{
"name": "Active",
"id": 2
}
}
}],
"statusCode": 200
}

Related

Cypress intercept nested array and object and asserts it value

I am trying to assert value's in a requestbody which I have intercepted with cypress.
The values I need to assert are "name": "NewName", and "title": "STUB1-Draft" you can see in the requestbody example that I have attached.
My testscript in Cypress:
it.only('Check the requestbody', function () {
cy.intercept('PUT', '**/api/assessmenttest/**', req => {
req.reply({ statusCode: 200 });
}).as('NewSectionAndItem');
cy.wait('#NewSectionAndItem')
.its('request.body.test')
.its('testParts')
.its('testSections')
.its('name')
.should('include', 'NewName');
//cy.wait('#NewSectionAndItem').its('request.body.testParts').expect(arr_obj[1].name).to.equal('NewName')
The request body look like the following:
{
"structureStatistics": {
"testPartCount": 1,
"testSectionCount": 6,
"itemCount": 23
},
"name": "BIMMA",
"title": "OTAP",
"correctionInstructionsUrl": "C:Stub/FakePath/For/Cypress",
"correctionInstructionAppendices": [],
"testParts": [
{
"testSections": [
{
"order": 1,
"name": "Tekst 1 Looking for the one? ",
"itemReferences": [
{
"itemId": "55eb5a28-24d8-4705-b465-8e1454f73ac8",
"weight": 11,
"neutralisationType": "NoNeutralisation",
"itemSummary": {
"id": "55eb5a28-24d8-4705-b465-8e1454f73ac8",
"title": "H-E-T1-1"
}
}
],
"id": "5c3eef2d-1094-4b9e-84c1-f184956f87fa"
},
{
"id": "ffaebc93-0bf6-4f75-944a-f61345a7be90",
"name": "NewName",
"itemReferences": [
{
"itemId": "58a29037-c92c-48f6-a7c3-a2f94e288992",
"weight": 0,
"neutralisationType": "NoNeutralisation",
"itemSummary": {
"id": "58a29037-c92c-48f6-a7c3-a2f94e288992",
"title": "STUB1-Draft",
"state": "Draft"
}
}
]
},
{
"order": 2,
"name": "Tekst 2 The fruit Iron Ox bears",
"itemReferences": [
{
"itemId": "abfc0811-26c7-4d9d-b3cc-0c920e5af259",
"weight": 2,
"neutralisationType": "NoNeutralisation",
"itemSummary": {
"id": "abfc0811-26c7-4d9d-b3cc-0c920e5af259",
"title": "H-E-T2-2"
}
},
{
"itemId": "3cfda5e0-0d64-44ef-8a4d-21f37484c024",
"weight": 12,
"neutralisationType": "NoNeutralisation",
"itemSummary": {
"id": "3cfda5e0-0d64-44ef-8a4d-21f37484c024",
"title": "H-E-T2-3"
}
},
{
"itemId": "19ba8a53-9755-4beb-8f69-edd107b80230",
"weight": 1,
"neutralisationType": "NoNeutralisation",
"itemSummary": {
"id": "19ba8a53-9755-4beb-8f69-edd107b80230",
"title": "H-E-T2-4"
}
},
{
"itemId": "3f5b7b81-df1f-4f01-8165-cb2226d9044d",
"weight": 1,
"neutralisationType": "NoNeutralisation",
"itemSummary": {
"id": "3f5b7b81-df1f-4f01-8165-cb2226d9044d",
"title": "H-E-T2-5"
}
}
],
"id": "00f7455e-6d7d-4311-80cd-eff45c83ef2c"
},
{
"order": 3,
"name": "Tekst 3 How to live like a tramp",
"itemReferences": [
{
"itemId": "7e2d568c-4cde-4500-9c6b-c09f246155e4",
"weight": 1,
"neutralisationType": "NoNeutralisation",
"itemSummary": {
"id": "7e2d568c-4cde-4500-9c6b-c09f246155e4",
"title": "H-E-T3-6"
}
},
{
"itemId": "87a5bf1c-451a-40b8-802a-53ee842cafcd",
"weight": 1,
"neutralisationType": "NoNeutralisation",
"itemSummary": {
"id": "87a5bf1c-451a-40b8-802a-53ee842cafcd",
"title": "H-E-T3-7"
}
}
],
"id": "390ecc2e-6715-4898-aaea-158e790525a2"
}
],
"navigationMode": "Linear",
"submissionMode": "Individual",
"id": "a546a67c-ac39-4e81-bf03-beb482c920a0"
}
],
"metadataToBePublished": [
"be63002c-dcf8-449f-a0ae-6ba50d4e2712",
"4d70239e-7a6e-47c3-b157-462d6c8c5edc"
],
"created": "2022-07-08T09:00:00+00:00",
"modified": "2022-09-21T23:55:58.6532451+02:00",
"createdBy": {
"id": "a45ea6db-bf04-427d-9354-7081b7592a3d",
"fullName": "Manual Construction"
},
"lastModifiedBy": {
"id": "129a584c-a677-4d9f-b289-019d1815064f",
"fullName": "OZKAN"
},
"id": "300eea01-ee10-4bd9-9356-8aaa933e949c"
}
I could not figure out how I can assert nested arrays and value's, without using deep.equal for the complete request. Thank you indeed!
It basically just looks like a couple of things
an extra test property in the test that's not there in the request
testParts and testSections are arrays (square bracket instead of curly bracket), so you need an index for them
Generally I think this would work
cy.wait('#NewSectionAndItem')
.its('request.body')
.its('testParts.0')
.its('testSections.1')
.its('name')
.should('include', 'NewName');
The problem is identifying the correct array indexes. testParts has only one element, so 0 is the only index option there.
To find the testSection index, create a dummy .json file in VS Code (or other editor) paste in the json from above and use the collapse toggles on the left to easily see which index contains the value you seek.
You can use a cy-spok plugin to make a spok assertion to easily check a nested property.
Example use
const spok = require('cy-spok')
// later in your test
cy.wait('#NewSectionAndItem')
.its('request.body')
.should(spok({
test: {
testParts: {
testSections: {
name: 'NewName',
title: 'STUB1-Draft'
}
}
}
});

how can i export api nested array of data into excell file in react?

I am working on react e commerce website project and im trying to convert api nested array of data into excell file but im facing the issue. I'm able to get data into excell file in react.js but nested array of data is not showing in excell file???any one can please help me how can i fix it??
//im using this code for covert data into excell sheet
productdownloadFile=(datas=this.state.getlist)=>{
const fileType= "xlsx"
const ws= XLSX.utils.json_to_sheet(datas);
const wb={Sheets:{data:ws},SheetNames:["data"]};
const excelBuffer = XLSX.write(wb, {bookType:"xlsx", type:"array"});
const data = new Blob([excelBuffer], {type:fileType});
FileSaver.saveAs(data, "Product_List"+".xlsx")
}
//my api data is
{
"success": true,
"product": [
{
"id": 1,
"name": "laptop",
"description": "this is awesome product,you should byu it",
"photo": "https://buluckartphoto.s3.ap-south-1.amazonaws.com/download%20%283%29.jpeg",
"lableType": "Veg",
"status": "0",
"isTex": "1",
"GSTrate": 0.23,
"GSTtyp": "inclusive",
"HSNcode": "hsn525fgf",
"videoUpload": "https://buluckartphoto.s3.ap-south-1.amazonaws.com/download%20%283%29.jpeg",
"categoryId": 1,
"subCategoryId": 1,
"settingId": 1,
"createdAt": "2022-05-20T13:26:03.000Z",
"updatedAt": "2022-05-20T13:26:03.000Z",
"featureSetting": {
"recomendedProduct": true,
"deliverySlotStatus": true,
"loyaltyProgram": true,
"COD": true,
"showCOD": false,
"reccemendProductNo": 10
},
"productphotos": [],
"varientModels": [
{
"id": 2,
"sort": 1,
"sku": "htc",
"waightunitno": "250 gram",
"unit": "gram",
"mrp": 1450,
"discount": 450,
"price": 1000,
"stock": 5,
"minstock": 1,
"outofstock": "continew sell after thersold"
}
],
"reccomendProducts": [],
"category": {
"id": 1,
"name": "vegetable",
"photo": "https://buluckartphoto.s3.ap-south-1.amazonaws.com/images.jpeg"
},
"SubCategory": {
"id": 1,
"sub_name": "gold star2",
"photo": "https://buluckartphoto.s3.ap-south-1.amazonaws.com/download.jpeg"
}
}
]
}

Flutter Create dynamic widget from dynamic json response

companyList = data['fields'][0]['choices'];
if (companyList.length != 0) {
int val;
for (val = 0; val < companyList.length; val++) {
final controller = TextEditingController();
final field = xTextfield(
txtlabel: "Values",
iconfield: bookmarksIcon,
);
setState(() {
_controllers.add(controller);
_fields.add(field);
});
}
}
But this works only if json response is same when it changes and Array object is differnet i got error here is my json that will be different everytime e.g
"inputtype": "dropdown", will make a dropdown widget and all data will be put into it and so on
{ "fields": [ { "id": 31, "name": "make", "isrequired": "required", "valuetype": "text", "priority": 1, "inputtype": "dropdown", "max_min": [], "rangeable": "false", "choices": [ { "id": 46, "name": "Samsung", "categoryextrafield_id": 31, "created_at": "2021-12-29T01:30:47.000000Z", "updated_at": "2021-12-29T01:30:47.000000Z", "priority": 10 }, { "id": 47, "name": "Dell", "categoryextrafield_id": 31, "created_at": "2021-12-29T01:30:52.000000Z", "updated_at": "2021-12-29T01:30:52.000000Z", "priority": 20 }, { "id": 48, "name": "IBM", "categoryextrafield_id": 31, "created_at": "2021-12-29T01:31:09.000000Z", "updated_at": "2021-12-29T01:31:09.000000Z", "priority": 30 }, { "id": 49, "name": "Acer", "categoryextrafield_id": 31, "created_at": "2021-12-29T01:31:24.000000Z", "updated_at": "2021-12-29T01:31:24.000000Z", "priority": 40 } ], "available": [] }, { "id": 32, "name": "model", "isrequired": "required", "valuetype": "text", "priority": 2, "inputtype": "textfield", "max_min": [], "rangeable": "false", "choices": [], "available": [ { "model": "a51" }, { "model": "y9s" }, { "model": "a31" }, { "model": "yS10" }, { "model": "Y10S" }, { "model": "A551" }, { "model": "node8" }, { "model": "s9" }, { "model": null }, { "model": "2021" }, { "model": "2020" }, { "model": "2010" }, { "model": "Civic" }, { "model": "2019" }, { "model": "Daewooy9" }, { "model": "corei5" }, { "model": "corei9" }, { "model": "corei3" }, { "model": "corei11" } ] }, { "id": 29, "name": "features", "isrequired": "required", "valuetype": "text", "priority": 3, "inputtype": "checkbox", "max_min": [], "rangeable": "false", "choices": [ { "id": 41, "name": "Bluetooth", "categoryextrafield_id": 29, "created_at": "2021-12-29T01:19:00.000000Z", "updated_at": "2021-12-29T01:19:00.000000Z", "priority": 1 }, { "id": 42, "name": "Fingerprint", "categoryextrafield_id": 29, "created_at": "2021-12-29T01:19:10.000000Z", "updated_at": "2021-12-29T01:19:10.000000Z", "priority": 10 }, { "id": 43, "name": "LedDisplay", "categoryextrafield_id": 29, "created_at": "2021-12-29T01:19:35.000000Z", "updated_at": "2021-12-29T01:19:35.000000Z", "priority": 15 } ], "available": [] }, { "id": 30, "name": "condition", "isrequired": "required", "valuetype": "text", "priority": 4, "inputtype": "radiobutton", "max_min": [], "rangeable": "false", "choices": [ { "id": 44, "name": "Used", "categoryextrafield_id": 30, "created_at": "2021-12-29T01:20:31.000000Z", "updated_at": "2021-12-29T01:20:31.000000Z", "priority": 10 }, { "id": 45, "name": "New", "categoryextrafield_id": 30, "created_at": "2021-12-29T01:20:38.000000Z", "updated_at": "2021-12-29T01:20:38.000000Z", "priority": 20 } ], "available": [] } ] }
You can use the Dynamic Widget package.
Just pass the widget as JSON data from the server and use a FutureBuilder to build it when your data arrives.
You will also need to change your JSON data accordingly.

Filter an array of obj based on another array value

I have an array of object like this :
[
{
"url": "https://recipes-gatsby-react.netlify.app/",
"stack": [
{
"id": 1,
"title": "GatsbyJs"
},
{
"id": 2,
"title": "React"
},
{
"id": 3,
"title": "GraphQl"
}
],
"id": "Project_1",
"featured": false,
"title": "Gatsby recipes app"
},
{
"url": "https://resort-react-mr.netlify.app",
"stack": [
{
"id": 4,
"title": "React"
},
{
"id": 5,
"title": "Contentful"
}
],
"id": "Project_2",
"featured": false,
"title": "react resort"
},
{
"url": "https://color-generator-react-mr.netlify.app/",
"stack": [
{
"id": 6,
"title": "React"
}
],
"id": "Project_3",
"featured": false,
"title": "color generator"
},
{
"url": "",
"stack": [
{
"id": 7,
"title": "React Native"
},
{
"id": 8,
"title": "Firebase"
}
],
"id": "Project_4",
"featured": false,
"title": "Book-Worm"
},
{
"url": "",
"stack": [
{
"id": 9,
"title": "React Native"
},
{
"id": 10,
"title": "Firebase"
},
{
"id": 11,
"title": "Stripe"
},
{
"id": 12,
"title": "Google Api"
}
],
"id": "Project_5",
"featured": false,
"title": "Delivery App"
},
{
"url": "https://cocktails-react-app-mr.netlify.app/",
"stack": [
{
"id": 13,
"title": "React"
}
],
"id": "Project_6",
"featured": false,
"title": "Cocktails App"
},
{
"url": "https://www.ideacasaitalia.it/index.php",
"stack": [
{
"id": 14,
"title": "Prestashop"
}
],
"id": "Project_7",
"featured": false,
"title": "Idea Casa Italia"
}
]
and I have another (simple) array like this one for example
["react","prestashop"]
I would like to filter the first array based on STACK key on the value of the second array, i.e. I would like to be returned all elements that have at least one element of the array (variable).
I have come to this
const filter = value => {
const newProj = relProjects.filter(obj =>
obj.stack.some(st => st.title.toLowerCase().includes(value))
)
setProjRel(newProj)
}
console.log(filter(["react","prestashop"])
however in this way I can only get the elements that contain all the elements of the array. Instead I would like to have returned all the elements that have AT LEAST 1 stack of the ones I passedThanks to who will answer me
Using Array#filter and Array#includes
Filter through the data array. With the predicate being that the stack array has at least one item that is included in the matches array
const data = [{"url":"https://recipes-gatsby-react.netlify.app/","stack":[{"id":1,"title":"GatsbyJs"},{"id":2,"title":"React"},{"id":3,"title":"GraphQl"}],"id":"Project_1","featured":false,"title":"Gatsby recipes app"},{"url":"https://resort-react-mr.netlify.app","stack":[{"id":4,"title":"React"},{"id":5,"title":"Contentful"}],"id":"Project_2","featured":false,"title":"react resort"},{"url":"https://color-generator-react-mr.netlify.app/","stack":[{"id":6,"title":"React"}],"id":"Project_3","featured":false,"title":"color generator"},{"url":"","stack":[{"id":7,"title":"React Native"},{"id":8,"title":"Firebase"}],"id":"Project_4","featured":false,"title":"Book-Worm"},{"url":"","stack":[{"id":9,"title":"React Native"},{"id":10,"title":"Firebase"},{"id":11,"title":"Stripe"},{"id":12,"title":"Google Api"}],"id":"Project_5","featured":false,"title":"Delivery App"},{"url":"https://cocktails-react-app-mr.netlify.app/","stack":[{"id":13,"title":"React"}],"id":"Project_6","featured":false,"title":"Cocktails App"},{"url":"https://www.ideacasaitalia.it/index.php","stack":[{"id":14,"title":"Prestashop"}],"id":"Project_7","featured":false,"title":"Idea Casa Italia"}];
const matches = ["react", "prestashop"];
const filtered = data.filter(({ stack }) => stack.filter(({ title }) => matches.includes(title.toLowerCase())).length > 0);
console.log(filtered);

Angular - get data from Object Array

Good morning, can anyone advise me? I'm pretty clueless. I've already spent a few hours on it and I don't know how to solve this.
The data is fictitious and the original JSON is far more complex.
JSON
{
"main": [
[
{
"type": "dasdasdasd",
"id": 5,
"content": {
"title": "adadadsad",
"items": [
{
"date": "2012-02-02T11:23:00Z",
"id": 12,
"name": "test",
"isEnabled": false,
"isHighlited": false,
"images": {
"lists": {
"small": [
{
"id": 18,
"position": 0,
"titleImage": true,
"url": "",
"thumbnailReady": true
}
],
"original": [
{
"id": 19,
"position": 0,
"titleImage": true,
"url": "",
"thumbnailReady": true
}
],
"large": [
{
"id": 22,
"position": 0,
"titleImage": true,
"url": "",
"thumbnailReady": true
}
],
"medium": [
{
"id": 23,
"position": 0,
"titleImage": true,
"url": "",
"thumbnailReady": true
}
]
}
},
"enum": "LINIE",
"url": "https://test.com"
}
]
}
}
]
],
"second": [
]
}
How can I get from main -> content -> items -> images -> url?
More precisely each images and from that url.
Thank you very much in advance for your help.
It looks like your main array has an array as 1st element. If that is correct, you take the first element of main, and then loop over that.
let jsonObj = {
"main": [
[
{
"type": "dasdasdasd",
"id": 5,
"content": {
"title": "adadadsad",
"items": [
{
"date": "2012-02-02T11:23:00Z",
"id": 12,
"name": "test",
"isEnabled": false,
"isHighlited": false,
"images": {
"lists": {
"small": [
{
"id": 18,
"position": 0,
"titleImage": true,
"url": "",
"thumbnailReady": true
}
],
"original": [
{
"id": 19,
"position": 0,
"titleImage": true,
"url": "",
"thumbnailReady": true
}
],
"large": [
{
"id": 22,
"position": 0,
"titleImage": true,
"url": "",
"thumbnailReady": true
}
],
"medium": [
{
"id": 23,
"position": 0,
"titleImage": true,
"url": "",
"thumbnailReady": true
}
]
}
},
"enum": "LINIE",
"url": "https://test.com"
}
]
}
}
]
],
"second": [
]
}
let smallImg = "", originalImg = "", largeImg = "", mediumImg = "";
jsonObj.main[0].forEach(mainItem => {
mainItem.content.items.forEach(item => {
smallImg = item.images.lists.small[0].url;
originalImg = item.images.lists.original[0].url;
largeImg = item.images.lists.large[0].url;
mediumImg = item.images.lists.medium[0].url;
});
});
console.log(smallImg);
console.log(originalImg);
console.log(largeImg);
console.log(mediumImg);

Resources