How can I retrieve a specific key from a nested array while using ng-repeat to iterate through it

Question

How can I retrieve a specific key from a nested array while using ng-repeat to iterate through it

I have successfully created a code snippet that retrieves JSON data and displays it in HTML using AngularJS.

<div class="activity" ng-app="stream" ng-controller="streamCtrl">
        <ul ng-repeat="x in myData">
            <p class="author"><a href="https://hypothes.is/stream?q=user:{{x.user}}">{{x.user}}</a></p>
            <p class="context_title"><a class="context" href="{{x.links.incontext}}">{{x.document.title}}</a></p>
            <p class="exact">{{x.target[0].selector.find(selector => selector.exact).exact}}</p>
            <p class="text" btf-markdown="x.text">{{x.text}}</p>
            <span ng-click="loadFromMenu($parent.$index)" ng-repeat="y in x.tags">
                <a href="https://hypothes.is/stream?q=tag:{{y}}">[{{y}}]</a>
            </span>
            <p class="reply"><a href="{{x.links.incontext}}">reply</a></p>
            <br>
        </ul>

While everything is functioning correctly, I've noticed that the location of the key "exact" within the "selector" array can vary. Some API responses place it in the third subarray, while others place it in the fourth.

For example, in this specific JSON segment, "exact" is located in the third subarray within the selector:

