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

When the response is anything other than a String, the afterCompletion method of the HandlerInterceptor interface is executed prior to the response being completely committed

While troubleshooting an issue, I encountered a peculiar situation in my Spring Boot application. I have a GET REST endpoint that returns a specific POJO: @GetMapping(value = "/dto", produces = MediaType.APPLICATION_JSON_VALUE) public ResponseE ...

javajsonspringspring-bootrest

What are some techniques for streamlining this code with Typescript?

I am currently working with the following code snippet: let doNavigate = this.currentScreen === removedFqn; if (doNavigate) { location.reload(); } Does anyone have any suggestions on how I can simplify this code using Typescript? ...

javascriptangulartypescript

Discovering the Desired Key within a JSON Structure

For my c# project, I am utilizing the Json.net Library. Within this library, I have a lengthy JSON object with multiple subfields. Here is an example of the structure: { "count": 10, "Foo1": [ { "id": "1", "name": "Name1" }, { ...

c#jsonjson.net

Using SCSS to apply a class in Next.js

Currently, I am working on a project using Next.js and implementing the SCSS module procedure for styling. An example component directory structure is as follows: SampleComponent -> index.tsx and SampleComponent.module.scss The code in SampleComponent ...

javascriptcssreactjssassnext.js

Troubleshooting problem with JavaScriptSerializer when parsing deserialized JSON data

Recently, I encountered a challenge while working on a program that involves extracting a specific value from a WebRequest response sent in JSON. I am using JavaScriptSerializer to parse the values but facing some difficulties. Here is a snippet of the cod ...

c#json

Steps to reset default behavior after using event.preventDefault()

I came across a similar question on this post, but the solution provided did not work for my specific needs. So, I decided to share some example code and provide a bit of explanation... $(document).keypress( function (event) { // Pressing Up o ...

javascriptjqueryevent-handlingevents

Unable to access MongoDB documents using NodeJS/Express

I can't seem to figure out why I am not receiving any results from a GET call I am testing with Postman. Let's take a look at my server.js file: const express = require("express"); const mongoose = require("mongoose"); const ...

javascriptnode.jsmongodbmongoose

Unable to loop through the "dataList" retrieved from a service call to the java backend within an Angular 9 application

After receiving JSON data from a Java backend service called houseguidelines, the information is sent to an Angular application via a service call. I am attempting to iterate over this returned JSON data and add it to an array I have created. Unfortunately ...

javascriptangulartypescriptangular9

Learning to monitor for incoming messages in a Discord channel from the ground up

I am eager to understand how to detect new messages exclusively using requests made to the Discord API. While I have mastered loading messages by fetching , I am struggling to grasp how to listen for incoming messages. It appears that this feature is not ...

javascriptnode.jsdiscordxmlhttprequestfetch

Using "array_agg" in a "having clause" with Sequelize

I am facing a particular scenario with my database setup. I have three tables named computers, flags, and computerFlags that establish relationships between them. The structure of the computerFlags table is as follows: computerName | flagId computer1 | ...

javascripttypescriptpostgresqlsequelize.js

Getting a result from a Node.js function that includes a database query

Currently, I am diving into the world of Node.js and delving into working with MySQL connections. There is a particular function that should retrieve a set of rows from the database successfully. However, after retrieving these rows, I am unsure of how to ...

javascriptnode.js

Is it possible to send a message from a child iframe to its parent using HTML5 cross-browser compatibility

I've been following this tutorial on a video-sharing website, which demonstrates how to securely pass messages between an iframe and its parent. The tutorial can be found at a specific URL. To achieve this functionality, you would end up with a simila ...

javascripthtml

Implement lazy loading of content on scroll in Grails framework

Currently, I am uploading images and displaying them in a gsp view. My goal now is to implement a functionality where the images load as I scroll down on the page. A friend suggested using jQuery to make an ajax call for this. Can someone please provide g ...

javascriptjqueryajaxgrails

Using GraphQL in React to access a specific field

Here is the code snippet I am working with: interface MutationProps { username: string; Mutation: any; } export const UseCustomMutation: React.FC<MutationProps> | any = (username: any, Mutation: DocumentNode ) => { const [functi ...

javascriptreactjstypescriptgraphql

Unable to display socket data in Angular js Table using ng-repeat

div(ng-controller="dashController") nav.navbar.navbar-expand-sm.navbar-dark.fixed-top .container img(src='../images/Dashboard.png', alt='logo', width='180px') ul.navbar-nav li.nav-item ...

javascriptnode.jsangularjssockets

Utilize JSON categories to assign groups to TextFields or Selects according to a JSON data attribute

I have retrieved multiple JSON groups from an API, each containing one or more questions objects. My goal is to display each question along with its corresponding response in a MUI TextField or Select component, based on the value of QuestionType. Current ...

javascriptreactjsjsonmaterial-ui

Is it possible to ensure that an asynchronous function runs before the main functional component in React js?

My challenge involves extracting data from an API by manipulating a URL. Specifically, I must retrieve a specific piece of information upon page load and then incorporate it into my URL before fetching the data. var genre_id; var genre; const MOVIE_URL = ` ...

javascriptreactjsasynchronousreact-hooks

A guide on extracting values from a PHP database in Json format

In my project, I need to implement a Matrix tree view using JSON. I am planning to fetch PHP values in JSON format. Can anyone guide me on how to achieve this? Currently, I have a static matrix tree structure but I want it to be dynamic. Thank you in advan ...

phpjson

Creating a comparison display using ng-repeat

I have a JSON file that contains revision and history information about a modified entity, including its old and new values. The diff is generated using the jsondiffpatch library and I have parsed it further to create the final JSON format for rendering. ...

javascriptjsonangularjs

JavaScript generated by PHP not functioning on IE version 7 and above

I've been experimenting with JavaScript generated from PHP, but I've run into issues specifically with Internet Explorer. While other browsers such as Firefox and Chrome have successfully processed and executed the JS code. As an example, you ca ...

phpjavascriptheadercontent-type