Combining two JSON objects using Angular's ng-repeat

My goal is to extract data from two JSON files and present it in a table:

The first file 'names.json' contains:

[
        {
            "name": "AAAAAA",
            "down": "False"

        },

        {
            "name": "BBBBBB",
            "down": "False"
        },
        {
            "name": "CCCCC",
            "down": "True"
        }
]

The second file 'data.json' contains:

[
         {
            "data": "15%"
        }
]

Javascript code:

app.service('service', function($http, $q){
            this.getNames = function () {
    var datas =  $http.get('data,json', { cache: false});
    var names =  $http.get('names.json', { cache: false});
    return $q.all([datas, names]);
};
});

    app.controller('FirstCtrl', function($scope, service) {
     var promise = service.getNames();
     promise.then(function (data) {
     $scope.names = data.names.data;
     $scope.datas = data.datas.data;
});

Now I need to display this data in an HTML table:

<div ng-controller="FirstCtrl">
     <table>
        <tbody>
          <tr ng-repeat="name in names.concat(datas)">
            <td>{{name.name}}</td>
            <td ng-if="name.down === 'False'">{{name.down}}</td>
            <td ng-if="name.down !== 'False'">{{name.data}}</td>
            <td>{{name.data}}</td>
          </tr>
        </tbody>
      </table>
    </div>

I have tried using concat() method but it didn't work. Is there any other way to display data from two arrays using ng-repeat in a table? Thank you for your help!

Answer №1

If you're looking to achieve your goal, using a filter in AngularJS would be the way to go.

var app = angular.module('app', []);

app.controller('FirstCtrl', FirstCtrl);


function FirstCtrl($scope) {

  $scope.names = [{
    "name": "AAAAAA",
    "down": "False"

  }, {
    "name": "BBBBBB",
    "down": "False"
  }, {
    "name": "CCCCC",
    "down": "True"
  }];
  $scope.datas = [{
    "data": "15%"
  }]

};

app.filter('getvalue', function() {

  return function(name, datas) {

    if (name.down === 'False')
      return name.down;
    else
      return datas[0].data;
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="FirstCtrl">
  <table>
    <tbody>
      <tr ng-repeat="name in names">
        <td>{{name.name}}</td>
        <td>{{name | getvalue:datas}}</td>
        <td>{{name.data}}</td>
      </tr>
    </tbody>
  </table>
</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

Modify a section of an HTML text's formatting

function changeEveryCharColor(id) { var part; var whole = ""; var cool1 = document.getElementById(id).innerHTML; console.log(cool1); for(var i = 0; i < cool1.length; i++) { color1 = getRandomInt(255); ...

gson: customized fromJson method based on the data type

Apologies if this has been asked before, but I couldn't find the information I'm looking for. Here are the different message types I have: class AbstractMessage { int code; String token; } class ShareMessage extends AbstractMessage{ ...

What is the proper way to utilize BrowserRouter when child routes are connected to components?

I recently started learning React and decided to create a signup form following a tutorial on React Tutorial. However, the tutorial turned out to be outdated. I attempted to implement browser redirects for the signup, login, and home page links by defining ...

Obtain the child's identification number and include it in the parent element as an ARIA

I need assistance with a JavaScript (or jQuery) function to dynamically add an 'aria-labelledby' attribute to parent <figure> elements based on the ID of the <figcaption>. I have multiple images and captions set up in <figure>&l ...

My Dialogflow chatbot is having trouble deploying JavaScript fulfillment code

My attempt to publish my fulfillment code created on the Inline Editor using Dialogflow and Google Cloud Console has been met with refusal. Here is a snippet of the code from my index.js file: 'use strict'; const functions = require(&apo ...

Smooth scrolling in JavaScript can lead to unexpected jumps when using scroll-margin-top

I am currently working on implementing smooth scrolling into my website using JavaScript. However, I have run into a problem with CSS property scroll-margin-top causing a sudden jump at the end. The CSS I am using for scroll margins looks like this: class ...

Is there a way to convey a transition MUI property from a parent component to its child component in React?

My current setup involves a parent component with a button that triggers the opening of a snackBar from MUI (child component) upon click. To enhance the user experience, my teacher suggested adding a transition effect to the onClick event so that the snack ...

Looking to add the Ajax response data into a dropdown selection?

Looking to add select options dynamically, but unsure how to retrieve response values. I am able to fetch all the values in the response, but I struggle with appending them correctly in the select option. I believe the syntax is incorrect. success: funct ...

What is the reason for the failure of multiple place markers on a planet object3D?

After spending hours trying to debug a piece of code I wrote 3 years ago using Three.js, I still can't figure out why it's not working anymore. I thought updating all the other code to use ES6 for Three.js would solve the issue, but when I try t ...

Choose a dropdown menu containing JSON data

I am currently working on creating an HTML webpage using data from a JSON file. One issue I am facing is populating a select box with content from the JSON file. Despite trying various solutions from online forums, I have not been successful in getting it ...

"Encountering an issue with Multer where req.file is displaying as undefined in NodeJS

Recently, I followed the advice of several YouTubers and used multer for file upload in my project. However, despite correctly defining all the functions, req.file always appears as undefined. booking_route.js const express = require('express'); ...

Converting a JSON object to a class in ASP.NET MVC - A step-by-step guide

Having trouble converting the JSON object below to a class in Asp.Net MVC. { "Name.Test":"fsafasfda" } If you have any suggestions, they are greatly appreciated. The situation is as follows in an ASP.NET action: [HttpPut] public JsonResult Te ...

I'm having trouble grasping the concept of this asynchronous behavior

After reviewing the output provided, my initial expectation was for working to be displayed between the lines of begin and end. Here is the rule: Is there a possible solution to achieve this outcome without modifying the app.js file? app.js const se ...

Ways to utilize built-in features from a Java library that has been incorporated

I have embarked on a project to create a Nativescript wrapper for a Java library in order to harness its functionalities for a Nativescript application. Despite the lack of detailed articles on this topic, I have decided to turn this into a plugin wrapper ...

Is it possible to capture user input using a rich text editor such as Quill and save the data as a .json file by sending a POST request?

My website features a sophisticated text editor known as ngx-quill, where users can input their content. I am currently working on a project that requires me to generate a JSON file containing user input and then submit this JSON file. I am seeking guidan ...

Ensure that all links are opened in a new tab

When including _blank in the a href URL, my website contains various elements like iframes and ads from Adsense, Taboola,, etc. Currently, when a user clicks on an iframe or ad, it opens in the same window. Is there a way to ensure that all URLs (includin ...

A guide on how to mention users in Discord.js

I attempted to get the bot to mention a member using @, but when I used message.channel.send(<@id>+"text") it showed an error message saying unexpected sign '<'. Is there a way to successfully mention members with the bot? ...

Transitioning a NPM project to the Apache server

Recently, I successfully managed to run a simple example project by following these steps: I downloaded and installed Node.js for windows x64. I then used Git to clone the project from https://github.com/BretCameron/three-js-sample.git Next, I ran t ...

Angular - Implementing service worker to extract dynamic ID from route in "Notificationclick" event?

I have integrated push notifications into my code to notify users when an action is taken. The backend was developed using lib.net.webpush 3.1.0 with .net 4.5.2 in C#. The notification system is functioning well, but I am facing a challenge: Within my ser ...

Extract an array segment from a JSON document and convert it into a list

In my JSON file, there is a valid list/Array of databases structured as follows: { "Logging": { "IncludeScopes": false, "LogLevel": { "Default": "Debug" } }, "settings": { ...