Utilizing ng-if in AngularJS for displaying JSON data

After generating Json Data from a PHP API, I attempted to formulate a MYSQL Query and PHP Script to achieve my desired outcome. However, the process has become overly complex.

 $data1 = [
        {
            "IDa": "6",
            "IDusr": "1",
            "doc_name": "name_doc.jpg",
            "doc_type": "doc"
        },
        {
            "IDa": "7",
            "IDusr": "1",
            "doc_name": "nameOne.jpg",
            "doc_type": "jpg"
        },
    ]

$data2 = [  
        {
            "IDa": "8",
            "IDusr": "1",
            "doc_name": "nameTwo.jpg",
            "doc_type": "jpg"
        },
        {
            "IDa": "9",
            "IDusr": "1",
            "doc_name": "nameThr.jpg",
            "doc_type": "jpg"
        },
        ]


$data3 = [      
        {
            "IDa": "10",
            "IDusr": "1",
            "doc_name": "nameOne_doc.jpg",
            "doc_type": "doc"
        },
        ]

$data4 = [      
        {
            "IDa": "11",
            "IDusr": "1",
            "doc_name": " ",
            "doc_type": "null"
        },
        ]

From the provided json data, I aim to display specific products as follows:

From $data1, only show IDa = 7
From $data2, show IDa = 8 and 9
From $data1, only show IDa = 10
From $data1, only show IDa = 11

Is it achievable using Angular ng-if in AngularJS or is there an alternative approach?

Your assistance is greatly appreciated.

javascriptjsonangularjs

Answer №1

This code snippet demonstrates how to loop over all items and populate a dictionary using the doc_type as the index:

var res = $data.reduce(function(dict, item) {
  dict[item.doc_type] = (dict[item.doc_type] || []);
  dict[item.doc_type].push(item);
  return dict;
}, {});

This can also be achieved with the following code:

var item,
    i,
    res = {};

for(var i = 0; i < $data.length; i++) {
  item = $data[i];
  if(!res[item.data_type]) {
    res[item.data_type] = [];
  }
  res[item.data_type].push(item);
}

About the usage of ng-if in Angular:

<div ng-repeat="item in $data">
  <span ng-if="item.IDa === '6'">...</span>
</div>

The ng-if directive in the span tag will only display the content for the item with IDa equal to 6.

To check for multiple values:

<span ng-if="item.IDa === '6' || item.IDa === '7'">...</span>


var $data = [
    {
        "IDa": "6",
        "IDusr": "1",
        "doc_name": "name_doc.jpg",
        "doc_type": "doc"
    },
    {
        "IDa": "7",
        "IDusr": "1",
        "doc_name": "nameOne.jpg",
        "doc_type": "jpg"
    },
    {
        "IDa": "8",
        "IDusr": "1",
        "doc_name": "nameTwo.jpg",
        "doc_type": "jpg"
    },
    {
        "IDa": "9",
        "IDusr": "1",
        "doc_name": "nameThr.jpg",
        "doc_type": "jpg"
    },
    {
        "IDa": "10",
        "IDusr": "1",
        "doc_name": "nameOne_doc.jpg",
        "doc_type": "doc"
    },
    {
        "IDa": "11",
        "IDusr": "1",
        "doc_name": " ",
        "doc_type": "null"
    },
];
  
var res = $data.reduce(function(dict, item) {
  dict[item.doc_type] = (dict[item.doc_type] || []);
  dict[item.doc_type].push(item);
  return dict;
}, {});

$('#result').text(JSON.stringify(res, null, 2));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<pre id="result"></pre>

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

Generate dynamic routes in Next.js only when needed

I'm currently working on a project using NextJS to create a frontend for a database that contains thousands of products, with the expectation of significant growth. The site/products/ route is functioning well, but I wanted to add a route to view indi ...

javascriptreactjsnext.js

Troubleshooting Issues with Google Analytics Internal Link trackEvent Functionality

Using ga.js, I have encountered an issue with tracking internal links on my website. Despite successfully tracking external links and viewing real-time reports for events, the internal links are not being recorded accurately. While testing pages, the tot ...

javascriptjquerygoogle-analytics

Node.js retrieves values through the app.get and app.post methods

In my project, I'm utilizing the app.get and app.post functions in Express on Node.js. Below is an example of how I have used the app.post function: app.post('/status', function(req, res) { if (~packages.STATUSES.indexOf(req.body['s ...

javascriptnode.jsexpress

Initiate a jQuery modal dialogue box

As an apprentice with no prior experience working with JavaScript, I encountered a problem with my function that calls a popup. The function works fine on the first button, but fails to work on all subsequent buttons. Since the application keeps adding b ...

javascriptjquerybutton

Looping through JSON objects using for loop

