link3151 link3152 link3153 link3154 link3155 link3156 link3157 link3158 link3159 link3160 link3161 link3162 link3163 link3164 link3165 link3166 link3167 link3168 link3169 link3170 link3171 link3172 link3173 link3174 link3175 link3176 link3177 link3178 link3179 link3180 link3181 link3182 link3183 link3184 link3185 link3186 link3187 link3188 link3189 link3190 link3191 link3192 link3193 link3194 link3195 link3196 link3197 link3198 link3199 link3200 link3201 link3202 link3203 link3204 link3205 link3206 link3207 link3208 link3209 link3210 link3211 link3212 link3213 link3214 link3215 link3216 link3217 link3218 link3219 link3220 link3221 link3222 link3223 link3224 link3225 link3226 link3227 link3228 link3229 link3230 link3231 link3232 link3233 link3234 link3235 link3236 link3237 link3238 link3239 link3240 link3241 link3242 link3243 link3244 link3245 link3246 link3247 link3248 link3249 link3250 link3251 link3252 link3253 link3254 link3255 link3256 link3257 link3258 link3259 link3260 link3261 link3262 link3263 link3264 link3265 link3266 link3267 link3268 link3269 link3270 link3271 link3272 link3273 link3274 link3275 link3276 link3277 link3278 link3279 link3280 link3281 link3282 link3283 link3284

[Vue.js] Displaying the first object in vue js

there is an array from php which is converted into object. the object has an object inside it. how can i display only the first object.

tried this.

<li v-for=”val in CareerLevel.CLLevel”>
<a href=”#”>{val}</a>
<ul>
<li>
<a href=”#”>Grand Child</a>
</li>
</ul>
</li>

{
“CLLevel”:
{
“13”:
{
“Role”:[“Community Operations New Associate”]
},
“12”:
{
“Role”:[“Junior SME”,”Cross-Skilled Associate”,”Incubation\/Special Project Associate”,”Quality Auditor”,”Trainer”,”System Developer Associate”,”Junior SME”,”System Developer”]
},
“11”:
{
“Role”:[“Jr. Team Lead\/ Senior SME”,”Market-Vetical SME”,”Senior Quality Auditor\/Analyst”,”Senior Trainer”,”Policy Analyst”,”System Developer Analyst”,”R&C Analyst”,”policy analyst”]
},
“10”:
{
“Role”:[“Team Lead”,”Quality Jr Team Lead”,”Training Jr Team Lead”,”Policy Senior Analyst”,” System Developer Team Lead”]},”9”:{“Role”:[“Shift Lead”,” Senior Team Lead”,”Quality Lead”,”Policy Lead”,”Change Management Lead”,”R&C Specialist”,”Training Lead”]
},
“8”:
{
“Role”:[“Community Operations Market Lead”,”Local\/Site QTP Lead”,”Mobilization Lead”,”Service Management Lead”,”Global System Developer Lead”,” Business Excellence Associate Manager”]
}
}
}

Solution :

In a totally static way, you could do this.

<li>{firstElement}</li>

data() {
return {
CareerLevel: { /* the data here */ }
}
},

computed: {
firstElement() {
return Object.values(this.CareerLevel.CLLevel)[0].Role[0]
}
}

To do it “correctly” Id do a recursive method.

Solution 2:

I would suggest you to use computed property for this as you are iterating on an object and wants functionality similar as such as array.

new Vue({
el: ‘#app’,
data : {
CareerLevel : {
“CLLevel”:
{
“13”:
{
“Role”:[“Community Operations New Associate”]
},
“12”:
{
“Role”:[“Junior SME”,”Cross-Skilled Associate”,”Incubation\/Special Project Associate”,”Quality Auditor”,”Trainer”,”System Developer Associate”,”Junior SME”,”System Developer”]
},
“11”:
{
“Role”:[“Jr. Team Lead\/ Senior SME”,”Market-Vetical SME”,”Senior Quality Auditor\/Analyst”,”Senior Trainer”,”Policy Analyst”,”System Developer Analyst”,”R&C Analyst”,”policy analyst”]
},
“10”:
{
“Role”:[“Team Lead”,”Quality Jr Team Lead”,”Training Jr Team Lead”,”Policy Senior Analyst”,” System Developer Team Lead”]},”9”:{“Role”:[“Shift Lead”,” Senior Team Lead”,”Quality Lead”,”Policy Lead”,”Change Management Lead”,”R&C Specialist”,”Training Lead”]
},
“8”:
{
“Role”:[“Community Operations Market Lead”,”Local\/Site QTP Lead”,”Mobilization Lead”,”Service Management Lead”,”Global System Developer Lead”,” Business Excellence Associate Manager”]
}
}
}
},

computed : {
firstObj : function(){
for (var key in this.CareerLevel.CLLevel) {
if (this.CareerLevel.CLLevel.hasOwnProperty(key)) {
return this.CareerLevel.CLLevel[key]
}
break;
}
}
}
});
<div id=”app”>
<a href=”#”>{firstObj}</a>
<ul>
<li>
<a href=”#”>Grand Child</a>
</li>
</ul>
</div>

PS : This will render CLLevel with key 8 as you are using object and they are unordered in nature, no matter how you insert them in object they come out unordered, if you want CLLevel with key 13 to appear than you will have no other choice than to use array as arrays maintain order.