{
    "total": 9,
    "rows":
    [
        {
            "updated": "2016-07-19T20:46:47.509685+00:00",
            "group": "__world__",
            "target":
            [
                {
                    "source": "http://...",
                    "selector":
                    [
                        {
                            "endContainer": "/div[3]/div[1]/div[1]/section[1]/div[1]/p[98]",
                            "startContainer": "/div[3]/div[1]/div[1]/section[1]/div[1]/p[97]/b[1]",
                            "type": "RangeSelector",
                            "startOffset": 0,
                            "endOffset": 0
                        },
                        {
                            "type": "TextPositionSelector",
                            "end": 22803,
                            "start": 22676
                        },
                        {
                            "exact": "Are ...",
                            "prefix": "esearch...",
                            "type": "TextQuoteSelector",
                            "suffix": "List of References Berkeley,"
                        }
                    ]
                }
            ],
            "links":
            {
                "json": "https://..",
                "html": "https://..",
                "incontext": "https://.."
            },
            "tags":
            [
                "a",
                "b"
            ],
            "text": "They ..",
            ...
    ]}

My concern is ensuring that Angular always accesses the "exact" property regardless of its position within the "selector" arrays. What would be the most effective approach to achieve this?

javascript angularjs json

Answer 1

Answer №1

If my understanding is correct, you are only interested in the selector x.target[0] that contains the keyword exact.

To achieve this, filtering the selectors based on that specific requirement will solve the problem:

<!-- Edit: there was a suggested solution here that did not parse correctly. Refer below for the corrected version. -->

Keep in mind that .filter() returns a list of all matching elements, so you need to choose one result (the [0]) yourself.

Furthermore, I have provided an ES5 example for simplicity. However, with ES2015 features like .find() and the concept of 'truthy' values, you can refine it as follows:

<p class="exact">{{ x.target[0].selector.find(x => x.exact).exact }}</p>

Edit: It appears that using a { symbol within a template expression causes parsing issues.

To workaround this, move the filter predicate to the $scope:

// inside the controller
$scope.hasExactProperty = function(selector) {
  return selector.exact !== undefined;
};

<!-- within the template -->
<p class="exact">{{ x.target[0].selector.filter(hasExactProperty)[0].exact }}</p>

Alternatively, transfer the entire processing of x to the $scope (similar to Rajesh's answer):

// inside the controller
$scope.getExact = function(x) {
  return x.target[0].selector.filter(function(x) {
    return x.exact !== undefined;
  })[0].exact;
};

<p class="exact">{{ getExact(x) }}</p>

Note that if you utilize the controller via controllerAs, you must assign this.hasExactProperty/this.getExact.

Answer 2

If my understanding is correct, you are only interested in the selector x.target[0] that contains the keyword exact.

To achieve this, filtering the selectors based on that specific requirement will solve the problem:

<!-- Edit: there was a suggested solution here that did not parse correctly. Refer below for the corrected version. -->

Keep in mind that .filter() returns a list of all matching elements, so you need to choose one result (the [0]) yourself.

Furthermore, I have provided an ES5 example for simplicity. However, with ES2015 features like .find() and the concept of 'truthy' values, you can refine it as follows:

<p class="exact">{{ x.target[0].selector.find(x => x.exact).exact }}</p>

Edit: It appears that using a { symbol within a template expression causes parsing issues.

To workaround this, move the filter predicate to the $scope:

// inside the controller
$scope.hasExactProperty = function(selector) {
  return selector.exact !== undefined;
};

<!-- within the template -->
<p class="exact">{{ x.target[0].selector.filter(hasExactProperty)[0].exact }}</p>

Alternatively, transfer the entire processing of x to the $scope (similar to Rajesh's answer):

// inside the controller
$scope.getExact = function(x) {
  return x.target[0].selector.filter(function(x) {
    return x.exact !== undefined;
  })[0].exact;
};

<p class="exact">{{ getExact(x) }}</p>

Note that if you utilize the controller via controllerAs, you must assign this.hasExactProperty/this.getExact.

Answer 3

Answer №2

To retrieve the value of exact, a function can be created to loop through all selectors in the object.

var o = {
  "target": [{
    "source": "http://...",
    "selector": [{
      "endContainer": "/div[3]/div[1]/div[1]/section[1]/div[1]/p[91]/b[1]",
      "startContainer": "/div[3]/div[1]/div[1]/section[1]/div[1]/p[91]/b[1]",
      "type": "RangeSelector",
      "startOffset": 0,
      "endOffset": 266
    }, {
      "type": "TextPositionSelector",
      "end": 22559,
      "start": 22293
    }, {
      "exact": "If we consider ...",
      "prefix": " blablah. Someone:",
      "type": "TextQuoteSelector",
      "suffix": "Someone2: In filmmaking as researc"
    }]
  }]
}

function getValueInObj(obj, key) {
  return obj.target[0].selector.find(function(_o) {
    return _o[key];
  })[key];
}

console.log(getValueInObj(o, "exact"));

In order to use this function, you will need to pass the current object as an argument:

<p class="exact">{{getValueInObj(x)}}</p>

Please note that only the first value of exact is considered in this implementation. Additionally, Array.find may not be supported by IE. To achieve compatibility, consider using a polyfill or try using Array.filter.

Answer 4

To retrieve the value of exact, a function can be created to loop through all selectors in the object.

var o = {
  "target": [{
    "source": "http://...",
    "selector": [{
      "endContainer": "/div[3]/div[1]/div[1]/section[1]/div[1]/p[91]/b[1]",
      "startContainer": "/div[3]/div[1]/div[1]/section[1]/div[1]/p[91]/b[1]",
      "type": "RangeSelector",
      "startOffset": 0,
      "endOffset": 266
    }, {
      "type": "TextPositionSelector",
      "end": 22559,
      "start": 22293
    }, {
      "exact": "If we consider ...",
      "prefix": " blablah. Someone:",
      "type": "TextQuoteSelector",
      "suffix": "Someone2: In filmmaking as researc"
    }]
  }]
}

function getValueInObj(obj, key) {
  return obj.target[0].selector.find(function(_o) {
    return _o[key];
  })[key];
}

console.log(getValueInObj(o, "exact"));

In order to use this function, you will need to pass the current object as an argument:

<p class="exact">{{getValueInObj(x)}}</p>

Please note that only the first value of exact is considered in this implementation. Additionally, Array.find may not be supported by IE. To achieve compatibility, consider using a polyfill or try using Array.filter.

How can I retrieve a specific key from a nested array while using ng-repeat to iterate through it

Answer №1

Answer №2

Similar questions

The value of Yargs.argv is consistently displayed as [object Object]

retrieve information from various components identified by the common class name by employing ajax requests

Issue with displaying AngularJS option values in select box on Windows tablet with IE browser

What could be causing the appearance of a Firefox error message during the execution of a Protractor test?

The ng-click function seems to be malfunctioning within the Angular JS framework

Unable to use console log in shorthand arrow function while working with Typescript

Troubleshooting hidden form field functionality in AngularJs

Displaying Component when Clicked using Vue.js

Get rid of the seconds in the output of the toLocaleTimeString

How to dynamically populate a Vue multiple select dropdown with v-for loop?

When utilizing backend Node.js with MongoDB, the patch request is unable to successfully update date type values

Utilize jQuery Function on Identical Class of <ul> Elements

What is the url of the file at input.files[i]?

Utilizing WCF as a conduit or enveloper: how does it work?

What a great method to execute a button click within the same button click using jQuery!

The navigation bar remains fixed while the section heading fails to display properly

Is there a way for me to determine if something is hidden?

"When an item is removed from ng-repeat in AngularJS UI Bootstrap popover, the outside click trigger will automatically close the

Iterate through a local storage object using JavaScript's looping mechanism

An individual in a chat App's UserList experiencing issues with incorrect CSS values. Utilizing Jquery and socketio to troubleshoot the problem