"Optimizing navigation with dynamic link routing in AngularJS

I am working on a list of apartments displayed using ng-repeat. I need each apartment to be a clickable link that directs the user to view more details about that specific apartment. However, I am facing an issue where the links are not being repeated dynamically for each apartment. Can anyone suggest a solution?

app.controller("apartmentSizeController", ['$scope', '$stateParams', function($scope, $stateParams){



$scope.id = $stateParams.id;
    let apartments = [];

    $scope.apartments = apartments;


    $scope.apartmentTemplate = [{
        "id": 1,
        "apartmentName": "Park Dearborn",
        "apartmentDescription": "",
        "amenityLink": "amenities({id:1})",
        "neighborhoodLink": "neighborhood({id:1})",
        "apartmentImage": "",
        "apartments" : [{
            "name" : "Studio",
            "amenityDescription" : "make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,",
            "apartmentTypeImage" : "",
            "typesOfApartments" : ["Pullman", "Kitchenette", "Galley", "Southbookcase", "Northbookcase"],
            "apartmentLink" : ["link", "link", "link", "etc. a link for each"]
        },
        {
            "name" : "One Bedroom",
            "amenityDescription" : "make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,",
            "apartmentTypeImage" : "",
            "typesOfApartments" : ["Northeast", "North", "Northwest", "Southwest", "Northbookcase"],
            "apartmentLink" : ["link", "link"]
        }]
    },
    {
        "id": 2,
        "apartmentName": "Dearborn North",
        "apartmentDescription": "Amazingly beautiful apartments please put more stuff here",
        "amenityLink": "amenities({id:2})",
        "neighborhoodLink": "neighborhood({id:2})",
        "apartmentImage": "",
        "apartments" : [{
            "name" : "Convertible",
            "amenityDescription" : "make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,",
            "apartmentTypeImage" : "",
            "typesOfApartments" : ["Style1", "Style2"],
            "apartmentLink" : ["link"]
        },
        {
            "name" : "Studio",
            "amenityDescription" : "make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,",
            "apartmentTypeImage" : "",
            "typesOfApartments" : ["Style1", "Style2"],
            "apartmentLink" : ["link", "link", "link"]
        },
        {
            "name" : "One Bedroom",
            "amenityDescription" : "make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,",
            "apartmentTypeImage" : "",
            "typesOfApartments" : ["Style1", "Style2"],
            "apartmentLink" : ["link"]
        }]
    }];

        var x = $scope.apartmentTemplate.indexOf($scope.apartmentTemplate[$scope.id]);


        for (let i = 0; i < $scope.apartmentTemplate.length; i++) {

        if ($scope.apartmentTemplate[i].id == $scope.id) {
            console.log("found index " + $scope.apartmentTemplate[i].id);
            $scope.buildingImage = $scope.apartmentTemplate[i].apartmentImage;
            $scope.apartmentDescription = $scope.apartmentTemplate[i].apartmentDescription;
            $scope.amenityLink = $scope.apartmentTemplate[i].amenityLink;
            $scope.neighborhoodLink = $scope.apartmentTemplate[i].neighborhoodLink;
            $scope.apartmentLink = $scope.apartmentTemplate[i].apartments[i].apartmentLink[i];
            $scope.apartments = $scope.apartmentTemplate[i].apartments;
        } else {
            console.log("not found");
        }
    };

}]);

