Needle in haystack: How to get value from array of objects via computed property? - vuejs2

I am trying to loop through the following JSON:
[ { "target": { "source": "https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0", "selector": { "conformsTo": "http://www.w3.org/TR/media-frags/", "value": "xywh=pixel:378.2608642578125,328.9855041503906,147.82611083984375,210.14492797851562", "type": "FragmentSelector" } }, "photoDocId": "92wNwz2aaqy7CWf3mGo1", "body": [ { "value": "new annotation", "purpose": "commenting", "type": "TextualBody" }, { "purpose": "tagging", "type": "TextualBody", "value": "error" } ], "id": "698RTBGMwWahQ15rXbe6", "type": "Annotation", "#context": "http://www.w3.org/ns/anno.jsonld" }, { "photoDocId": "92wNwz2aaqy7CWf3mGo1", "target": { "source": "https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0", "selector": { "conformsTo": "http://www.w3.org/TR/media-frags/", "value": "xywh=pixel:695.6521606445312,60.869564056396484,139.13043212890625,127.53622817993164", "type": "FragmentSelector" } }, "id": "AUMwWBjizjl8L8vU0XtA", "#context": "http://www.w3.org/ns/anno.jsonld", "type": "Annotation", "body": [ { "value": "clouds!", "type": "TextualBody", "purpose": "commenting" }, { "type": "TextualBody", "value": "clouds", "purpose": "tagging" } ] }, { "type": "Annotation", "body": [ { "type": "TextualBody", "value": "fourth anno", "purpose": "commenting" } ], "target": { "source": "https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0", "selector": { "type": "FragmentSelector", "conformsTo": "http://www.w3.org/TR/media-frags/", "value": "xywh=pixel:631.884033203125,389.8551025390625,172.4637451171875,128.9854736328125" } }, "#context": "http://www.w3.org/ns/anno.jsonld", "id": "CecyGAt47krNIOPgk8Su", "photoDocId": "92wNwz2aaqy7CWf3mGo1" }, { "photoDocId": "92wNwz2aaqy7CWf3mGo1", "body": [ { "type": "TextualBody", "purpose": "commenting", "value": "mountain top . Anyone ever climbed this?" }, { "value": "mountain", "type": "TextualBody", "purpose": "tagging" } ], "#context": "http://www.w3.org/ns/anno.jsonld", "id": "KxIMdih1fTSULjde3Ay4", "type": "Annotation", "target": { "selector": { "type": "FragmentSelector", "value": "xywh=pixel:272.4637756347656,60.869564056396484,252.17391967773438,185.50725173950195", "conformsTo": "http://www.w3.org/TR/media-frags/" }, "source": "https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0" } } ]
I want to return just the following values:
purpose, type, and value. They are located within the body array of clientAnnos
Will this need to be a v-for within a v-for loop?
Update: I tried:
<ul>
<li v-for="{ body, index } in clientAnnos" :key="index">
{{ body }}
</li>
</ul>
But I am wondering if there's possible update issues due to index variable not having a true id.

you can try by mapping through the data then looping through the body since its an array. You can use a method for this for example
methods: {
info() {
let required = this.data.map(d => d.body)
return required
}
}
Then use the blog as a data value in the v for. The method will return an array of the body array properties
<li v-for="{ body, index } in info" :key="index">
{{ body }}
</li>
I hope it helps...

Related

Sample code for WhatsApp interactive template message

