Display JSON data in AngularJS and show the corresponding data on the right side when clicked

I'm brand new to using AngularJS and I've been struggling with this issue. Take a look at the code snippet below to see what I mean. The titles are shown on the left, and when you click on one, I want the corresponding body to display on the right side of the screen. An example similar to what I'm looking for can be found here: in the menus section. Any assistance would be greatly appreciated.

[
  {
    "title" : "Sake / Shochu - TBD",
    "Body" : "Sake / Shochu - TBD\n",
    "Category" : "Beverage",
    "Nid" : "19"
  },
  {
    "title" : "Bottle Beer ",
    "Body" : "Bottle Beer - TBD\n",
    "Category" : "Beverage",
    "Nid" : "18"
  },
  ...
]

Here is my JS:

var app = angular.module('myApp', []);
app.controller('menuCtrl', function($scope, $http) {
    $http.get("menu-json").success(function(response) {
        $scope.titles = response;
        var nid ="19";
        $scope.isFood = function(titles) {
           return titles.Category === "Food";
        };
        $scope.isBeverage = function(titles) {
           return titles.Category === "Beverage";
        };
    });
});

Here is my HTML:

<div id="menu" class="wrapper clearfix" ng-app="myApp" ng-controller="menuCtrl">

    <h2 class="block-title">Menu</h2>
    <div class="col-md-4">
        <h3 class="food">Food</h3>
        <ul class="ul-food">
           <li class="node{{ x.Nid }}" ng-repeat="x in titles | filter:isFood">
             <a href""> {{ x.title }}</a>
           </li>
        </ul>

        <h3 class="food">Beverage</h3>
        <ul class="ul-bev">
           <li ng-repeat="x in titles | filter:isBeverage">
              <a href""> {{ x.title }}</a>
           </li>
        </ul>
    </div>
    <div class="col-md-8">
        <div class="body">
            The relevant content from the JSON should appear here once a title is clicked.
        </div>

    </div>
</div><!-- end wrapper-->

Answer №1

This is a sample code snippet that demonstrates the use of a helper function:

<div class="col-md-4">
    <h3 class="food">Food</h3>
    <ul class="ul-food">
        <li class="node{{ x.Nid }}" ng-repeat="x in titles | filter:isFood">
            <a href="" ng-click="select(x)"> {{ x.title }}</a>
        </li>
    </ul>
    <h3 class="food">Beverage</h3>
    <ul class="ul-bev">
        <li ng-repeat="x in titles | filter:isBeverage">
            <a href="" ng-click="select(x)"> {{ x.title }}</a>
        </li>
    </ul>
</div>
<div class="col-md-8">
    <div class="body">
        <h2>{{selectedItem.title}}</h2>
        <p>{{selectedItem.Body}}</p>
    </div>
</div>

In the controller, the following function is defined:

$scope.select = function(item) {
    $scope.selectedItem = item;
};

To see a live demo, visit: http://plnkr.co/edit/Zb3CxG0fKTpxfi3yA2Fv?p=info

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

Counting duplicate values associated with the same key in a JSON array using JavaScript/NodeJS