This is my view 

        <div ng-controller="apartmentSizeController" class="apartment-details-container" style="border: 2px solid rgb(101,0,0);">
                <div class="apartment-details" style="background-color: white;">
                    <div class="amenity-title" style="color: rgb(101,0,0); background-color: white; width: 350px; margin: 1em;">
                        <p><span style="font-size: 28px; color: rgb(101,0,0); font-family: crimson text, sans-serif;letter-spacing: 1.2;">APARTMENTS</span></p>
                        <p style="font-family: sans-serif;">{{apartmentDescription}}<!---->
                        </p>
                        <h1>ID is {{id}}</h1>
                            <a ui-sref={{amenityLink}}><h3 style="color: rgb(101,0,0);; font-family: sans-serif;">view amenities</h3></a>
                            <a ui-sref={{neighborhoodLink}}><h3 style="color: rgb(101,0,0);; font-family: sans-serif;">view neighborhood</h3></a>
                            <p ng-click="goBack()"><a href="#" style="color: rgb(101,0,0);font-family: Crimson-text, sans-serif;">back</a></p>
                    </div>
                    <div><img style="width: 100%;" height="416"; src={{buildingImage}} /></div>
                </div>
        </div><!-- end of apartment details container-->

                    <div class="property-grid">


        <div ng-controller="apartmentSizeController" class="property-grid-item" ng-repeat="apartment in apartments">
                    <div class="frame-two"><img src={{apartment.apartmentTypeImage}} alt="park dearborn"></div>

                        <div class="apartment-info"><p><span class="font-title">{{apartment.name}}
                            <aside>

                                <a href="??">
                                    <h4 ng-repeat="type in apartment.typesOfApartments">  {{type}}</h4>
                                </a>   
                                                </aside>
                                            </div><!--end apartment info-->
                                    </div><!--property-grid-item-->
                            </div>
                    </div>

</div><!--end main -content-->

What would be the best way to ensure that each apartment's link appears beside it? For example: "typesOfApartments" : ["Pullman", "Kitchenette", "Galley", "et."], "apartmentLink" : ["link", "link", "link", "etc. a link for each"]

javascriptangularjsangular-ui-router

Answer №1

There doesn't seem to be a problem here, you just need to extract the data to make things easier;

let results = [];

let details = $scope.apartmentTemplate.find(x => x.id === $scope.id);

for ( let j = 0 ; details !== undefined && j < details.apartments.length ; j++){

 //format the links
 //assuming the link + type has the same number of items

   let types=[]; 

   for ( let i = 0 ; i < details.apartments[j].typesOfApartments.length ; i++ ){
    types.push({
     name: details.apartments[j].typesOfApartments[i],
     link: details.apartments[j].link[i]
    });   
   }

   results.push({ 
    name: details.apartments[j].name,
    image: details.apartments[j].apartmentTypeImage,
    types: types
   });
}

The next step is to render it using ng-repeat

<div ng-controller="apartmentSizeController" class="property-grid-item" 
     ng-repeat="apartment in results">
    <div class="frame-two">
     <img src={{apartment.image}} alt="park dearborn"></div>
     <div class="apartment-info">
       <p>
         <span class="font-title">"{{apartment.name}}</span>
         <aside>
           <a href="{{type.link}}" ng-repeat="type in apartment.types" >
             <h4>{{type.name}}</h4>
           </a>   
         </aside>
     </div>
  </div>
</div>

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

Change a camelCase string to ALL_CAPS while adding underscores in JavaScript

Currently, I'm dealing with a situation where I have a list of variables stored in a file that I need to convert into all capital letters and separate them with underscores using JavaScript. The variable pattern looks something like this: AwsKey Aw ...

javascriptfunction

Embed the variable directly within the JSON structure

My goal is to dynamically create a JavaScript object using object initializer notation, but with keys taken from a config object. Instead of the traditional method: var obj = { 'key' : 'some value' }; I envision something like this: ...

javascriptjson

leveraging parcel for importing typescript dependencies

I am currently using parcel to process typescript for a web extension. I have installed JQuery and its type definitions via npm. In my typescript file, I have the following at the top: import $ from "jquery"; import "bootstrap"; However, when running run ...

javascriptjquerytypescriptbootstrap-4parceljs

Interpolating UV is not allowed: 'flat': Using a reserved word in an illegal manner

As a beginner, I recently learned that UV coordinates are not interpolated in WebGL, allowing for exact pixel values to be retrieved. However, when attempting to use the 'flat' keyword, I encountered an error. By adding 'flat' before t ...

javascriptthree.jsglslwebglwebgl2

Using the onClick event to dynamically alter the class name within a mapped array by leveraging Hooks

I'm currently working on developing an answer sheet, commonly known as a "Bubble sheet", where the user has the ability to select either "A,B,C, or D" and see the bubble transition from light mode to dark mode just like when marking with a physical pe ...

javascriptarraysreactjsnext.jstailwind-css

Encountering an issue in Laravel when trying to retrieve data using relationships and the paginate() method