Does anyone have a sample code for WhatsApp interactive template message?
I am trying to trigger an API from postman but getting the below error:
{
"meta": {
"api_status": "stable",
"version": "2.37.1"
},
"errors": [
{
"code": 2012,
"title": "Parameter format does not match format in the created template",
"details": "header: Format mismatch, expected Video, received Unknown",
"href": "https://developers.facebook.com/docs/whatsapp/faq#faq_1612022582274564"
}
]
}
Here is what I added in the body:
{
"to": "91NUMBER",
"type": "template",
"template": {
"namespace": "NAMESPACE_ID",
"language": {
"policy": "deterministic",
"code": "en"
},
"name": "TEMPLATE_NAME",
"components": [
{
"type": "header",
"parameters": [
{
"type": "video",
"video": {
"link": "https://res.cloudinary.com/MY_VIDEO_LINK"
}
}
],
"type": "button",
"sub_type": "url",
"index": "0",
"parameters": [
{
"type": "text",
"text": "9rwnB8RbYmPF5t2Mn09x4h"
}
]
}
]
}
}
Any sort of help would be appreciated.
PS: I'm still new to this.
Use the below code maybe it works
{
"to": "91NUMBER",
"type": "template",
"template": {
"namespace": "NAMESPACE_ID",
"language": {
"policy": "deterministic",
"code": "en"
},
"name": "TEMPLATE_NAME",
"components": [
{
"type": "header",
"parameters": [
{
"type": "video",
"video": {
"link": "https://res.cloudinary.com/MY_VIDEO_LINK"
}
}
]
},
{
"type": "button",
"sub_type": "url",
"index": "0",
"parameters": [
{
"type": "text",
"text": "9rwnB8RbYmPF5t2Mn09x4h"
}
]
}
]
}
}

JSON schema definition with multiple sets of enums for array attribute

I want to create a JSON schema for an object in which one of the attributes is restricted to multiple sets of enums.
For example:
{
"data": {
"type": "myObject",
"attributes": {
"states": [
"Washington",
"Oregon",
"California"
]
}
}
}
is a valid JSON object against the schema.
And
{
"data": {
"type": "myObject",
"attributes": {
"states": [
"British Columbia",
"Alberta",
"Ontario"
]
}
}
}
is also a valid JSON object agains the schema
BUT,
{
"data": {
"type": "myObject",
"attributes": {
"states": [
"Washington",
"Oregon",
"Alberta"
]
}
}
}
is NOT a valid JSON object against the schema.
I have tried the following schema definition:
{
"type": "object",
"properties": {
"data": {
"type": "object",
"properties": {
"type": {
"type": "string"
},
"attributes": {
"type": "object",
"properties": {
"states": {
"type": "array",
"items": {
"oneOf": [
{
"enum": ["Washington","Oregon","California"],
"description": "United States"
},
{
"enum": ["British Columbia","Alberta", "Ontario"],
"description": "Canada"
}
]
},
"description": "Filter by states"
}
}
}
}
}
}
}
But with this schema above this is still considered valid:
{
"data": {
"type": "myObject",
"attributes": {
"states": [
"Washington",
"Oregon",
"Alberta"
]
}
}
}
BTW, you can use this for testing whether a JSON object conforms to a schema: https://www.jsonschemavalidator.net/
Thank you!
You need to invert the order of the oneOf and the items keywords, so that the same oneOf clause is used for all items:
...
"states": {
"type": "array",
"oneOf": [
{
"items": {
"enum": ["Washington","Oregon","California"],
"description": "United States"
}
},
{
"items": {
"enum": ["British Columbia","Alberta", "Ontario"],
"description": "Canada"
}
}
]
},
...

Angular6 JSON schema form for Array of Items

