Ways to cycle through an array of objects and display a specific property

Question

Ways to cycle through an array of objects and display a specific property

I am working on a Sharepoint display template that involves manipulating an array of objects to achieve a specific output.

Name1
Name2
Name3

My goal is to customize the rendering of multiple people user field in Sharepoint by implementing a tooltip feature.

However, I am facing a challenge with iterating through the array and concatenating the values:

See screenshot below:

Code snippet:

// Customizing Sharepoint List View - Show Tooltip for Long String 
// By: [Your Name]

(function () { 

    var projectTeamContext = {}; 
    projectTeamContext.Templates = {}; 
    projectTeamContext.Templates.Fields = { 
        "Project_x0020_Team": { "View": ProjectTeamTemplate } 
    }; 

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(projectTeamContext); 

})(); 

function ProjectTeamTemplate(ctx) { 

    var projectTeamValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; 

    //newBodyvalue will contain all display names and be automatically rendered as a tooltip

    return "<span title='" + projectTeamValue + "'>" + newBodyValue + "</span>"; 

}

javascript sharepoint jslink

Answer 1

Answer №1

To transform property values from the projectTeamValue array objects into a new array, you can use the map method followed by joining those values together with ", " as the separator:

var newBodyValue = projectTeamValue.map(function(person) {
    return person.value;
}).join(", ");

If your projectTeamValue array was structured like this:

[{ value: "Name1" }, { value: "Name2" }, { value: "Name3" }]

Then the resulting newBodyValue would be:

"Name1, Name2, Name3"

Check out jsFiddle Demo

Note: The Array.prototype.map() function may not be supported in IE 8 and earlier versions but should work fine in other browsers.

Answer 2

To transform property values from the projectTeamValue array objects into a new array, you can use the map method followed by joining those values together with ", " as the separator:

var newBodyValue = projectTeamValue.map(function(person) {
    return person.value;
}).join(", ");

If your projectTeamValue array was structured like this:

[{ value: "Name1" }, { value: "Name2" }, { value: "Name3" }]

Then the resulting newBodyValue would be:

"Name1, Name2, Name3"

Check out jsFiddle Demo

Note: The Array.prototype.map() function may not be supported in IE 8 and earlier versions but should work fine in other browsers.

Ways to cycle through an array of objects and display a specific property

Answer №1

Similar questions

It appears that the fetch operation does not wait as expected

Searching with Sequelize for an indirect relationship: How can it be done?

Where should the npm install command be executed?

Retrieve information from HTML form

Finding the midpoint of the plotted GeoJSON route using Leaflet

Introducing the First Angular Factory

"Is it possible to differentiate between a variable that is BehaviorSubject and one that is not

Creating a bot with discord.js to dynamically edit embed messages

Utilize JavaScript to restrict interactions to touch events in HTML

What are the steps to implement timer control in Ajax using JavaScript?

What is the best way to populate a remote html page in real-time according to user input?

RetrieveByUserIdentifier as a callback method (express)

Does a legitimate array monad transformer exist?

'hpack.js' dependency not found while using webpack-dev-server

Stop users from inputting dates beyond the current date in Angular 4

What is the protocol for managing this exception? (specifically when a throw occurs within a callback function nested inside

Comparison of valueChanges between ReactiveForms in the dom and component级主动形

guide to importing svg file with absolute path

Bootstrap's square-shaped columns

Struggling to incorporate typeWriter.js into the code with no luck