0

I have this object :

      const list = {
        id: 5,
        name: "customer name",
        projects: [
          {
            id:2, 
            title: "My project One",
            studies: []
          },
          {
            id:4,
            title: "My project Two"
          }
        ]
      }

And I would like to be able to access a particular project in this object. There are only two of them here, but we imagine there could be more. How can I access a particular project by its ID? How can i do this ? Thanks

chtouk
  • 303
  • 4
  • 13
  • 1
    Is this in Java or Javascript? The two are very different. I ask because you're object isn't in the JSON structure typical for Javascript, and you mention decomposition, which is again not a thing in JS (there is object _destructuring_, but I don't see how it would be useful in this case). – Toastrackenigma Mar 24 '21 at 08:59
  • It is in javascript. The object I pasted is from the state in my app Vuejs – chtouk Mar 24 '21 at 09:00
  • @Toastrackenigma this looks nothing like Java. It looks like the output from the console copied over. – VLAZ Mar 24 '21 at 09:01
  • It's an extract of a state in my app Vuejs. It's data privded by my api – chtouk Mar 24 '21 at 09:03
  • @VLAZ Right, yeah I haven't used Vue so haven't seen this structure before (and I think Java has a similar one?), and I'm assuming that's where the decomposition comment comes from, as that also made me wonder. I think adding the Vue tag will reduce any confusion. – Toastrackenigma Mar 24 '21 at 09:06
  • It's the same like this : { name: "Customer 1", projects: [ { id: 1, title: "Name of the project" }, { id: 2, title: "Name of the project 2" } ], } – chtouk Mar 24 '21 at 09:12
  • @Toastrackenigma 1. no Java looks vastly different 2. whether it's Vue or not is irrelevant. It's just an object representation in the console. Consoles are free to format as they see fit and often just show extra information. [Simple example](https://i.imgur.com/4DcUuCN.png). There is nothing Vue specific happening here, the tag is unwarranted. – VLAZ Mar 24 '21 at 09:14
  • Can we focus on just it is an object and I wish to access a part of this. We can just forgot the code above and focus on this simplified version : const list = { id: 5, name: "customer name", projects: [ { id:2, title: "My project One", studies: [] }, { id:4, title: "My project Two" } ] } – chtouk Mar 24 '21 at 09:16
  • Can you first clarify the object shape? Obviously people don't understand. If you can post a proper JS object with valid JS syntax, we don't need to go back and forth in the comment section. You know, you can edit your original question, instead of amending with comments. – hackape Mar 24 '21 at 09:26
  • I clarify my question. Sorry I didn't remember that I can edit my question – chtouk Mar 24 '21 at 09:33
  • `const getProjectById = (list, id) => list.projects.find(project => project.id === id)` – hackape Mar 24 '21 at 09:41
  • @VLAZ Java _code_ looks very different, some Java serializations do actually look quite similar to OP's original object representation – Toastrackenigma Mar 24 '21 at 10:01
  • @Toastrackenigma and some JS object descriptions in the console look like in the OP. The bog standard default behaviour in the FF console is very similar, as I showed you. There is no standard for what consoles would show, so they can vary in output but the given representation is not uncommon at all. *Some* Java serialsations *might* look *similar* to this but that's a lot of conditionals that need to be satisfied. And even if they do, you'd rarely find arrays of objects in Java. It'd be lists of specific classes, rather than Object. I'm not sure why you're so dedicated to claim Java here. – VLAZ Mar 24 '21 at 10:13
  • @VLAZ I only wondered at the beginning, before OP clarified, because a common Java format uses the `@` signs in a similar way, and specifically types the size of the arrays in the same way. That + decomposition rather than destructuring made me question it as just a quick one-over thing because a non-zero number of posts on the front page do get the two mixed up. I guess the added confusion was that at first I didn't know if this was actually some sort of format / representation used specifically by Vue (which may have custom accessors that could solve the question), or just console output. – Toastrackenigma Mar 24 '21 at 10:20

1 Answers1

0

You mention in the comments that the data is returned from an API. You can remap that data when it is received so that rather than a list of projects, it is an object keyed by the id field, which I assume is unique.

const allProjects = list.projects.reduce(
    (collected, current) => {
      return { ...collected, ...current };
    }, {})

Failing that, you could use Array's filter to find the project you require:

const idToFind = 4;
const project = list.projects.filter( project => project.id === idToFind );
Lee Goddard
  • 10,680
  • 4
  • 46
  • 63