VueJS is copying data from previous JSON node on push() - vue.js

I'm facing a weird issue on VueJS.
The API give me a JSON like this:
{
movies: [
{
name: "Name 2",
cover: "cover_image.jpg",
chars: [
{
name: "Character 1",
picture: "picture.jpg"
},
{
name: "Character 2",
picture: "picture.jpg"
}
]
},
{
name: "Name 1",
cover: "cover_image.jpg",
chars: [
{
name: "Character N",
picture: "picture.jpg"
},
{
name: "Character Z",
picture: "picture.jpg"
}
]
}
]
}
I'm using this JSON to populate a few boxes on screen. Note that each node has a sub-node.
All working so far.
When I push() a new object into the JSON, the new box appears correctly on page but it's copying the sub-node of previous node. So the Movie 3 is displaying its correct main infos (name and cover) but is copying the characters of Movie 2.
When I refresh the page it's all fine.
Testing API through Postman it's fine as well.
Maybe it could be some cache of VueJS?
I'm using components to display each box.
Thank you!

Related

How do I access an asset's URL when linked via reference in Sanity Studio?

I want to upload PDFs in Sanity Studio, then link to those PDFs in the main site content.
I've added a reference to a document which has a 'file' field in it to my simpleBlockContent input in Sanity Studio.
I've created a document schema for the PDF:
export default {
title: "PDF Upload",
name: "pdfDocument",
type: "document",
fields: [
{
name: "title",
type: "string",
title: "Title",
description: "This title will be used as a caption for the download.",
},
{
name: "pdfFile",
type: "file",
title: "PDF File",
options: {
accept: ".pdf",
},
validation: (Rule) => Rule.required(),
description: "Note that the file name will be visible to end users downloading the file.",
},
],
};
And I'm attempting to reference it in my input component's schema:
export default {
title: "Simple Block Content",
name: "simpleBlockContent",
type: "array",
of: [
{
title: "Block",
type: "block",
styles: [],
marks: {
annotations: [
{
name: "pdfLink",
type: "object",
title: "PDF download link",
fields: [
{
name: "pdfReference",
type: "reference",
title: "PDF Document",
to: [{ type: "pdfDocument" }],
},
],
},
],
},
},
],
};
However when I add pdfLink to my serializers.js in the frontend, nothing resembling a link to the file is present in the data passed to it from my _rawContent graphql query that handles all other page content.
How can I access the information needed to build a URL that links to the uploaded asset?
I've yet to do this in a serializer, but it looks as though the asset URL should be accessible in the returned document, according to the docs:
Example of returned asset document:
{
"_id": "image-abc123_0G0Pkg3JLakKCLrF1podAdE9-538x538-jpg",
"_type": "sanity.imageAsset", // type is prefixed by sanity schema
"assetId": "0G0Pkg3JLakKCLrF1podAdE9",
"path": "images/myproject/mydataset/abc123_0G0Pkg3JLakKCLrF1podAdE9-538x538.jpg",
"url": "https://cdn.sanity.io/images/myproject/mydataset/abc123_0G0Pkg3JLakKCLrF1podAdE9-538x538.jpg",
"originalFilename": "bicycle.jpg",
"size": 2097152, // File size, in bytes
"metadata": {
"dimensions": {
"height": 538,
"width": 538,
"aspectRatio": 1.0
},
"location":{ // only present if the original image contained location metadata
"lat": 59.9241370,
"lon": 10.7583846,
"alt": 21.0
}
}
}
I was looking for a way to get instant link in sanity studio when someone upload file in sanity and couldn't find any good solution so I came up with my own
Problem
let people upload files to sanity and get instant link that they can copy and paste in blog, case study etc
Solution
use slug as in option you have acces to doc where you can generate link my code
import { tryGetFile } from '#sanity/asset-utils'; // this function creates production link
const pdfUploader = {
name: 'pdfUploader',
title: 'Upload PDF and Get Link',
type: 'document',
preview: {
select: {
title: 'title',
},
},
fields: [
{
name: 'title',
title: 'Title',
description: 'Name displayed on pdf list',
type: 'string',
validation: (Rule) => [Rule.required()],
},
{
name: 'pdfFile',
title: 'Upload PDF File',
description: 'PDF File you want to upload, once you upload click generate URL',
type: 'file',
validation: (Rule) => [Rule.required()],
},
{
name: 'generatedPDFURL',
title: 'Generate URL Link to this pdf',
description:
'Click GENERATE to get Link to pdf file, if you by mistake change it, click generate again. Then Copy link below and paste it anywhere you want',
type: 'slug',
options: {
// this source takes all data that is currently in this document and pass it as argument
// then tryGetFile() - getting file from sanity with all atributes like url, original name etc
source: ({ pdfFile }) => {
if (!pdfFile) return 'Missing PDF File';
const { asset } = tryGetFile(pdfFile?.asset?._ref, {
// put your own envs
dataset: process.env.SANITY_DATASET,
projectId: process.env.SANITY_PROJECT_ID,
});
return asset?.url;
},
// this slugify prevent from changing "/" to "-" it keeps the original link and prevent from slugifying
slugify: (link) => link,
},
validation: (Rule) => [Rule.required()],
},
],
};
export default pdfUploader;
After this in sanity upload file and then click GENERATE to get link
Hope it helps people who are looking for similar solution, slug is not perfect choice but it's working :)

