What is the best way to access an external array using ng-repeat in AngularJS?

My dataset consists of 3 separate arrays.

"areas": {
  "default": [
    {
      "area": "Master Bedroom",
      "uuid": "986e3f42-1797-49ae-b060-181a33b9",
      "description": "",
      "new": [
        {
          "value": "986e3f42-1797-49ae-b060-181a33b9",
          "label": "Master Bedroom",
          "selected": false
        },
        {
          "value": "0c7abecb-6078-4718-8537-97a0d8ea",
          "label": "Bedroom",
          "selected": false
        },
        {
          "value": "95de4e05-a5f4-4d67-bd8b-cb3906c4",
          "label": "Powder Room",
          "selected": false
        },
        {
          "value": "b4e794b2-7a5f-4567-9422-cb1c67c8",
          "label": "Kitchen",
          "selected": false
        },
        {
          "value": null,
          "label": "Select",
          "selected": true
        }
      ]
    },
    {
      "area": "Kitchen",
      "uuid": "b4e794b2-7a5f-4567-9422-cb1c67c8",
      "description": "",
      "new": [
        {
          "value": "986e3f42-1797-49ae-b060-181a33b9",
          "label": "Master Bedroom",
          "selected": false
        },
        {
          "value": "0c7abecb-6078-4718-8537-97a0d8ea",
          "label": "Bedroom",
          "selected": false
        },
        {
          "value": "95de4e05-a5f4-4d67-bd8b-cb3906c4",
          "label": "Powder Room",
          "selected": false
        },
        {
          "value": "b4e794b2-7a5f-4567-9422-cb1c67c8",
          "label": "Kitchen",
          "selected": false
        },
        {
          "value": null,
          "label": "Select",
          "selected": true
        }
      ]
    }
  ],
  "new": [
    {
      "value": "986e3f42-1797-49ae-b060-181a33b9",
      "label": "Master Bedroom",
      "selected": false
    },
    {
      "value": "b4e794b2-7a5f-4567-9422-cb1c67c8",
      "label": "Kitchen",
      "selected": false
    },
    {
      "value": null,
      "label": "Select",
      "selected": true
    }
  ]
}

The default and new arrays are nested within the main areas object. Displaying areas from the default array is my goal, but I also need to add new areas based on the data/labels in the new array. The challenge lies in repeating an array that is outside of the current iteration. Any suggestions on a better approach or data structure?

javascriptarraysangularjsangularjs-ng-repeat

Answer №1

I'm a bit confused about the direction you're going in, but if you're dealing with matching indexes in both the default and new arrays, you might want to consider something like this:

<div ng-repeat="item in sections.default">
    {{item.value}} <!-- Extracted from the default array -->
    {{sections.new[$index].value}} <!-- Pulled from the new array -->
</div>

Answer №2

Achievable (sort of):

<div ng-repeat="default in areas.default">
 <div ng-repeat="fresh in default.new">
   <div ng-repeat="element in fresh">
    {{ element.value}}
</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

Efficiently managing errors with AngularJS and Mongoose

I have developed a straightforward AngularJS application that involves calling REST services. To interact with these services, I'm utilizing mongoose. While everything is functioning correctly, I am seeking ways to enhance error handling. Here is an e ...

node.jsangularjsmongodbexpressmongoose

By pressing the "showMore" button, the page dynamically pulls in a json list from a file

Currently, my focus is on a dropwizard-Java project. My task involves retrieving and showcasing the first 10 items from a json list in a mustache view. If the user clicks on the "show more" link, I should retrieve the next 10 elements from the list and d ...

javascriptjavajqueryjsonmustache

use element ui tree and vue to filter files according to selected folder

Utilizing the element UI treeview to showcase folders. Each folder or its child folder contains files that need to be displayed based on folder selection. While it's easy to filter and list out these files in a normal list, I am facing challenges with ...

javascriptvue.jsvuejs2treeviewelement-ui

Detecting the length of nested structures in JSON using Angular Views

