Is there a way to retrieve a specific item from an array using a different method than just its position with jsRender?

Question

Is there a way to retrieve a specific item from an array using a different method than just its position with jsRender?

I am currently working on rendering JSON data using jsRender. Take a look at the sample JSON data below:

"PageContentList": [
    {
        "ContentId": 51, 
        "Title": "60 seconds with Rick", 
        "ContentMediaTypeList": [
            {
                "MimeType": "image/png", 
                "MediaTypeName": "Image", 
                "Path": "http://local.admin.solutiaconsulting.com/uploads/4a906d8e-983a-4b54-a627-0e8d48145620.png"
            }, 
            {
                "MimeType": "video/webm", 
                "MediaTypeName": "Video", 
                "Path": "http://local.admin.solutiaconsulting.com/uploads/3a6c56c3-0ef9-4f57-9c84-9caa48a09044.webm"
            }
        ]
    }
]

My goal is to extract different images based on MediaTypeName rather than their position in the list. I am aware of the following methods:

and this:

However, the second method feels cumbersome and inefficient. Is there a more efficient way to achieve what I'm trying to do? Thank you for any guidance you can provide.

javascript json templates jsrender

Answer 1

Answer №1

Hey Charlie, appreciate your response. I made some adjustments to my JSON format:

"PageContentList": [
    {
        "ContentId": 44, 
        "Title": "Company Name", 
        "Gallery": {
            "Images": [
                {
                    "Path": "http://local.admin.solutiaconsulting.com/uploads/9b577ef7-ea8a-42a1-b967-89debbc634c0.jpg", 
                    "MimeType": "image/jpeg", 
                    "ImageWidth": 0, 
                    "ImageHeight": 0, 
                    "AltText": null
                }
            ], 
            "Videos": [ ]
        }
    },
   .... 
]

And for the template:

{{for PageContentList}}
<video id="whatIsSolutiaVideo" class="video-js vjs-default-skin" controls width="{{:Gallery.Images[0].ImageWidth}}" height="{{:Gallery.Images[0].ImageHeight}}" poster={{:Gallery.Images[0].Path}}" preload="auto">
{{for Gallery.Videos}}
<source type="{{:MimeType}}" src="{{:Path}}">
 {{/for}}
 </video>
 {{/for}}

I've structured it so that each JSON data has a specific section for Images, Videos, and more. This makes it easier to input data correctly. Your insights really helped me think this through. Thanks!

Answer 2

Hey Charlie, appreciate your response. I made some adjustments to my JSON format:

"PageContentList": [
    {
        "ContentId": 44, 
        "Title": "Company Name", 
        "Gallery": {
            "Images": [
                {
                    "Path": "http://local.admin.solutiaconsulting.com/uploads/9b577ef7-ea8a-42a1-b967-89debbc634c0.jpg", 
                    "MimeType": "image/jpeg", 
                    "ImageWidth": 0, 
                    "ImageHeight": 0, 
                    "AltText": null
                }
            ], 
            "Videos": [ ]
        }
    },
   .... 
]

And for the template:

{{for PageContentList}}
<video id="whatIsSolutiaVideo" class="video-js vjs-default-skin" controls width="{{:Gallery.Images[0].ImageWidth}}" height="{{:Gallery.Images[0].ImageHeight}}" poster={{:Gallery.Images[0].Path}}" preload="auto">
{{for Gallery.Videos}}
<source type="{{:MimeType}}" src="{{:Path}}">
 {{/for}}
 </video>
 {{/for}}

I've structured it so that each JSON data has a specific section for Images, Videos, and more. This makes it easier to input data correctly. Your insights really helped me think this through. Thanks!

Answer 3

Answer №2

It can be challenging to incorporate certain logic in the view, as it is generally not recommended. It is best practice to place your filters in either the model or a controller before rendering.

There is one exception to this rule, which is when you need to limit the number of items displayed. In some cases, limiting items may be appropriate for the view depending on the context.

For example:

