Develop Reference

How to display nested json array with v-for index loop

I have JSON Array with following structure
items: [
{
ID: 11,
UserID: "test.com",
UserRole: "user",
timeStamp: "2021-03-23T15:54:02.125578",
dialogs: [
{
"Bot": "Why is data missing?",
"test.com": "not available",
"Bot": "please enter ID",
"test.com": "1234"
}
]
}
]
I have to display elements inside dialogs as list. i am using v-for but dialogs is displaying as array with commas. how can i show this with index? Following is v-for loop i am using
<ul v-for="item in items" :key="item">
<li v-for="(dialog, index) in dialogs" :key="index">{{key}}: {{dialogs}}</li>
</ul>

<ul v-for="item in items" :key="item">
<li v-for="(dialog, index) in item.dialogs" :key="index">{{index}}: {{dialog}}</li>
</ul>

There are 2 changes required.
In your dialogs you have duplicate keys, so they need to separated out into two different objects.
In your HTML part you need to loop as items.dialogs
Here is the full code.
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
items: [
{
ID: 11,
UserID: "test.com",
UserRole: "user",
timeStamp: "2021-03-23T15:54:02.125578",
dialogs: [
{
"Bot": "Why is data missing?",
"test.com": "not available",
},
{"Bot": "please enter ID",
"test.com": "1234"
}
]
}
]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<ul v-for="(item, index) in items" :key="item">
<li v-for = "(data, index) in item.dialogs">
{{data}} {{index}}</li>
</ul>
</div>

Displaying Objects in an Array VueJS

So I am using a JSON object that looks something like this:
data: [
{
title: "Post Title One",
categories: {
data: [
{
id: 1,
name: "Category Name 1"
}
]
}
},
{
title: "Post Title Two",
categories: {
data: [
{
id: 2,
name: "Category Name 1"
},
{
id: 3,
name: "Category Name 2"
}
]
}
}
]
and I want to grab all the categories for each post and display them using Vue. So what I have currently is:
<div v-for="post in posts">
<div>{{ post.categories.data }}</div>
</div>
In that {{ post.categories.data }} I am trying to display the category name from the JSON object. When I use what I have above the whole array is displayed in the div. When I try to do something like
{{ post.categories.data.name }}
or
{{ post.categories.data[0].name }}
I don't display the name of the category. I would really like to display the name of every category a post has, but can't seem to get it to display correctly.
EDIT: Also posts is the data property I am using in VueJS and am setting the JSON object to become that property.

You should use map method in conbination with destructuring.
<div v-for="post in posts">
<div>{{ post.categories.data.map(({name}) => name).join(' ') }}</div>
</div>

Looping Objects of Object with handlebars.js

I have a simple node.js app that returns the following json.
{
computers: {
john: {
cpu: "intel",
ram: "8MB",
hd: "1TB"
},
jane: {
cpu: "intel",
ram: "12MB",
hd: "500GB"
},
mary: {
cpu: "intel",
ram: "8MB",
hd: "500GB"
}
}
}
in my index.hbs file I have the following.
{{#each computers}}
{{#each this}}
{{cpu}} {{ram}} {{hd}}
{{/each}}
{{/each}}
I would like the get the following result.
John: intel, 8MB, 1TB
jane: intel, 12MB, 500GB
etc..
Any suggestion is greatly appreciated!

You don't have to create nested each. Simply using paths combined with #key to get current key of iterating object will do.
{{#each computers}}
{{#key}}: {{./cpu}}, {{./ram}}, {{./hd}}
{{/each}}

How can I make a ractive template with this Javascript object?

I want to access all the property of this object.
var country = {
country: "US",
states : [{
state: "california",
capital: "sacramento"
},
{
state: "texas"
capital: "austin"
}]
};
I tried the ff but only renders country value.
{{#each country}}
{{country}}
{{#each states}}
{{states.state}} {{states.capital}}
{{/each}}
{{/each}}

This is the part that's incorrect:
{{#each states}}
{{states.state}} {{states.capital}}
{{/each}}
Since states is an array, states.state doesn't mean anything – just use the property directly:
{{#each states}}
{{state}} {{capital}}
{{/each}}
As an aside, it's often a good idea to structure your data more like this:
var country = {
name: "US",
states : [{
name: "california",
capital: "sacramento"
},
{
name: "texas"
capital: "austin"
}]
};
In other words, the items in states are objects with name properties – the object is the state, it doesn't have a state property. I've often done that sort of thing in the past and come to regret it, because then you find confusing references to state.state in your code!

You are trying to iterate over country as if it were an array, but in your example that is only a plain object. In that case, this http://jsfiddle.net/ns8f8mwa/ will print that object.
If you ment to first loop out every country, then the states, this http://jsfiddle.net/jgmbu7wr/ is an example of that.

Passing an array of objects to a partial - handlebars.js

Im trying to pass an array of objects into a partial as an argument:
{{> partial [{title: "hello", year: "2015"}, {title: "hello2" year: "2015"}] }}
and then on the partial:
<div>
{{#each this}}
<label>{{title}}</label>
<label>{{year}}</label>
{{/each}}
</div>
... but nothing shows up.
Is there a way to pass array data to a partial?
Thanks in advance.

Create a helper that parses the JSON and wrap your partial with this context.
Template:
{{#getJsonContext '[{"title": "hello", "year": "2015"}, {"title": "hello2" "year": "2015"}]'}}
{{> partial this }}
{{/getJsonContext}}
Note that the names are quoted as well as the values in the JSON string.
Helper:
Handlebars.registerHelper('getJsonContext', function(data, options) {
return options.fn(JSON.parse(data));
});
Credit: https://github.com/assemble/assemble/issues/228#issuecomment-20853985

This should work
{{> partial items=this.something }}
in
Handlebars.registerPartial(
'partial',
"<div>{{#each items}}<label>{{title}}</label><label>{{year}}</label>{{/each}}</div>"
);
input:
{
something: [{title: "hello", year: "2015"}, {title: "hello2", year: "2015"}]
}
Also, there is a problem in the JSON object.