I don't get it for some reason when i pass array through props v-for wont work and only difference i can see from directly writing data is that one passed from props don't have spaces in between.
I am using laravel and through blade im passing data to vue, data is array of all photos with informations. But that data won't list through all photos and display div's.
Let me show you my code:
This is what i have in blade template:
<picture-upload
:input_value="'{{ json_encode($profilephotos) }}'"
:bind_user="'{{ $profile->id }}'"
:input_name="'profilephoto'"
:post_url="'{{ route('photouploads') }}'"
:type="'profilephoto'"
></picture-upload>
I don't think that json_encode make difference in this case but i tried it any way.
And this is what i have in my photos.vue file
props: ['input_name', 'post_url', 'bind_user', 'type', 'input_value'],
data() {
return {
files: [],
uploads: this.input_value,
items: [
{"id":110,"user_id":28,"type":"profilephoto","name":"5.jpg","mime":"image/jpeg","extension":"jpg","path":"3f49191095d302fb7e66ce037dd5efa111287e8230964ad8a3170687ca4336a1","size":192445,"created_at":"2019-04-23 16:04:01","updated_at":"2019-04-23 16:04:01"},
{"id":111,"user_id":28,"type":"profilephoto","name":"4.jpg","mime":"image/jpeg","extension":"jpg","path":"0bd693c2cd1ab5ec2c7223fc6a92356ab68c52e8cc0b7d5d5aa5b4a230cf015b","size":193223,"created_at":"2019-04-23 21:58:52","updated_at":"2019-04-23 21:58:52"},
{"id":112,"user_id":28,"type":"profilephoto","name":"5.jpg","mime":"image/jpeg","extension":"jpg","path":"0bd693c2cd1ab5ec2c7223fc6a92356ab68c52e8cc0b7d5d5aa5b4a230cf015b","size":192445,"created_at":"2019-04-23 21:58:52","updated_at":"2019-04-23 21:58:52"},
{"id":113,"user_id":28,"type":"profilephoto","name":"4.jpg","mime":"image/jpeg","extension":"jpg","path":"ffe6f95d10c5249390fcea140fe15a1fb57f5d29626a947e4a999db50f3ea295","size":193223,"created_at":"2019-04-23 22:00:10","updated_at":"2019-04-23 22:00:10"},
{"id":114,"user_id":28,"type":"profilephoto","name":"4.jpg","mime":"image/jpeg","extension":"jpg","path":"75a00a901f1a01a0267d44bebc8574efa9eb7a7edfd395e29dabb289efb353ac","size":193223,"created_at":"2019-04-23 22:05:32","updated_at":"2019-04-23 22:05:32"}
]
}
},
So input_value is what is passed from blade template, and items is what i added manually for testing, items is exactly the same as what i see when i output data in frontend.
Here is what i have in .vue <template> section
{{ items }}
<li v-for="item in items">
{{ item.type }}
</li>
{{ uploads }}
<div v-for="upload in uploads">
{{ upload.type }}
</div>
So items should output complete array and v-for should filter and output foreach item in that array, which should go the same for uploads but problem is uploads not working.
This is what i actually get in frontent
For {{ items }}
[ { "id": 110, "user_id": 28, "type": "profilephoto", "name": "5.jpg", "mime": "image/jpeg", "extension": "jpg", "path": "3f49191095d302fb7e66ce037dd5efa111287e8230964ad8a3170687ca4336a1", "size": 192445, "created_at": "2019-04-23 16:04:01", "updated_at": "2019-04-23 16:04:01" }, { "id": 111, "user_id": 28, "type": "profilephoto", "name": "4.jpg", "mime": "image/jpeg", "extension": "jpg", "path": "0bd693c2cd1ab5ec2c7223fc6a92356ab68c52e8cc0b7d5d5aa5b4a230cf015b", "size": 193223, "created_at": "2019-04-23 21:58:52", "updated_at": "2019-04-23 21:58:52" }, { "id": 112, "user_id": 28, "type": "profilephoto", "name": "5.jpg", "mime": "image/jpeg", "extension": "jpg", "path": "0bd693c2cd1ab5ec2c7223fc6a92356ab68c52e8cc0b7d5d5aa5b4a230cf015b", "size": 192445, "created_at": "2019-04-23 21:58:52", "updated_at": "2019-04-23 21:58:52" }, { "id": 113, "user_id": 28, "type": "profilephoto", "name": "4.jpg", "mime": "image/jpeg", "extension": "jpg", "path": "ffe6f95d10c5249390fcea140fe15a1fb57f5d29626a947e4a999db50f3ea295", "size": 193223, "created_at": "2019-04-23 22:00:10", "updated_at": "2019-04-23 22:00:10" }, { "id": 114, "user_id": 28, "type": "profilephoto", "name": "4.jpg", "mime": "image/jpeg", "extension": "jpg", "path": "75a00a901f1a01a0267d44bebc8574efa9eb7a7edfd395e29dabb289efb353ac", "size": 193223, "created_at": "2019-04-23 22:05:32", "updated_at": "2019-04-23 22:05:32" } ]
And there v-for="item in items" logic works, if i do
<li v-for="item in items">
{{ item.type }}
</li>
I will get list of item.type
The problem happens if i do exactly the same with uploads something is not working.
If i test output of {{ uploads }} i will get exactly same array as with items except there are spaces between things in array.
This is output of {{ uploads }}
[{"id":110,"user_id":28,"type":"profilephoto","name":"5.jpg","mime":"image/jpeg","extension":"jpg","path":"3f49191095d302fb7e66ce037dd5efa111287e8230964ad8a3170687ca4336a1","size":192445,"created_at":"2019-04-23 16:04:01","updated_at":"2019-04-23 16:04:01"},{"id":111,"user_id":28,"type":"profilephoto","name":"4.jpg","mime":"image/jpeg","extension":"jpg","path":"0bd693c2cd1ab5ec2c7223fc6a92356ab68c52e8cc0b7d5d5aa5b4a230cf015b","size":193223,"created_at":"2019-04-23 21:58:52","updated_at":"2019-04-23 21:58:52"},{"id":112,"user_id":28,"type":"profilephoto","name":"5.jpg","mime":"image/jpeg","extension":"jpg","path":"0bd693c2cd1ab5ec2c7223fc6a92356ab68c52e8cc0b7d5d5aa5b4a230cf015b","size":192445,"created_at":"2019-04-23 21:58:52","updated_at":"2019-04-23 21:58:52"},{"id":113,"user_id":28,"type":"profilephoto","name":"4.jpg","mime":"image/jpeg","extension":"jpg","path":"ffe6f95d10c5249390fcea140fe15a1fb57f5d29626a947e4a999db50f3ea295","size":193223,"created_at":"2019-04-23 22:00:10","updated_at":"2019-04-23 22:00:10"},{"id":114,"user_id":28,"type":"profilephoto","name":"4.jpg","mime":"image/jpeg","extension":"jpg","path":"75a00a901f1a01a0267d44bebc8574efa9eb7a7edfd395e29dabb289efb353ac","size":193223,"created_at":"2019-04-23 22:05:32","updated_at":"2019-04-23 22:05:32"},{"id":115,"user_id":28,"type":"profilephoto","name":"4.jpg","mime":"image/jpeg","extension":"jpg","path":"c0db13b85c255a30b8466ca5778cad05d06f20f2cf12a3db46e9b6a7d182fdd8","size":193223,"created_at":"2019-04-23 22:14:37","updated_at":"2019-04-23 22:14:37"},{"id":116,"user_id":28,"type":"profilephoto","name":"4.jpg","mime":"image/jpeg","extension":"jpg","path":"3591cedc64c8f3638d71643291ce2e37d697dbcdfe08c715254d94237b93b1a1","size":193223,"created_at":"2019-04-23 22:21:37","updated_at":"2019-04-23 22:21:37"}]
And if i try to do
<div v-for="upload in uploads">
{{ upload.type }}
</div>
I get whole bunch of empty div's with not upload.type output. Plus i have like 20 images in total, i get like 200 empty div's.
This confuses me alot as why it is happening like this, any suggestions?
You are JSON encoding the variable thus you are passing a string. This is in essence correct, but you also might want to change
:input_value="'{{ json_encode($profilephotos) }}'"
to
:input_value="{{ json_encode($profilephotos) }}"
I've generated some news items from a laravel API output, i display these on a angular 4 cli project. I noticed the items aren't on descending order though and I'm trying to fix this on the client side. Check it out, this is what I've got.
This is my JSON output from the api:
{
"post": [
{
"id": 17,
"creator": null,
"title": "Test artikel 4",
"content": "<p>Dit is een test artikel voor het nieuws.</p>",
"tags": null,
"photo": "website/uploads/",
"sticky": 0,
"created_at": 1506000062,
"updated_at": false,
"category": ""
},
{
"id": 20,
"creator": null,
"title": "Test artikel 3",
"content": "<p>Dit is een test. Geen sticky.</p>",
"tags": null,
"photo": "website/uploads/",
"sticky": 0,
"created_at": 1506345662,
"updated_at": false,
"category": ""
},
{
"id": 23,
"creator": null,
"title": "Hovenier 2",
"content": null,
"tags": null,
"photo": "website/uploads/1505990708_Verboon Hoveniers.jpg",
"sticky": 0,
"created_at": 1506432062,
"updated_at": false,
"category": "Test categorie 1"
}
]
}
As you can see, there is a created_at object in the array based on a unix timestamp. What I'm trying to do is sort these items based on that created_at object using angular 4 typescript.
I've tried the sort() function, but I can't seem to get it to work.
Can anyone tell what is the best way to tackle this problem? I think it must be something really simple, but I can't seem to get it.
Thanks!
edit: I have placed it in a variable, but I get this:
ERROR TypeError: Cannot read property 'sort' of undefined
also, this is the console.log from the variable.
Maybe this code can help you:
const {posts} = yourJSON;
posts.sort((a, b) => a.created_at - b.created_at);
Write the sort function like this.
var sortedPosts = data.post.sort((item1,item2) => item2.created_at - item1.created_at)
You need to do something like this.
yourObjectName.post.sort(function(a, b) {
return a.created_at - b.created_at;
});
Store your data in a variable, then sort the post property of your json object
var items = {your jsons}
items.post.sort((a,b) => a.created_at - b.created_at)
Okay, this might be a stupid question, because I'm missing something, but I just can't seem to figure out what!
this is my object, using {{ definitionList | json }}
{
"State": "Success",
"Data": [
{
"Description": "Default",
"ID": 4,
},
{
"Description": "Hello World",
"ID": 14,
},
{
"Description": "Test Def",
"ID": 11,
},
{
"Description": "test definitie",
"ID": 12,
},
{
"Description": "testffvfvfvffv",
"ID": 8,
},
{
"Description": "Werknemer_kantoor",
"ID": 3,
"Type":
},
{
"Description": "Werknemer_kantoor",
"ID": 6,
}
],
"Error": null
}
okay now I want to print out "Data" uisng {{ definitionList.Data | json }}
and I receive the error
ORIGINAL EXCEPTION: Cannot read property 'Data' of undefined
I don't understand why? What am I missing?
Maybe you're loading definitionList asynchronously and it is not yet defined when your template is executed?
Try the following code instead (note the ?):
{{ definitionList?.Data | json }}
I have a JSON with multiple objects as follows:
{
"taskId": 100,
"name": "I-9 Form",
"desc": "Form I-9",
"dueDate": "0",
"links": [{"link1": "http://www.uscis.gov/sites/default/files/files/form/i-9.pdf"}, {"link2": "http://www.uscis.gov/sites/default/files/files/form/i-9.pdf"}],
"status": "Completed",
"comments": ""
}
I want to display each link in the array in a template. I think im close with:
{{ _.each(model.links, function(link) { }}
<div>Links: {{= link}}</div>
{{ }); }}
but this prints out
Links: [object Object]
Links: [object Object]
in the dom. What do I need to do so it prints out each link?
If the objects in links always have just one key/value then you can do something like this:
{{= _(link).values()[0] }}
to work around not knowing what the keys will be.
Demo: http://jsfiddle.net/ambiguous/66vY4/
You data structure is wrong. If it is an array you should use same key. link instead of link1 and link2. If you would like to use it as link1 and link2, the it should not be an array. Just a plain object. Then above code will work.
data structure:
{
"taskId": 100,
"name": "I-9 Form",
"desc": "Form I-9",
"dueDate": "0",
"links": [{"link": "http://www.uscis.gov/sites/default/files/files/form/i-9.pdf"}, {"link": "http://www.uscis.gov/sites/default/files/files/form/i-9.pdf"}],
"status": "Completed",
"comments": ""
}
template:
{{ _.each(model.links, function(link) { }}
<div>Links: {{= link.link}}</div>
{{ }); }}
I am having problem with my data.
My JSon looks like that:
[
{
"link": {
"created_at": "2013-10-07T13:31:43+09:00",
"id": 8,
"items_count": 4,
"key": "0iqVSnTU-BtJ1ItVKRe2VMWvRMU",
"mode": "standard",
"name": "sdasadads",
"pusher_key": "1jtsrzl3n6i1DKA3tSZJM6LPnfQ",
"readonly_key": "R_dD5oHMsruu0YzYVKEOA8hKKXA-r",
"updated_at": "2013-10-08T14:06:07+09:00",
"user_id": 2
}
},
{
"link": {
"created_at": "2013-10-07T13:32:56+09:00",
"id": 9,
"items_count": 1,
"key": "Mj-6Cc-_qaGlVTPgqKexzeijYNA",
"mode": "standard",
"name": "Untitled2",
"pusher_key": "hGE0D8TSar_H_Gv9MWdpj26gamM",
"readonly_key": "T53SNKPgyf7KvRUMzDQPaM99AAc-r",
"updated_at": "2013-10-07T13:33:14+09:00",
"user_id": 2
}
},
{
"link": {
"created_at": "2013-10-11T11:18:06+09:00",
"id": 10,
"items_count": 0,
"key": "X_ZoKxFPHtsvSU5W11gXx1653FU",
"mode": "standard",
"name": "Usdadasas",
"pusher_key": "0PZ860awofRKB9XIrXba-xY6u14",
"readonly_key": "2rzrRZAaR7UZRK3UbUId8xmFzd4-r",
"updated_at": "2013-10-11T11:18:06+09:00",
"user_id": 2
}
}
}
I am trying to print put all the names of the links like that:
$.post( "http://0.0.0.0:9292/api/links", function( data ) {
document.getElementById("test").innerHTML = data[link][0].name;
});
but it doesn't work.
How can I grub all the names and put it in html?
The objects are inside the array, not the other way around.
link is a literal property name, not a variable containing one as a string
Thus:
data[0]['link']['name']
You'll also need to make sure that the response has an application/json content type.
Grabbing all the names will require you to use a loop and change the 0 each time round it.
First of all change last "}" to "]" (your top structure is array not object )
Then try this
$.post( "http://0.0.0.0:9292/api/links", function( data ) {
document.getElementById("test").innerHTML = data[0].link.name;
});
Array.prototype.map() is a good way to fetch something from data structure. With your test data in data variable, could would look like this:
Example here.
<div class="names"></div>
var names = data.map(function (item) {
return item.link.name
});
document.querySelector(".names").innerHTML = names;