Using Angular 1's ng-repeat along with a filter to separate string values within a single JSON array

Question

Using Angular 1's ng-repeat along with a filter to separate string values within a single JSON array

With the use of ng-repeat, I was able to append the values from a JSON array. However, I encountered an issue with the pictureURLS object containing string values of images. My goal is to separate the string values in pictureURLS and display the images individually.

Javascript

 var results= [
                {
                   "title": Album1,
                   "pictureURLS": "pirul.jpg,picurl2.jpg,picurl3.jpg",
                   "ApprovalStatus": "2",


                },
                {
                   "title": Album2,
                   "pictureURLS": "pirul.jpg,picurl2.jpg,picurl3.jpg",
                   "ApprovalStatus": "2",


                },
                {
                   "title": Album3,
                   "AlbumPictureURLS": null,
"ApprovalStatus": "2",

             ]

HTML

<div ng-repeat="photo in results">
<h4>{{photo.title}}</h4>
<img src="{{photo.pictureURLS}}" />
</div>

javascript angularjs split angularjs-ng-repeat

Answer 1

Answer №1

Give this method a shot:

<img ng-repeat="link in website.imageLinks.split(',')" src="{{link}}" />

Answer 2

Give this method a shot:

<img ng-repeat="link in website.imageLinks.split(',')" src="{{link}}" />

Answer 3

Answer №2

Give this a shot:

 <div ng-repeat="image in collection">
       <h3>{{image.heading}}</h3>
         <div ng-repeat="link in image.urls.split(',')">
            <img ng-src="{{link}}" />
         </div>

    </div>

Answer 4

Give this a shot:

 <div ng-repeat="image in collection">
       <h3>{{image.heading}}</h3>
         <div ng-repeat="link in image.urls.split(',')">
            <img ng-src="{{link}}" />
         </div>

    </div>

Answer 5

Answer №3

Here is the updated JSON structure:

var albums= 
           [{
               name: "Music Album",
               imageUrls: "image1.jpg,image2.jpg,image3.jpg",
               status: "approved"
            },
            {
               name: "Photo Album",
               imageUrls: "photo1.jpg,photo2.jpg,photo3.jpg",
               status: "pending"
            },
            {
               name: "Vacation Album",
               imageUrls: null
            }];

Check out the code on fiddle:  http://jsfiddle.net/Abc123/5678/

Answer 6

Here is the updated JSON structure:

var albums= 
           [{
               name: "Music Album",
               imageUrls: "image1.jpg,image2.jpg,image3.jpg",
               status: "approved"
            },
            {
               name: "Photo Album",
               imageUrls: "photo1.jpg,photo2.jpg,photo3.jpg",
               status: "pending"
            },
            {
               name: "Vacation Album",
               imageUrls: null
            }];

Check out the code on fiddle:  http://jsfiddle.net/Abc123/5678/

Answer 7

Answer №4

Try implementing the following code snippet:

HTML:

<div ng-repeat="image in images">
    <h4>{{image.title}}</h4>
    <img ng-repeat="url in image.imageURLs | filterImages" src="{{url}}" />
</div>

Js:

myApp.filter('filterImages', function() {
    return function(data) {
        return data.split(',');
    };
});

Give it a try and see if it works for you.

Answer 8

Try implementing the following code snippet:

HTML:

<div ng-repeat="image in images">
    <h4>{{image.title}}</h4>
    <img ng-repeat="url in image.imageURLs | filterImages" src="{{url}}" />
</div>

Js:

myApp.filter('filterImages', function() {
    return function(data) {
        return data.split(',');
    };
});

Give it a try and see if it works for you.

Answer 9

Answer №5

If you want to customize your objects, consider storing URLs as an array like this:

for(var j=0; j<items.length; j++){
    var urlArray = items[j].urls.split(',');
    items[j].urlArray = urlArray;
}

After that, you can utilize another ng-repeat in your HTML code:

<div ng-repeat="item in items">
<h3>{{item.name}}</h3>
<div ng-repeat="link in item.urlArray">
    <a href="{{link}}">Link</a>
</div>
</div>

Answer 10

If you want to customize your objects, consider storing URLs as an array like this:

for(var j=0; j<items.length; j++){
    var urlArray = items[j].urls.split(',');
    items[j].urlArray = urlArray;
}

After that, you can utilize another ng-repeat in your HTML code:

<div ng-repeat="item in items">
<h3>{{item.name}}</h3>
<div ng-repeat="link in item.urlArray">
    <a href="{{link}}">Link</a>
</div>
</div>

Using Angular 1's ng-repeat along with a filter to separate string values within a single JSON array

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Combine the values of two fields in real-time on a Model-View-Controller Edit form

Laravel's blade allows you to easily convert an HTML element to an array using the same name

Vue encounters an issue when trying to access a specific field within an array of objects

Using Three.js to construct a tangent plane at a specific point on a sphere

Using Node.js, Express, and Socket.IO to establish real-time communication between two static client pages

Divide text to reduce its width within the confines of a specific height on a div element

Exploring MapQuest API: Unraveling the process of dissecting MapQuest

Retrieve the item that is contained within a separate item within the original

Implementing a Context Menu with a Single Click

Using React to simulate API calls outside of testing environments

Adjust the default value of the ng-model for an input field with a date picker

How can I efficiently create a suffix using this JavaScript code?

The jQuery plugin fails to display properly when used in conjunction with AngularJS

Learn the process of invoking an Angular scope function from within a JavaScript function located within a controller

Error encountered in a pre-existing project due to Vuetify configurations

"Utilizing multiple optional parameters in Expressjs can lead to the request handler being

Is there a similar alternative to {useLocation} provided by 'react-router-dom' that can be used in Next.js?

React 16 is able to efficiently render an array of numbers into table data using the map function

Sharing data between different JavaScript files using Knockout.js

Random sequencing of the commands