I am trying out Angular6 JSON form for my application and stuck in the issue of having array schema
The basic layout looks like
{
"schema": {
"type": "array",
"properties": {
"type": { "type": "string" },
"number": { "type": "string" },
}
},
"layout": [
{
"type": "array",
"items": [ {
"type": "div",
"displayFlex": true,
"flex-direction": "row",
"items": [
{ "key": "type", "flex": "1 1 50px",
"notitle": true, "placeholder": "Type"
},
{ "key": "number", "flex": "4 4 200px",
"notitle": true, "placeholder": "Phone Number"
}
]
} ]
}
],
"data": [
{ "type": "cell", "number": "702-123-4567" },
{ "type": "work", "number": "702-987-6543" }
]
}
But I am not getting the expected outcome, that is Form is prefilled with the data
[
{ "type": "cell", "number": "702-123-4567" },
{ "type": "work", "number": "702-987-6543" }
]
Refer: https://hamidihamza.com/Angular6-json-schema-form/
Based on your code there are some parts you may need to revisit.
The schema type should be either an object or boolean based on the documentation http://json-schema.org/latest/json-schema-core.html
Within the schema section, it seems that you want the type and number to be your properties of a JSON instance. Having this you can only pass one instance of data to the framework to fill in your properties because the framework cannot decide on which value to use for your property of type string.
In case of looking for having an array of type and number, you can have a property like "phone number" with the type array. below is an example from angular6-json-schema flex layout example which I think you had as your reference.
"schema": {
...
"phone_numbers": {
"type": "array",
"items": {
"type": "object",
"properties": {
"type": { "type": "string", "enum": [ "cell", "home", "work" ] },
"number": { "type": "string" }
},
"required": [ "type", "number" ]
}
And pass your data having something as follows:
"data": {
...
"phone_numbers": [
{ "type": "cell", "number": "702-123-4567" },
{ "type": "work", "number": "702-987-6543" }
],
}

TypeError: datastore.getRootCollection is not a function

I assumed a dstore that was created using dmodel was still a dstore and inherited all the dstore functionality. So there's a method listed called getRootCollection but when i try to run this method on the store it fails with an error (no such function)
Here is my code
<script>
require(
[
'dojo/_base/declare',
'dstore/Memory',
'dmodel/extensions/jsonSchema',
'dmodel/validators/StringValidator',
'dmodel/store/Validating',
"dmodel/Model"
],
function (declare, Memory, jsonSchema, StringValidator, Validating, Model) {
var vMem = (declare([Memory, Validating]))({
Model: jsonSchema(
{
"$schema": "http://json-schema.org/draft-04/schema",
"description": "my schema",
"type": "object",
"properties": {
"page": {
"type": "object",
"properties": {
"detailsCanvas": {
"description": "test value",
"type": "object",
"$ref": "#/definitions/details"
}
}
},
"elements": {
"type": "array",
"items": {
"title": "Element",
"type": "object",
"properties": {
"id": {
"type": "string"
},
"positionX": {
"description": "The X coordinate",
"type": "number"
},
"elementSpecificProperties": {
"type": "object",
"oneOf": [
{ "$ref": "#/definitions/label" }
]
}
}
}
}
},
"definitions": {
"details": {
"type": "object",
"properties": {
"height": {
"type": "string"
}
}
},
"label": {
"type": "object",
"properties": {
"value": {
"type": "string"
}
}
}
}
}
)
});
vMem.setData(
{
"page": {
"detailsCanvas": {
"height": "100px"
}
},
"elements": [
{
"id": "1",
"positionX": 20,
"elementSpecificProperties": {
"value": "value_1"
}
},
{
"id": "2",
"positionX": 5,
"elementSpecificProperties": {
"value": "value_2"
}
}
]
});
var blah = vMem.getRootCollection(); //type error - getRootCollection is not a function
});
</script>
getRootCollection() is part of the Tree model of dstore. You only mixin the dstore/Memory. So that is why you get that error. Checkout the documentation of dstore for more information.

Extracting values from a JSON string

I want to retrieve the different tag values in an NSString.
NSString *test =
{
"data": [
{
"id": "100002319144563_125257217561582",
"from": {
"name": "Umair Ahmed",
"id": "100002319144563"
},
"message": "Hello Umair Here",
"actions": [
{
"name": "Comment",
"link": "http://www.facebook.com/100002319144563/posts/125257217561582"
},
{
"name": "Like",
"link": "http://www.facebook.com/100002319144563/posts/125257217561582"
}
],
"privacy": {
"description": "Everyone",
"value": "EVERYONE"
},
"type": "status",
"application": {
"name": "iPhone",
"id": "213257025359930"
},
"created_time": "2011-07-08T11:59:15+0000",
"updated_time": "2011-07-08T11:59:15+0000"
},
{
"id": "100002319144563_125251050895532",
"from": {
"name": "Umair Ahmed",
"id": "100002319144563"
},
"message": "Hello testing testing",
"actions": [
{
"name": "Comment",
"link": "http://www.facebook.com/100002319144563/posts/125251050895532"
},
{
"name": "Like",
"link": "http://www.facebook.com/100002319144563/posts/125251050895532"
}
]
}
]
}
How can I retrieve the name and message tag values into an array or dictionary?
It looks like a JSON string, so just use one of JSON libraries, like TouchJSON or JSONKit and you can easily extract the data from the structures they will provide you.