Hello everyone, I could really use some assistance in solving this issue. If this has already been asked before, please direct me to the original question. Currently, I am working with a JSON array of elements. For example: var data = [{"key":"Item1"},{ ...

Animating CSS with jQuery for a background image effect

I have the following JavaScript code : $(".linksColl a li").hover(function () { $(this).css({ "background-image" : "url(images/links/linkHover1.png)", "background-position" : "center center", ...

Unable to perform a default import in Angular 9 version

I made adjustments to tsconfig.json by adding the following properties: "esModuleInterop": true, "allowSyntheticDefaultImports": true, This was done in order to successfully import an npm package using import * as ms from "ms"; Despite these changes, I ...

Error: You forgot to close the parenthesis after the argument list / there are duplicate items

I have already tried to review a similar question asked before by checking out this post, but unfortunately, I still couldn't find a solution for my problem. Even after attempting to add a backslash (\) before the quotation mark ("), specificall ...

toggle back and forth between two div elements

I am trying to create a toggle effect between two divs, where clicking on one will change its border and header color to red while the other div disappears. I have tried using an IF statement in my JavaScript code, but it is not working as expected. Can so ...

center the view on the specified element

Utilizing ReactJs, I am developing a horizontal timeline that showcases dates. For instance, there is a list of 100 elements, each containing a date and text content. The dates are displayed horizontally using flex-direction="row" and overflowX ...

Transmitting a Wav file from JavaScript to Flask

I'm currently working on a JavaScript code that records audio from the browser and now I need to figure out how to send it back to Flask. start: function () { var options = {audio: true, video: false}; navigator.mediaDevices.getUserMedia(optio ...

Numerous navigable tabs all on a single page

After following a tutorial on YouTube to create scrollable tabs, I successfully implemented it using Bootstrap 5. However, I'm facing challenges in getting multiple scrollable tabs to function on a single page. Although the tabs and tab-content are fu ...

The chart is failing to update with the data it obtained through Jquery

Scenario: I want to populate a chart using data fetched by Jquery. $.getJSON("/dashboard/", function(data, status) { var test_data=data console.log(test_data) chart.data.datasets[0].data=test_data; ...

Get the selected row value from a Table and convert it into an array. Then, pass this array as a parameter to another function

I need help with logging and storing selected values from a Table component in React My Table component displays data from an API with checkboxes on each row. I'm using the <Table /> Material UI component for React. The documentation states th ...

Adding hyperlinks to images on a Project Page in Squarespace with the help of JQuery

I'm currently creating a website on Squarespace and facing a challenge with the project pages. While Squarespace allows me to add images with titles and descriptions, I do not have direct access to edit the page. Unfortunately, the platform does not h ...

When utilizing NavLink in React Router Dom for routing to an external link, a local host is automatically included in the prefix

I'm currently experiencing an issue with routing to an external link using React Router Dom 6.4. It seems that the localhost path is being appended to the URL. Can anyone provide insight on why this might be happening? localhost:3000/#/http://www.sav ...

The redesigned pie chart animations in d3 are experiencing glitches

Previously, I had a pie chart with fantastic animations. You can view it here: https://jsfiddle.net/tk5xog0g/29/ I tried to rebuild the chart and improve it based on my needs, but the animations no longer work as intended. I suspect this might be due to ...

Determining if a specific time falls within a certain range in JavaScript

I'm currently working on a Node.js application, but I have limited experience with Javascript. As part of my application, I need to implement validations for events and ensure that no two events can run simultaneously. To achieve this, I have set up ...

Downloading files from a Blob in NodeJS: A step-by-step guide

How do I retrieve a file from a BLOB column using NodeJS? Currently, I am utilizing the oracledb library for database operations and my code snippet is as follows: async function getFile(req, res) { let filename = req.params.filename; let file = a ...

Creating Stunning CSS Animations for a Slider Using SVG

Looking for help to create an SVG CSS animation for a slider using a mockup image. The animation will feature a balloon with a number value that zooms in and out from left to right or right to left. Currently stuck at the starting point and unsure how to ...

What could be causing the lack of animation in W3schools icons?

I've followed the steps provided and even attempted to copy and paste them. However, I'm experiencing an issue where the animation doesn't fully execute. Instead of the bars turning into an X shape, they reset halfway through the animation. ...

The React/Redux application is experiencing difficulties with API calls, as they are returning empty responses and the actions are not being triggered

Hey there, I'm currently working on a React Native app and running into some issues with making API get requests. It seems like the response is throwing an error and the action isn't executing properly. I'll share my code below, so if anyone ...

A guide on extracting content from a PDF file with JavaScript

Hey there, I'm experimenting with various methods to extract content from a PDF file but so far nothing seems to be working for me. Even when I try using pdf.js, it shows an error and I can't figure out why. This is the approach I've been tr ...

Utilizing Next.js to dynamically render a modal using data from the router's query parameters

I have an interactive feed that showcases cards. These cards trigger a modal to open, providing more details related to each card. The information is passed down two levels using props and everything functions smoothly until I incorporate Next Link for mod ...