Illustrative JSON Format { "holding": [ { "company": 1, "employee": [ { "id": 1, "name": "John"}, { "id": 2, "name": "Michael"}, { "id": 3, "name": "George"} ] }, { "company": 2, "employe ...

angularjsjson

Unable to display the complete JSON data using ng-repeat in AngularJS

Utilize ng-repeat to display data retrieved from a web service. Below is my controller JS (GetAllCtrl.js): https://i.stack.imgur.com/GAelG.jpg I have received JSON data: https://i.stack.imgur.com/0xkAU.jpg My goal now is to extract only company informati ...

javascripthtmlangularjscontrollerangularjs-ng-repeat

Having issues with the input event not triggering when the value is modified using jQuery's val() or JavaScript

When a value of an input field is changed programmatically, the expected input and change events do not trigger. Here's an example scenario: var $input = $('#myinput'); $input.on('input', function() { // Perform this action w ...

javascriptjqueryhtmleventsinput

Unable to launch React Native project on emulator now

Something seems off with my App as it won't start up on my AS Emulator. Everything was running smoothly yesterday, but today it's not working - possibly due to me moving the npm and npm-cache folders, although they are configured correctly with n ...

javascriptandroidreact-nativegradlenpm

Some pages are compatible with JS while others are not... Although, the file can be found in the page source

I have limited knowledge in javascript, so I often find myself copy-pasting code. Currently, I am working on a website that includes a navigation sidebar. I have implemented a script to toggle a class that sets the display property to none. $(document).rea ...

javascriptjqueryflaskjinja2

Cloning a checkbox using Jquery

I am working on a search page that utilizes checkboxes to display results. After the user selects certain options and triggers a reload of the page, I want to provide an easy way for them to remove their selections by displaying them at the top of the page ...

javascriptjqueryformscheckbox

Can PHP Rewrite Array Elements?

What could be causing PHP to overwrite Array elements of objects with the last iteration of the object? This behavior raises concerns regarding maintaining a record of an object's changes using an array. It seems like this could lead to potential erro ...

phparraysobject

Creating a stunning display of six video textures on a cube through the power of three.js

My current project involves working with a video that has been segmented into six parts. Here is a screenshot of the input video. The goal is to project these 6 videos onto the six faces of a cube using JavaScript: <!DOCTYPE html> <html> &l ...

javascript3dthree.jstextures

Passing an array to web service as parameters using Swift

I've been struggling to send an array object to a web service. Whenever I attempt to add the array to parameters, it throws an error. Despite trying various methods, none have proved to be effective. The goal is to include ("assignees" : newList) in ...

arraysjsonswift

Res.redirect() function does not redirect the browser URL as expected when triggered by a request made through a frontend fetch() call

Encountering a new issue that is challenging me. In the backend, there is an API route that redirects the browser URL to /signin using res.redirect('/signin'). Upon this redirection, React Router triggers the rendering of a 'log back in&apos ...

javascriptnode.jsreactjsexpressreact-router

Using Javascript to Trigger Events on Selection

I have a unique situation: 1) One of my dropdown's choices features various car names. 2) Another dropdown has two options: When selecting each option in the second dropdown, the following should occur: a) Choose UserInput - This action will hide ...

javascriptjqueryhtmlcss

How to display and retrieve data from a JSON object using JavaScript

Having trouble retrieving input values from a JSON object and getting 'undefined' when running the code. Any suggestions or ideas would be greatly appreciated as I have tried various approaches. Additionally, I need to utilize JSON for my school ...

javascriptjson

Tips for changing an input value when clicked using JQuery

Struggling to create an interactive mind mapping tool using JQuery? One challenge I'm facing is editing the content of a div once it's been set. I've implemented a function that successfully adds text to a div within the (mind-container). H ...

javascriptjqueryhtmlinputclick

How to ensure NodeJS waits for a response before returning a value

I've come across a seemingly simple problem that I just can't seem to solve. My current project involves working with an asynchronous messaging bot. In this particular scenario, the bot is supposed to react to an event by calling a Restful API a ...

javascriptnode.jsrest

Ways to reset the input field of Material UI

I'm encountering an issue with clearing a form that I created using Material UI. Despite searching for solutions on Stackoverflow, none of them seem to work for me. Using setState did not achieve the desired result of clearing the form. I am looking ...

javascriptreactjsmaterial-ui

Load texture using ImageUtils with callback in Canvas Renderer

Currently, I am utilizing three.js revision 53. While attempting to load a texture in Canvas Renderer (specifically on Win7) and incorporating a callback for the onLoad event, the texture fails to display. Surprisingly enough, removing the callback functi ...

javascriptcanvaswebglthree.js

Generate a dynamic vertical line that glides smoothly over the webpage, gradually shifting from one end to the other within a set duration using javascript

I have designed a calendar timeline using html. My goal is to implement a vertical line that moves from left to right as time progresses, overlaying all other html elements. This functionality is similar to Google Calendar's way of indicating the curr ...

javascriptjqueryhtmlcss