What is the process of transforming an array into a string URL with AngularJS?

Question

What is the process of transforming an array into a string URL with AngularJS?

As a novice in AngularJS, I am currently working on a simple application.

This is the HTML code snippet that I am dealing with:

<table class="table" ng-repeat="(attr, assets) in customize.product.attributes">
    <tr>
        <th colspan="2">{{attr}}</th>
    </tr>
    <tr ng-repeat="asset in assets">
        <td>
            {{asset}}
        </td>
        <td>
                <file-uploader class="form-control"
                    image-width="{{galleryConfigs.width}}"
                    image-height="{{galleryConfigs.height}}"
                    image-crop-width="{{galleryConfigs.width}}"
                    image-crop-height="{{galleryConfigs.height}}"
                    max-size="5000"
                    allowed-extensions="png,jpeg,jpg"
                    result-model="customize.assets[attr][asset]">
                </file-uploader>
        </td>
    </tr>
</table>

And this is my JavaScript code:

$scope.create = function(published){
        var published = published || false,
            customize = angular.copy($scope.customize);

        if(published)
            customize.published = true;

        dataProvider.Customize.save(customize).$promise
        .then(function(_customize){
            if(!_customize) throw 'Error System';

            toast.create({content:'Succes', className:'success'});
            $state.go('pos.product.customize.show',{customizeId:_customize.id});
        }).catch(function (error){
            $log.error(error);
        });
    };

When I save the data, it ends up being stored like this:

"assets" : {
    "part 1" : {
        "black" : [ 
            "/file/c36a3297-11bb-4028-8cb7-d750b98436ec.png", 
            ...
        ],
        "red" : [ 
            "/file/c36a3297-11bb-4028-8cb7-d750b98145ec.png", 
            ...
        ]
    }
}

However, I wish to save the data in the following structure:

"assets" : {
    "part 1" : {
        "black" :"/file/a11c553f-de74-48e2-93a0-6fc72a54fa9b.png",
        "red"   :"/file/a11c553f-de74-48e2-93a0-6fc72a54ga8c.png" 
    }
}

Is there any way to achieve this?

javascript angularjs underscore.js lodash

Answer 1

Answer №1

When considering that assets may consist of multiple components, here is a solution that retrieves the first item in each color array:

var selection = _.mapObject(assets, function(asset){
    return _.mapObject(asset, _.first);
});

This approach is akin to the response provided yesterday for the inquiry How to convert data array into an object using JavaScript?

var assets = {
    "part 1" : {
        "black" : [ 
            "/file/c36a3297-11bb-4028-8cb7-d750b98436ec.png", 
            "/file/4a6ec1ed-c3b1-48f9-84c0-61dd0f6da08a.png", 
            "/file/c66ac97a-18be-4e79-9ec1-ca67ab37d3f3.png"
        ],
        "red" : [ 
            "/file/c36a3297-11bb-4028-8cb7-d750b98145ec.png", 
            "/file/4a6ec1ed-c3b1-48f9-8cb7-61dd0f6da07a.png", 
            "/file/c66ac97a-18be-4e79-8cb7-ca67ab37d3c3.png"
        ]
    }
}

var selection = _.mapObject(assets, function(asset){
return _.mapObject(asset, _.first);
});

document.getElementById('results').textContent = JSON.stringify(selection);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore.js"></script>

<pre id="results"></pre>

Answer 2

When considering that assets may consist of multiple components, here is a solution that retrieves the first item in each color array:

var selection = _.mapObject(assets, function(asset){
    return _.mapObject(asset, _.first);
});

This approach is akin to the response provided yesterday for the inquiry How to convert data array into an object using JavaScript?