I am trying to implement a for loop with the following json data. The console.log function is working properly, but when I use it in the javascript function, it does not work as expected. I want the for loop to be functional within the javascript function ...

javascriptphpmysqljson

Behind the scenes, unable to launch due to Schema Error

My experience with Backstage was going smoothly until I ran into an issue after executing a yarn install this afternoon. Now, whenever I attempt to run yarn dev, it fails with the following error: [0] Loaded config from app-config.yaml [0] <i> [webpa ...

javascriptnode.jsbackstage

Is incorporating RequireJS into an AngularJS project a valuable decision?

Is it true that AngularJS has its own module loading mechanism built-in and using RequireJS is unnecessary or even inefficient? I am working on an Angular project where the index.html file is becoming quite large. Would incorporating RequireJS help reduc ...

javascriptangularjsperformancerequirejsjs-amd

Using the onreadystatechange method is the preferred way to activate a XMLHttpRequest, as I am unable to trigger it using other methods

I have a table in my HTML that contains names, and I want to implement a feature where clicking on a name will trigger an 'Alert' popup with additional details about the person. To achieve this, I am planning to use XMLHttpRequest to send the nam ...

javascripthtmlajax

Hide an Angular button when a page is loaded, depending on the information found in a table

How can I hide the Submit button in a table row if a certain condition is met based on information from the database? I attempted to create a function that returns true or false, but it ends up crashing my program because it runs continuously. I also trie ...

javascripthtmlangularjs

Guide to storing a collection in an object with Java

Before the changes were saved https://i.stack.imgur.com/hjpXa.jpg After the changes were saved https://i.stack.imgur.com/xABzN.jpg @Entity @JsonIgnoreProperties({"hibernateLazyInitializer", "handler"}) public class Notification { @Id @GeneratedVa ...

javascriptjavaangularjspojo

Determining the emptiness of an array in Postman using node.js

When I receive a response, it is in the following format: { "test1": [], "test2": [], "test3": [], "test4": null, "test5": [] } This is the response that I get after making a request. I need to verify whether test1 is empty or not. ...

javascriptnode.js

What is the best way to display long text in a browser alert without it being cut off?

Seeking to display a large amount of data in an alert box, but only a portion is currently visible. The following text is all that can be seen: ["19467,1496257152583","19227,1496256651094","19469,1496257033968","17285, ...

javascriptjqueryhtmlbrowseralert

In .NET, the NAME attribute is no longer included in the FORM tag

How can I prevent .NET from removing the NAME attribute from my HTML forms? It is crucial for me to have this attribute in order to utilize AngularJS effectively. Your insight on this matter would be greatly appreciated. When I view my form in Visual Stud ...

c#visual-studioangularjs

Personalized Tumblr-style button

Hey there, I've been working on creating a custom Tumblr-like button and tried adding an iframe above it to make it clickable. However, something seems to be off as it's not functioning properly. I'm still trying to wrap my head around how i ...

javascriptcssiframetumblr

Avoid mutating the prop directly and instead, utilize a data or computed property that is based on the value of the prop. The prop that is being mutated in this case is

Help me understand this issue that Vue is displaying, I am not sure what is going on. This is my progress element: <el-progress :percentage="percentCompleted" v-show="uploadingVideo"></el-progress> data() { return{ percentCompleted: 0 ...

javascriptvue.js

Animation effect in Jquery failing to execute properly within a Modal

I have developed a small jQuery script for displaying modals that is both simple and efficient. However, it seems to only work with the fadeIn and fadeOut animations, as the slideUp and slideDown animations are not functioning properly. I am unsure of the ...

javascripthtmljquerycss

Iterate over each item in the select and include a blank option if either of the elements is missing

Having trouble with 2 drop down menus, select1 and select2. I select item1 from select1 and then click the OK button. But when the selected index is 0 (first option), I want to loop through the items of both drop downs. If the elements at the same index ( ...

javascriptjquerydrop-down-menudropdownbox

Delay in Ionic list item navigation

As I continue to build my app using "$ ionic start myApp sidemenu" and deploy it directly to Android, I've noticed a significant delay when tapping on the playlist page, such as when selecting "Indie". It feels like there is a 300ms lag before the pag ...

javascriptangularjsionic-framework

Is it possible to display a React stack trace in the browser using a custom component?

I am currently brainstorming a solution to display a React stack trace error message in the browser with the same formatting and layout as it appears in the terminal. For example, here is the stack trace error displayed in the terminal, and I aim to replic ...

javascriptreactjs

Tally each div individually and display the count within each div, instead of showing the total count across

I have come across various solutions that show the total number of certain special divs, such as: $('.someclass').length However, I am facing a different challenge. I want to sequentially count each div with a numerical sequence. For instance, ...

javascriptjquery