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

I need help with storing data in an array from a file. Each time I pass the data, the array starts empty. Any suggestions?

In my setup, I have 3 crucial files that play different roles in the process: <script> $(document).ready(function(){ $("#button").click(function(){ var server = $("#server").val(); var username = $("#username").val(); var password = $("#passw ...

phparraysajaxmysqli

Breaking down the text into key-value pairs within an array

Here is a text I have: Questions no.1 this is the answer to question no.1 Question no.2 this is the answer to question no.2 Question no.3 this is the answer to question no.3 I am looking to store these questions and answers in an array with ...

phparrayskey

I desire to incorporate a subtle fading effect into the script

I have written the script code and now I am looking to add a fade effect to it. Can anyone guide me on how to achieve this? Your help is much appreciated! ※I used an online translator as English is not my native language. Please bear with any awkward ph ...

javascripthtmljquerycss

React Native vector icons display enigmatic symbols

I recently installed react-native-vector, but I'm seeing strange symbols when using it. Can anyone provide guidance on how to properly utilize this library? Platform: Android import React from 'react'; import {View, Text, StyleSheet} from & ...

javascriptreactjsreact-nativenpmicons

Firebase Firestore is returning the dreaded [object Object] rather than the expected plain object

I've created a custom hook called useDocument.js that retrieves data from a firestore collection using a specific ID. However, I'm encountering an issue where it returns [object Object] instead of a plain object. When I attempt to access the nam ...

javascriptreactjsfirebasegoogle-cloud-firestore

CSS - Discovering the reason behind the movement of text post generation (animation)

I have a question regarding CSS animation, specifically the typewriting effect. I was able to successfully achieve the typewriting effect using animation. However, I noticed that even though I did not set any animation for transforming, once the text is g ...

javascripthtmlcssanimationdata-visualization

Update the text within a table in real time by simply checking a box

I've got some data in JSON format that I've converted into an HTML table. Now, my goal is to update the text from False to True if a checkbox is checked. How can I achieve this? Below is the code used to create the HTML table: $.each(result, fu ...

javascriptjqueryjsonajax

Unraveling unicode escape sequences in JavaScript strings

My code includes a string like \uC88B\uC544\uC694. When I use this string in a node repl (v7.4.0), it displays '좋아요' correctly. However, when I try to use the same string in the following code snippet, it does not work as ex ...

javascriptnode.js

Ways to conceal a button using Javascript

Due to my limited JavaScript experience, I am struggling with understanding the event flow. This was written in haste, and further editing may be needed. I am working on creating a stack of cards (Bootstrap cards) along with a load button. To keep it inde ...

javascript

Using Ajax to Receive Data in a Separate JavaScript Function

I have a scenario where I am making an AJAX call in one function and attempting to capture the result in another function. Let me explain this in detail below: function myMain(){ var test = myWPackage(); alert(test); } function myWPackage(){ ...

javascriptajax

Error in Typescript syntax within a CommonJS/Node module: Unexpected colon token found in function parameter

After validating the file with TS, there are no more errors. However, during runtime, I encounter an "Unexpected token ':'" error on any of the specified TS, such as immediately erroring on function (err: string). The following are my build and ...

javascriptnode.jstypescript

Guide on how to retrieve a single document (mongoose/mongoDB)

Storing data in a database is crucial for many applications. { "_id": "62fa5aa25778ec97bc6ee231", "user": "62f0eb5ebebd0f236abcaf9d", "name": "Marketing Plan", "columns": [ { ...

javascriptnode.jsmongodbexpressmongoose

Having trouble identifying the data variable. Uncaught ReferenceError: edu_id has not been defined

How can I successfully pass the edu_id from an AJAX request to my Laravel controller? Utilizing anchor tags <a href="javascript:void(0);" onclick="showEditEducation(some_specific_id);" title=""><i class="la la-pencil"></i></a> Im ...

javascriptajax

Choose links in the div and apply "motion effects."

Can anyone help me figure out why the color change for links in a div on mouseover/mouseout isn't working? Here is the HTML code: <div id="Navigation"> <a href="#">Products</a> <a href="#">Pro ...

javascriptjquerymouseevent

Using jQuery validation to verify that a minimum of one radio button holds a true value

I have a form with two questions. The first question asks if the product value exceeds a certain fixed amount, and the second question asks if the product value is below that fixed amount. Upon submitting the form, validation should ensure that at least on ...

javascriptjqueryhtmlvalidationjquery-validate

javascript guide to dynamically update the glyphicon based on value changes

I am attempting to implement an optimal level feature where a glyphicon arrow-up will be displayed if a value falls within the optimum range, and it will switch to a glyphicon arrow-down if the value is lower. <div class="card-body" ng-repeat="item i ...

javascripthtmlangularjsglyphicons

Save to a JSON file

Hey there, I'm having some trouble with pushing a temporary value to a JSON file using the command "MyJSON.name.push". It keeps giving me an error saying "Undefined is not an object". I've tried different approaches and using JavaScript arrays wo ...

javascriptjson

Retrieve the response retrieved from AJAX/jQuery and insert it into the designated form input field

When a user inputs an address into this form and clicks on the verify address button, the following script is executed: $('#verify').click(function () { var address = $('input[name=address]'); var city = $('input[name= ...

phpjavascriptjqueryajax

After refreshing, the base href in the environment is characterized as undefined

Within my angularjs application, I have configured the env.js file as shown below: (function (window) { window.__env = window.__env || {}; // API url window.__env.apiUrl = 'http://aaaaaaa.com/'; // Base url window.__env.baseUrl = '/angula ...

htmlangularjs

json array: Tips for adding elements to a new array

In order to achieve my goal, I am looking to create a JSON array structure similar to the one shown below: var args = [{ name: 'test', value: 1 }, { key: 'test2', value: 2}]; How can I modify the code snippet provided below to generat ...

javascriptajaxjson