JavaScript - Navigating through JSON object in reverse (from leaf to root) direction

    FamilyTree= {
    "name":"Family",
    "photo":"images/family.jpg",
    "members":[
      {
      "name":"Parent",
      "photo":"images/parent.jpg",
      "relationships":[
        {
        "name":"Spouse",
        "photo":"images/spouse.jpg"
        },
        {
        "name":"Child",
        "photo":"images/child.jpg",
        "relationships":[
            ...
          ]
       }]
}

I am looking for a way to navigate both forward and backward within the family tree. When a user selects a specific member, I want to display the entire tree related to that individual. I have successfully implemented forward traversal using Javascript, but I am now seeking advice on how to enable backward traversal as well.

javascriptjsonobject

Answer №1

If you want to try something different, consider using jquery parseXML and having the server return an XML instead of JSON. As explained in this article, parsing XML can provide access to a jQuery instance object that allows for easy traversal of the XML document model using various jQuery functions.

The jData variable now contains the XML document object model (#document) which can be explored using jQuery's useful functions like find(), children(), parent(), and more.

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

Creating a window.variable in a jQuery ajax callback using CoffeeScript

This particular project is built using rails and backbone-on-rails framework. Despite my efforts, I have been facing an issue with setting a global variable in a response callback function. Here's what I have attempted so far: 1) Initialization of t ...

javascriptjqueryajaxbackbone.jscoffeescript

Most Effective Method for Switching CSS Style Height from "0" to "auto"

After coming across a question with no answer that suited my needs, I decided to share the solution I created. In my case, I had a hidden generated list on a page which was initially set with a CSS height of "0" and then expanded upon clicking by transit ...

javascripthtmljquerycssperformance

Mapping objects in an array with Javascript

This code snippet is intended for a React Native Chat app. The structure of my data should look something like this: const chatData = [ { id: 1, name: 'John Doe', messages: [ {text: 'Hello', sentAt: 'time here' ...

javascriptreactjsreact-native

Is it possible to rewrite this function recursively for a more polished outcome?

The function match assigns a true or false value to an attribute (collapsed) based on the value of a string: function match(children) { var data = $scope.treeData for (var i = 0; i < data.length; i++) { var s = data[i] for (var ...

javascriptjqueryangularjs

What is the best way to apply a jQuery function to multiple div elements simultaneously?

I am looking to implement a show/hide feature for a <div> using JavaScript and DOM properties. The idea is to use JavaScript's onclick() function with two buttons, show and hide, each in their respective <div>. Here is how it would ideall ...

javascriptjquery

using jquery to fill in fields in a table form

I am currently working with a basic html table that initially has two rows, each containing 2 form fields. Users have the ability to add more rows to the table by following this process: $('a#addRow').click(function() { $('#jTable tr:la ...

phpjavascriptjqueryhtmlforms

Unable to utilize Stats.js with @angular/cli version 1.4.4

Attempting to utilize @types/stats with @angular/cli following the guidance at https://github.com/angular/angular-cli/wiki/stories-third-party-lib. However, encountering a tslint error when trying to import * as STATS from 'stats.js'. [ts] Modul ...

javascriptangulartypescriptthree.jsangular-cli

Breaking down React.js element

This Navigation component handles various functionalities related to user authentication and routing. import React from 'react'; import {Navbar, Nav, NavItem, Modal, Button, FormControl} from 'react-bootstrap'; import {BrowserRouter, L ...

javascriptreactjs

Error in fullCalendar where events are appearing on incorrect days in the month view of the current month

My fullcalendar plug-in is causing some trouble. I'm trying to show events in the monthview of the calendar, but when I'm in the current month, events on the same day of the week are not displaying correctly. They end up showing on the Sunday blo ...

javascriptasp.netjsonfullcalendar

Error found in event.PreventDefault()

I'm currently implementing Twitter Bootstrap on my application. I added e.preventDefault for the link button within $(document).ready(), but it doesn't seem to be functioning properly. Below is the code snippet: Master page: <a id="lnkLogou ...

javascriptjqueryasp.nettwitter-bootstrap

Mastering the art of transmitting and receiving Json data

I need to establish communication between a client (built on xamarin.android) and a server (asp.net web forms). The goal is to send a JSON POST request from the client to the server in order to update the database. While I have managed to create and seri ...

asp.netjsonpostasp.net-web-api

Access Azure-Active Directory through cypress tests

Currently, I'm faced with the task of creating automated tests for an application that requires login to Azure Active Directory. These tests are being written using Cypress and TypeScript. In search of a solution, I am seeking advice on how to execute ...

javascriptnode.jstypescriptazure-active-directorycypress

What is the significance of incorporating 'Actions' as data within the Redux framework?

According to Redux documentation, creating actions and action creators is necessary. Here's an example: function addTodo(filter) { return { type: SET_VISIBILITY_FILTER, filter } } Next step is to write reducers, like this: function t ...

javascripttypescriptredux

Transforming a Pandas DataFrame into a specialized nested JSON structure

I need to convert a Pandas Dataframe into nested json format. I attempted using the to_json function, but it only converts the entire dataframe as key-value pairs. I am unsure of how to achieve a nested json structure like this. Any assistance would be gre ...

pythonjsonpandas

Error with Chakra UI and React Hook Form mismatched data types

Struggling with creating a form using ChakraUI and React-Hook-Form in TypeScript. The errors seem to be related to TypeScript issues. I simply copied and pasted this code from the template provided on Chakra's website. Here is the snippet: import { ...

javascriptreactjstypescriptreact-hook-formchakra-ui

Adjust the badge's color based on the status retrieved from the jQuery AJAX call

I've been working on retrieving data from an endpoint through a get request, and I'm looking to adjust the color of the request status based on the response. $.ajax({ type: 'GET', url: 'api/v1/service/tax', succe ...

javascriptjqueryarraysajaxfrontend

Retrieve and decode JSON data using Swift

It's puzzling why this isn't functioning correctly... whenever I run it, an error appears in the console: [CONNECTION] OK, data properly downloaded [ERROR] There was a parsing error with the json data nil Perhaps it's the JSON format in th ...

iosjsonswift

The process of accessing a JSON object within an AJAX onreadystatechange function

Currently, I have a servlet calling an ajax request which sends back a JSON object in response. My task now is to receive this JSON in JSP and display the data in table format. Can anyone provide assistance with this? Here is my current code snippet: The ...

javajqueryajaxjsonservlets

Tips for organizing a JSON Array

In order to display my stats from a JSON file sorted by "verbruik", I have learned how to sort an array when it has just one piece of information like 1 = "12313", 3 = "2124". The entire JSON file is stored in a variable: for (var index in data) { va ...

jqueryarraysjson

Issue with sending data through $http PUT

I am currently in the process of developing a basic auction platform. After displaying my products on the website, I now want to introduce a new feature - making offers. In order to implement this functionality, I have used ng-dialog in my controller to op ...

angularjsjsonnode.jsmongodb