Avoid including limits in the view:
- List of questions on a website with pagination options (limit, offset, sorting)

Include limits in the view:
- Displaying attached images for each question where mobile view only shows one image per question, while the desktop view can accommodate up to three images.

Deciding how to structure your application and where to place your logic can vary and is often subject to debates among developers. The approach of separating logic from the view is what I have learned from experience and colleagues, but there are certainly other perspectives out there.

One way to filter data using underscore.js is demonstrated below.

 var videoContent = _.filter(contentMediaTypeList, function(mediaType) {
      return mediaType.mediaTypeName == "video"; 
 });

Check out this JSFiddle link for a working example: http://jsfiddle.net/n98yW/

You can also create a reusable closure for filtering purposes.

var mediaTypeFilter = function(mediaTypeName) {
     return function(contentMediaTypeList) {
           return _.filter(contentMediaTypeList, function(currMediaType) {
                return currMediaType.MediaTypeName == mediaTypeName;
           });
     }
};

Utilize the closure like this:

var videoFilter = mediaTypeFilter("video");    
var videoContent = videoFilter(contentMediaTypeList);

Explore another JSFiddle showcasing the closure solution: http://jsfiddle.net/GA55g/2/

Answer 4

It can be challenging to incorporate certain logic in the view, as it is generally not recommended. It is best practice to place your filters in either the model or a controller before rendering.

There is one exception to this rule, which is when you need to limit the number of items displayed. In some cases, limiting items may be appropriate for the view depending on the context.

For example:

Avoid including limits in the view:
- List of questions on a website with pagination options (limit, offset, sorting)

Include limits in the view:
- Displaying attached images for each question where mobile view only shows one image per question, while the desktop view can accommodate up to three images.

Deciding how to structure your application and where to place your logic can vary and is often subject to debates among developers. The approach of separating logic from the view is what I have learned from experience and colleagues, but there are certainly other perspectives out there.

One way to filter data using underscore.js is demonstrated below.

 var videoContent = _.filter(contentMediaTypeList, function(mediaType) {
      return mediaType.mediaTypeName == "video"; 
 });

Check out this JSFiddle link for a working example: http://jsfiddle.net/n98yW/

You can also create a reusable closure for filtering purposes.

var mediaTypeFilter = function(mediaTypeName) {
     return function(contentMediaTypeList) {
           return _.filter(contentMediaTypeList, function(currMediaType) {
                return currMediaType.MediaTypeName == mediaTypeName;
           });
     }
};

Utilize the closure like this:

var videoFilter = mediaTypeFilter("video");    
var videoContent = videoFilter(contentMediaTypeList);

Explore another JSFiddle showcasing the closure solution: http://jsfiddle.net/GA55g/2/

Is there a way to retrieve a specific item from an array using a different method than just its position with jsRender?

Answer №1

Answer №2

Similar questions

After successfully authenticating, you may introduce a new React component

Developing a react native library (create-react-native-library) incorporating a distinct react-native version within its designated Example directory

Remove checked rows in a table with a single click

Create dynamic combo boxes using jQuery

When attempting to submit information to a database table, I encounter an error in the browser console: "Uncaught (in promise) Error: Request failed with status code 404."

Error message from BitBucket pipeline indicates that the npm command was not found

Choosing a lone column in amcharts 4

Unexpected issue with Ionic 4 subarray returning as undefined even though the index is accurate

Updating to the latest version of Next.js will result in a modification of the API path

The perpetual loop in React context triggered by a setState function within a useEffect block

Having trouble passing data between view controllers

Information does not display in the data tables

Tips on using the $.grep() method in jQuery to filter dynamic inputs

Storing an array in a file using Swift

Angular library modules for node packages

What is the best way to incorporate the PUT method...?

Is there an issue with the jQuery ajax function when it comes to sending the RegistrationId to our server?

Ways to ensure a function is only triggered once using onmouseover

Storing the selected value from a dropdown box in PHP

Discovering the process to create an onclick function with node.js code