Loop through a JSON object within the collection of another ng-repeat loop

I'm facing an issue with my ng-repeat loop where I iterate through a JSON and display it in a table. The problem is that when I try to iterate through a nested JSON value, it's treating it as a string.

<tr
    ng-repeat="(key,value) in event.kibana._source track by $index"
    ng-class-odd="'odd'">
        <td>{{key}}</td>
        <td>
            <span>{{value}}</span>
            <span ng-repeat="(k,val) in value track by $index">{{k}}|{{val}} </span>
        </td>
</tr>

The issue arises because the "value" is considered to be a JSON but displays as a string within the td element:

{"bezeichnung":"Basis","name":"Basis","id":16} 0|{ 1|" 2|b 3|e 4|z 5|e 6|i 7|c 8|h 9|n 10|g 11|" 12|: 13|" 14|B 15|a 16|s 17|i 18|s 19|" 20|, 21|" 22|n 23|a 24|m 25|e 26|" 27|: 28|" 29|B 30|a 31|s 32|i 33|s 34|" 35|, 36|" 37|i 38|d 39|" 40|: 41|1 42|6 43|}

What I actually want is to properly iterate through the nested JSON instead of treating it as a string. Any suggestions on how to achieve this?

EDIT:

This is the structure of the JSON:

{
    "fold":11,
    "id":64894760,
    "entities":[{"bezeichnung":"Basis","name":"Basis","id":16}]
}

Answer №2

Consider removing track by $index. For more information, refer to the documentation available here: ngRepeat

<tr id="{{key}}"
    ng-repeat="(key,value) in event.kibana._source"
    ng-class-odd="'odd'">
        <td>{{key}}</td>
        <td>
            <span>{{value}}</span>  //array of objects, [{"bezeichnung":"Basis","name":"Basis","id":16}]
            <div ng-repeat="val in value track by val.id">  //single value in 'value' array
                <span ng-repeat="(k,v) in val track by k">{{k}}|{{v}} </span>
            </div>
        </td>
</tr>

The issue was that "value" was an array of objects with the same value for two keys. By using the key in the object as a tracker, AngularJS can differentiate between them. I've assumed that the "id" key is unique for a particular value.

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

A simple way to retrieve the computed value from one ng-model and assign it to a different ng

I am facing an issue where I have 3 ng-models and I need to fetch calculated data from the first two into the third one using angularjs I attempted a solution but it doesn't seem to work as expected Below is the HTML code snippet: var urlt = ' ...

What is the best way to ensure a function waits for a stable database connection before proceeding?

Perhaps not phrased well, but I grasp the concepts of async/promises/callbacks. My aim is to develop a module that can be imported (database.js), where I can then execute methods like database.insert() and database.read(). This is the code I have so far: ...

What is the method for utilizing string interpolation in Angular/Typescript in order to retrieve a value from a variable?

I have a variable called demoVars, which is an array of objects with properties var1, var2, and var3. In my component class, I have a variable named selectedVar that holds the name of one of these properties: var1, var2, or var3. I want to dynamically pu ...

What are the steps to implement routing with angular-ui-router?

Recently delving into angularjs, I decided to create a sample app with custom directives. I then attempted to add routing, but unfortunately, it's not functioning properly. Upon starting the project, nothing is being displayed in the browser. Here is ...

Luxon DateTime TS Error: The 'DateTime' namespace cannot be used as a type in this context

I have encountered an issue while trying to set the type of a luxon 'DateTime' object in TypeScript. The error message DateTime: Cannot use namespace 'DateTime' as a type appears every time I attempt to assign DateTime as a type. Below ...

Encountering a glitch while attempting to render with the select tag in React.js

I have developed two functions that generate JSX content and created a logic to display each function based on the user's choice: const Register = () =>{ const [value, setMyValue] = useState() function Zeff(){ return( <div> <h1& ...

Tips on serving a static file from a location other than the public or view directories following middleware in Express JS

I am organizing my files in a specific way. Inside the folder api-docs, I have an index.html file along with some CSS and JS files. My goal is to display the API documentation only for authenticated users. Since I am using Jade for views in this proje ...

Cannon.JS ensures that walls are impenetrable

I am currently experimenting with three.js and cannon.js, but I have encountered an issue where I am unable to create solid walls or any stationary objects that can block the player's movement. Below is the code I have been working on so far. I would ...

Incorporating Information into an Array as a State Object within React.js

Hey everyone, I've hit a bit of a roadblock and I could really use some assistance. I'm trying to figure out why I keep getting an error when attempting to push user input into my array. Can someone take a look at my code and offer some insight? ...

Converting between GPS degrees and decimal values using jquery, javascript, and PHP: A comprehensive guide

Is there a way to convert GPS degree to decimal values or vice versa? I am working on developing a feature where users can input an address and retrieve the GPS values in both degree and/or decimal format. However, my main challenge is understanding how t ...

Utilizing 'document.execCommand' for handling 'delete' key events in AngularJS

Here is a demo plunkr link that I have created to demonstrate the issue. I am looking to implement the strikeThrough command whenever there is a delete operation. For instance: If the user selects "Text" and presses the delete or backspace key, it should ...

Tips for creating read-only checkboxes with multipledropdown.js in Angular.js

I am trying to make all checkboxes in a multiple dropdown list readonly using Angular.js with the multipledropdown.js plugin. My code snippet is as follows: <div class="col-md-6" ng-show="sub_sub_menu"> <div class="input-group bmargindiv1 col-md- ...

I encountered an issue where my button's onClick function was not functioning properly with the clickable component

Here is my display I have a component(Product) that can be clicked. One of its children is also a button. However, when I click it, the Product's function runs. How can I make sure my button executes separately? <ProductForm> ...

Enhancing the aesthetic appeal of a form

I have created a form in HTML that utilizes JavaScript to pull data from a database. I am looking to style the form, but I'm unsure of how to proceed. Below is the form along with some CSS code. How can I integrate the two together? <form id=" ...

Updating state in React using the spread operator is not allowed

As a newcomer to React, I've been struggling with using the spread operator to push new elements into an array stored in the state. My aim is to create an array with a sequence of different numbers. Here's the code snippet that I've been wor ...

Issues with npm installation

Having trouble installing 'react-navigation' in my expo (react native) project using the command 'npm install --only=dev react-navigation'. I keep receiving warnings and am unsure how to proceed. See image link for details: enter image ...

What is the recommended method for writing JavaScript scripts with AJAX in a Rails application? How can URLs be incorporated into the script effectively?

When incorporating AJAX into my Rails application, I encounter difficulties when specifying the URL for the request within a script. While it is recommended to use helpers like my_resource_path instead of manually writing paths, these helpers do not functi ...

Tips for storing a JSON file locally and accessing it at a later time on the client side

Can PHP be used to generate a JSON file containing information like first name and last name? When using json_encode, what is the process of saving it on the client side, and how can it be retrieved and read afterward? ...

Obtaining an image from a URL, saving it, and then animating it? That definitely

Looking to create a dynamic animation with images that update every 15 minutes from the following URL: How should I go about storing and looping through the most recent 24 images for the animation? Is using a MySQL database the best option or are there o ...

Stop Code Execution || Lock Screen

Is there a way to address the "challenge" I'm facing? I'm an avid gamer who enjoys customizing my game using JavaScript/jQuery with Greasemonkey/Firefox. There are numerous scripts that alter the DOM and input values. In my custom script, I hav ...