How do I create an artifact with Multi-Value field type?

I'm trying to programatically create a User Story in Rally with pyral. We have some custom fields set up, e.g Client Name, which is a Drop-Down List (Multi-Value), for regular fields I'm able to provide the value as {key: value pairs} (e.g {"Priority": "High"}). How do I work with Multi-Value fields?
When I pass string I get "Error 421 Client Name cannot be null", when I pass an array, it doesn't work either.
c_ClientName: {
_rallyAPIMajor: "2",
_rallyAPIMinor: "0",
_ref: "https://rally1.rallydev.com/slm/webservice/v2.0/HierarchicalRequirement/331721021908/c_ClientName",
_type: "AllowedAttributeValue",
_tagsNameArray: [
{
Name: "Client one",
_ref: "/allowedattributevalue/1234567"
},
{
Name: "Client two",
_ref: "/allowedattributevalue/1234568"
},
{
Name: "Client three",
_ref: "/allowedattributevalue/1234569"
}
],
Count: 3
}
This is what a typical read of existing User stories look like.

Using a proxy in a store in Sencha Touch 2

My goal with this project is to load Json that's outputted by a script on a web server so that I can display data in a List in Sencha Touch 2.
I've looked at countless examples including answers from other people's questions on this website and I still can't seem to figure out what the problem is with my code. I'm sure it's something very small or perhaps some rule that I'm unaware of, but I hope someone can point me in the right direction.
Here's my Model:
Ext.define('Sencha.model.Location', {
extend: 'Ext.data.Model',
config: {
fields: ['name','location','open','details']
}
});
Here's my Store:
Ext.define('Sencha.store.Locations',{
extend: 'Ext.data.Store',
requires:[
'Sencha.model.Location',
],
config: {
model: 'Sencha.model.Location',
storeId: 'Locations',
proxy: {
type: 'ajax',
url : 'http://url/to/locations.php?filetype=.json',
reader: {
type: 'json',
},
autoLoad: 'true'
}
}
});
Here's the view where I want it to show up:
Ext.define('Sencha.view.LocationList',{
extend: 'Ext.List',
alias: 'widget.LocationList',
xtype: 'locationlist',
config: {
title: 'What\'s Open #CU',
disableSelection: true,
itemTpl: '<img src="http://localhost/{open}.png" style="width:16px;height:16px;margin-right:8px;" />{name}<span style="font-size:9pt;margin-left:8px;color:#888;">{location}</span>',
store: 'Locations',
onItemDisclosure: true
}
});
Here's the JSON that's outputted(maybe it's a formatting problem that causes it to fail silently?)
{
"businesses":
{
"name" : "Baker's"
"location" : "4th Floor Uni Centre"
"open" : "open"
"details" : "This is some information."
}
}
You JSON is not valid. You forgot the commas :
{
"businesses":
{
"name" : "Baker's",
"location" : "4th Foor Uni Centre",
"open" : "open",
"details" : "This is some information."
}
}
Also, if you intend to send more than one business, you might want to change the JSON format to something like this :
{
"businesses":[
{
"name" : "Baker's",
"location" : "4th Foor Uni Centre",
"open" : "open",
"details" : "This is some information."
},
{
"name" : "Baker's",
"location" : "4th Foor Uni Centre",
"open" : "open",
"details" : "This is some information."
}
...
]
}
and then add the rootProperty: 'businesses' to you're proxy's reader like nuthan said.
Hope this helps
Add rootProperty:'businesses' in the reader: {
type: 'json',
rootProperty:'businesses'
} of your Store.
Is
http://url/to/locations.php
the same Location as your sencha touch app?
If not, than JsonP Proxy is needed. JsonP wraps Json data into function like context to make useable.

dojo 1.6 DataGrid cannot display lists?

In dojo 1.7.2, if I create a data store containing array values, dojox.grid.DataGrid displays them with no problem, separating each item with a coma.
However, in dojo 1.6, it takes only the first element of my array. I have a project where I have to use version 1.6. Is there any workaround for this in that version ?
To illustrate the problem, here are 2 examples :
On dojo 1.6 : http://jsfiddle.net/psoares/HbFNY/
On dojo 1.7 : http://jsfiddle.net/psoares/QLm65/
Thanks !
Apparently the problem comes from ItemFileReadStore rather than from the grid.
I modified my code for 1.6 to use ObjectStore and MemoryStore instead, and it worked.
See http://jsfiddle.net/psoares/HbFNY/16/
this is a flaw and yet it is not.. The construct of your JSON is not quite right as any value is not allowed as array unless it is one of the childAttrs. Due to nature of [1,2,3].toString() that is why your attempts on setting values as arrays are considered valid.
The get/set in an ItemFileReadStore works with its items as such:
store._arrayOfAllItems = {
value1 : { values : [ 'realvalue' ] },
value2 : { values : [ 'realvalue' ] }
};
the getter then says
store.get = function(itemById, val) { return itemById[val][0]; }
// why only the first arrayslot is pulled from store---/^
In your JSON construct, what prohibits you from settings the values as such following?
var data = {
id: 'id',
label: 'id',
items: [
{
id: "value1",
values: "a,b,c" // permit-able string value
},
{
id: "value2",
values: "foo"}
]
};
If you want multiple values by same key of one ID then you must deliver the data as children and handle them as such, like;
data: {
id: 'id',
label: 'id',
childrenAttrs: [ 'items', 'children'], // << default behavior
items: [ {
id: "value1",
children: [
{ id: "value1_1", values: 'a' },
{ id: "value1_2", values: 'b' },
{ id: "value1_3", values: 'c' }
]
}, {
id: "value2",
values: "foo"
} ]
}
However, only the dojox.grid.TreeGrid will allow using multi-lvl datastores

Nested List not loading in sencha

I am trying to load a Nested list onto my Sencha app. The problem is I am not familiar with it and i am not sure if the json file i am using is correct.
[
{
"text":[
{
"text":"1.1.1",
"leaf":true
}],
"text":[
{
"text":"1.1.1",
"leaf":true
}
]
}
]
This is my store code
//Defining the store for the Nested List
Ext.define('InfoImage.store.nestedListStore', {
extend: 'Ext.data.TreeStore',
requires: 'InfoImage.model.nestedListModel',
id:'nestedListStore',
config:{
//Calling the required model for the Work Item List
model : 'InfoImage.model.nestedListModel',
//Defining the proxy for the Work Item List to pull the data for the List
proxy : {
type : 'ajax',
url : 'app/model/data/list.json',
reader: {
type: 'json',
root: 'items'
}
},
autoLoad: true
}
});
and my main code is
Ext.define("InfoImage.view.nestedList", {
extend:'Ext.NestedList',
xtype:'nestedList',
id:'nestedList',
config:{
fullscreen:'true',
title:'Nested List',
xtype:'nestedList',
//displayField : 'text',
html:'Nested List on its way!!!',
store:'nestedListStore'
//itemTpl:'{text}'
}
});
The output thats displayed is [object object]. I dont know what is missing. ANy help is appreciated.
Firstly, your Json is a VALID json. Always check for valid json by pasting the json on jsonlint.com
Secondly, I see that you have commented out the
displayField:'text'
property. If you don't provide the displayField to the nestedlist, it won't come to know, which items from the data store to show in the list.
Probably, that's why you are getting the [object Object] as your o/p in the list.
Uncomment the above line and check.
It seems that your JSON cannot work with Ext.NestedList because text is a field of your Model and it should not be declared as rootProperty in your JSON file.
Firstly, assume that you have this model definition:
Ext.define('ListItem', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
According to your data, your JSON file should look like this:
items: [
{
text: '1.1',
items: [
{ text: '1.1.1', leaf: true },
{ text: '1.1.2', leaf: true }
]
}
]
You have to add this config to your Store as well defaultRootProperty: 'items'