var assets = {
    "part 1" : {
        "black" : [ 
            "/file/c36a3297-11bb-4028-8cb7-d750b98436ec.png", 
            "/file/4a6ec1ed-c3b1-48f9-84c0-61dd0f6da08a.png", 
            "/file/c66ac97a-18be-4e79-9ec1-ca67ab37d3f3.png"
        ],
        "red" : [ 
            "/file/c36a3297-11bb-4028-8cb7-d750b98145ec.png", 
            "/file/4a6ec1ed-c3b1-48f9-8cb7-61dd0f6da07a.png", 
            "/file/c66ac97a-18be-4e79-8cb7-ca67ab37d3c3.png"
        ]
    }
}

var selection = _.mapObject(assets, function(asset){
return _.mapObject(asset, _.first);
});

document.getElementById('results').textContent = JSON.stringify(selection);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore.js"></script>

<pre id="results"></pre>

Answer 3

Answer №2

Check out this handy function for converting an array into an object:

function transformArrayToObject(arr) {

   //Initialize an empty object
   var obj = {};

   //Iterate through the array and assign elements as properties to the object
   arr.forEach(function(element, index){
      obj[String(index)] = element;       
   }) 

   return obj;

}

With this function, ['apple', 'orange', 'grapes'] turns into

{1: 'apple', 2: 'orange', 3: 'grapes'}

If you're looking to create an object with a single property that combines all array elements into a string, here's how it can be done:

function transformArrayToObjWithOneProperty(arr) {

       //Create an empty object
       var obj = {value: ''};

       //Concatenate array elements as a string within the object
       arr.forEach(function(element){
          obj.value = obj.value + element + ',';       
       }) 

       return obj;

}

This function will change ['apple', 'orange', 'grapes'] to {value: 'apple,orange,grapes'}

Answer 4

Check out this handy function for converting an array into an object:

function transformArrayToObject(arr) {

   //Initialize an empty object
   var obj = {};

   //Iterate through the array and assign elements as properties to the object
   arr.forEach(function(element, index){
      obj[String(index)] = element;       
   }) 

   return obj;

}

With this function, ['apple', 'orange', 'grapes'] turns into

{1: 'apple', 2: 'orange', 3: 'grapes'}

If you're looking to create an object with a single property that combines all array elements into a string, here's how it can be done:

function transformArrayToObjWithOneProperty(arr) {

       //Create an empty object
       var obj = {value: ''};

       //Concatenate array elements as a string within the object
       arr.forEach(function(element){
          obj.value = obj.value + element + ',';       
       }) 

       return obj;

}

This function will change ['apple', 'orange', 'grapes'] to {value: 'apple,orange,grapes'}

What is the process of transforming an array into a string URL with AngularJS?

Answer №1

Answer №2

Similar questions

Borderless thumbnails in the stunning blueimp Gallery

The error message "Seed is not defined" is raised when the program attempts to

Obtain the HTML link embedded within the DOM header element resource, without relying on any identifiers such as ID

I am on the lookout for an Angular 2 application that utilizes Gulp to generate a distribution folder with the newest @angular frameworks

Having two components, JQuery's .attr handles attributes efficiently

Subcomponent in React is not rendering as expected

How can we determine the total number of mandatory fields in an AngularJS form?

Combining Multiple Results into One Unique Output using a Lodash Function

GPU-JS is encountering an issue: the kernel is being provided with an excessive number of

a:hover CSS style altering the behavior of buttons with images in a web browser

Storing information in a parse table using NodeJs

Retrieving data from a child node using Jsonpath

When you reach the halfway point of the page, the infinite scroll feature will be activated

How can I customize an SVG using CSS when it's being accessed from another directory on my computer?

Unable to manage the rotation in Three.js GLTFLoader

Manipulating latitude and longitude variables from Javascript Geolocation in an ASP.NET environment

Navigating JSON data to retrieve a specific property in AngularJS using a select form

Pass a JavaScript variable to a PHP script using AJAX when a button is clicked, with a dynamically set href attribute

Encountering a Sails.js malfunction while attempting to modify and save a function

What is the best way to pass $scope variables to a controller?