When I try to fetch data using paginate(10), Vue.js does not work. However, if I use paginate(5), it works fine. The code in the Controller with relationships in the model files is working fine and returns a 200 OK response. $results = Posts::with([' ...

javascriptphplaravelvue.js

Guide on accessing text content from a sibling div element using jQuery

There are several divs arranged on a page as shown below. If a user clicks a link within the UL .list-links, I want to capture the content inside: <span class="asa_portlet_title">Title here</span> and store it in a variable. I have attempted ...

javascriptjquery

Utilizing Next.js to dynamically update data within a div element upon

I have a table set up to display data and I want to transfer the row data into a div when the user clicks on a table row: Currently, I can successfully get the data onclick: const handleClick = (rowData) => { console.log(rowData); } However, I am ...

javascriptreactjsnext.js

Using regular expressions, you can locate and replace the second-to-last instance of a dot character in an email address

I'm looking to replace the second last occurrence of a character in a given string. The length of the strings may vary but the delimiter is always the same. Here are some examples along with my attempted solutions: Input 1: james.sam.uri.stackoverflo ...

javascriptjavaregextypescriptalgorithm

Having issues with passing POST data during file handling operations

I am attempting to utilize Ajax POST on my WordPress website to check if checkboxes are selected and update their values in the database upon clicking a button. Although using the standard PHP form submission is the simplest method, the fields that I need ...

javascriptphpjqueryajaxwordpress

Issues arise when socket events fail to trigger in a web browser when utilizing docker containers and docker-compose

Before dockerizing the application, all functions as expected. However, after migrating the application to Docker, I am experiencing issues with receiving socket events in the browser. The server can still receive socket events from the browser and conso ...

angularjsnode.jsdockersocket.iodocker-compose

I can't figure out why my unslider isn't adapting to the screen size. Check out the fiddle for more details

I recently implemented unslider to create a slideshow that spans 100% of the width on my website. Everything seemed to be working fine until I tried resizing the screen, and the slides remained the same size as they were initially loaded. Here is the code ...

javascriptjqueryhtmlcssslideshow

The set for generating dgeni documents is not currently specified

I am facing issues with the dgeni document generation tool where I encounter an error stating that 'Set is not defined', which leads me to believe the error is related to this issue. I have installed dgeni using npm install on both Windows 7 and ...

javascriptnode.jsnpmpackage

Setting up Scss and purgeCss configuration in Next.js custom postCSS configuration: A step-by-step guide

My current project is using Scss in combination with Bootstrap for design. I have implemented purgeCss to remove unused Css, and customized my postcss.config.js file as follows: module.exports = { plugins: [ "postcss-flexbugs-fixes", [ " ...

javascriptcssnext.jspostcsscss-purge

Resolving DataTables Error

Here is my JavaScript code snippet. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.1/css/but ...

javascriptjqueryajaxdatatables

Angularjs allows you to repeat a specific number of elements based on a given number

I am working with an object that is connected to the $scope in my Angularjs application {name: 'Vampire Cafe', rating: 4, review: "Food was good, cafe was a bit dark..."} I want to display the value of the rating by showing a certain number of ...

javascriptangularjs

Is there a way to modify or add to the response object's methods in Express and Node.js?

When using middleware in Express, the framework passes both a res and a req object. These objects enhance the built-in ones from http.ServerResponse and http.ClientRequest respectively. I am curious about the possibility of overriding or extending methods ...

javascriptnode.jsoopexpress

Transforming an HTML Attribute into a JavaScript Object

I'm encountering an issue with converting an HTML-data attribute into a JavaScript Object. Here is my approach: The data Attribute appears as: <a id="stringObj" data-string="{'Foo':'Bar'}">Some A-Tag</a> In JavaScri ...

javascriptjqueryjson

Objective-C and the World of WebSockets

Possible Duplicates: Comparison of WebSockets, TCP/IP, and JavaScript/AJAX for iPhone chat Integrating WebSockets into a Cocoa application Hello all, our team is embarking on creating a bespoke iPhone chat app and deliberating the use of WebSocket ...

c#javascriptiphoneobjective-chtml

I am facing an issue where my Javascript hide and show function is not working properly when clicked. Despite not giving

I am currently working on a Javascript onClick function to toggle the visibility of content in a lengthy table. I initially set part of the table's class to display: "none" and added a button to show the hidden content when clicked. However, nothing i ...

javascripthtmlcss