Utilizing lodash and JavaScript for data normalization techniques

Converting data from two dimensions to one dimension using lodash

rel      href

link1    url1

link2    url2

link3    url3  url4

link4    url4  url5

Expected output after normalization

rel      href

link1    url1

link2    url2

link3    url3 

link3    url4

link4    url4 

link4    url5

I attempted to achieve this using lodash methods but did not get the desired result.

Link to Code

function update(data) {
     for (var i = 0; i < data.length; i++) {
                if (data[i].href.length > 1) {
                    var a = data[i].href.length;
                    for (var j = 0; j < a; j++) {
                        updatedata.push(data[i]);
                    }
                }
            }
    return updatedata;
}

var updatedata=[{ rel: '', href: []}];

var data = [
    { rel: 'link1', href: ['url1']},
    { rel: 'link2', href: ['url2']},
    { rel: 'link3', href: ['url3' , 'url6']},
    { rel: 'link4', href: ['url4' , 'url5']}
];

console.log(update(data));

Answer №1

Utilize a nested ng-repeat to display the addresses for each user and have the option to show/hide them on click. If you provide your code snippet here or on plnkr.co, I can offer a solution to fix it.

Answer №2

m59 offers a comprehensive explanation in this particular instance

on the method of splitting ng-repeat data into three columns using bootstrap

By utilizing a controller to filter the results and return an array of objects (each representing an address), ng-repeat can generate rows accordingly. Implementing two-way binding on the address input will enable ng-repeat to dynamically create rows as the user inputs data!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

finding the initial element within an object using lodash in javascript

Recently, I came across some data in the form of an array of objects. For instance, let me share a sample dataset with you: "data": [ { "name": "name", "mockupImages": "http://test.com/image1.png,http://test.com/image2.png" }] ========================== ...

Setting up datatables with angular and personalizing the toolbar

Visit this link for the code snippet $scope.overrideOptions = { "bStateSave": true, "iCookieDuration": 2419200, /* 1 month */ "bJQueryUI": false, "bPaginate": true, "bLengthChange": true, "bFilter": true ...

What strategies can I use to refactor this controller in Angular 1.5 to make it more concise and efficient

I am encountering an issue with a component I have that contains a button. Whenever the button is clicked, it triggers one of two backend services depending on where the component is located. To achieve this, I am currently passing a flag to the component ...

Exploring ways to specifically select predefined strings by defining a regex parameter in angular-ui-router

I need to restrict access to a specific state in my angular-ui-router based on the parameter being one of the following strings: "site1" "site2" "site3" Here is my current state configuration: $stateProvider.state("error", { url: '/error/{sub: ...

Is there a way to include two functions within a single ng-click event?

Is it possible to incorporate two functions in a single ng-click event? Below is the code snippet: <button class="cButtonSpeichern" ng-click="saveUser()">Speichern</button> In addition, I would like to include this function as well. alert ...

Monitoring a variable inside a service using AngularJS

I am currently in the process of developing a web application using AngularJS. My application consists of a primary view (Index), a child view (Dashboard), and a grandchild view (Raiding The Rails). http://localhost:4000/#/dashboard/raiding-the-rails/1 ...

Angular js is a powerful framework that allows for the seamless transition of views, except for the home

I am currently using the ng-animate module to implement sliding effects for my app views. Each route has its own unique slide animation. Take a look at my simple code below: HTML: <div ng-view ng-animate class="slide"></div> CSS: /*Animatio ...

Leveraging AngularJS services within an Angular service

I am currently in the process of transitioning my AngularJS application to Angular. To facilitate this transition, I plan to create a hybrid application that combines both frameworks until the conversion is complete. However, I have encountered an issue wi ...

How to handle Component binding change events in AngularJS

I have developed a component in AngularJS that displays data. However, when the customer binding changes, I need to call a service in the component controller, but it is not updating. Below is the code snippet: In my Test1.html file: <tab-customer tit ...

The second click on ng-click does not seem to be functioning properly

Hello, I am new to AngularJS. I have managed to fetch the required data, but I'm facing an issue where clicking doesn't work for the second time. I have tried multiple solutions but none seem to be working. Could someone please help me solve this ...

The ng-click function ceases to trigger after the $location dependency is included in the controller

I need some help with running a ng-click function from my controller. The strange thing is, when I don't use the $location dependency, the ng-click function works fine. But as soon as I add $location to the controller, the ng-click function stops work ...

Angular dynamic calculations for min and max values result in an unusual user interface

I am encountering an issue with a datetime-local input field that has max and min attributes. <input type="datetime-local" ng-model="model.date" min="{{min}}" max="{{max}}"> These attributes are dynamically set based on the date from another input ...

Resetting suggestions for autocompletion in AngularJS

Currently implementing angularJS with autocomplete-alt. The functionality is working smoothly, but I've encountered an issue when clearing the autocomplete input using an AngularJS function - the suggestion list does not update accordingly. How can I ...

Stop phonegap from altering the default orientation on the device

As a newcomer to phonegap, I am seeking a reliable and straightforward way to determine whether a device is a tablet or a phone. My current method involves comparing the width and height sizes of the screen - if the width is greater, then it is a tablet; o ...

Preloading dynamic banner images for image carousel from external API prior to application launch in AngularJS

Is there a way to save banner images from a remote API whenever an angular application initiates, and then keep these banner images stored in the root scope variable for easy access across all controller scopes? ...

What is the best way to extract raw data from a kendo dataSource?

After fetching data for my Kendo grid from the backend and populating it in the alignedProcessesToRiskGridOptions, I noticed that while the data is displayed in the grid, I also need access to the raw data for additional logic. Is there a way to retrieve d ...

Unlocking the Magic: A Step-by-Step Guide to Generating PDFs with

I'm currently engaged in developing an IONIC venture employing JavaScript and Angular. One of the tasks entails creating a comprehensive PDF report featuring text, images, and graphs. Instead of hand-crafting all the elements, I'm keen on adoptin ...

UI-Router - Displaying and concealing elements dynamically in response to state changes

I am currently dealing with a situation where I have implemented dynamic showing and hiding of a button based on state changes. However, there seems to be a noticeable delay when the button is supposed to hide. The button itself is created as a directive ...

The controller is not receiving the output from the factory function

When my controller receives {"$$state": {"status" :0 } } from the factory instead of the expected value, how can I extract the correct value from the factory? Below is my code in controller.js: .controller('omnipayLoginCtrl', ['$scope&apos ...

Switch the watch feature on and off using AngularJS

Is it possible to easily turn a watch on or off, or indicate whether the watch should be active right now? I am aware that I can unregister a watch, but how do I register it again? In my scenario, I have hierarchical select lists where changing the parent ...