Content: How to filter using JSON object instead of array as a source?

[AdrianoCahete]

Using the JSON as source, I see that we can filter and search by key. But how I do this if my JSON source is not an array, but an object?

My current source is something like that (you can ignore the id, I don't want to show/search for) and I'm following the documentation (list works well):

Edit: Search does not work either.

[
  {
    "0": {
      "path": "xxxxxxxxxxxxxxxxxxxx",
      "type": "file",
      "sha": "1111111111111111",
      "url": "https://xxxxxxxxxxxxxxxxxxxx"
    },
    "1":  {
      "path": "yyyyyyyyyyyyyy",
      "type": "file",
      "sha": "00000000000",
      "url": "https://yyyyyyyyyyyyyyy"
    }
  }
]

[benjamincanac]

Hey @AdrianoCahete,

Could you provide an example of the query you're trying to achieve?

You're JSON source files should be objects, then you can search and filter on a specific directory:

// Where
await this.$content().where({ url: 'https://xxxxxxxxxxxxxxxxxxxx' }).fetch()
// Search
await this.$content().search('url', 'https://xxxxxxxxxxxxxxxxxxxx').fetch()

$content() means you're fetching on the root directory.

[AdrianoCahete]

Could you provide an example of the query you're trying to achieve?

I'm following the documentation video:

async fetch() {
    this.pkglist = await this.$content('packages')
    // .only([ 'path', 'sha', 'url' ])
    .search(this.q)
    .fetch()
  }

Only in this example doesn't work, this is why is commented. Search is here, but doesn't work neither.
Plain default list works well.

If I change to .search('path', this.q) on this code, nothing is returned too.

[Atinux]

Please create a reproduction based on https://codesandbox.io/s/nuxtcontent-demo-l164h? so we can help you on this

[AdrianoCahete]

Please create a reproduction based on

Sure: https://codesandbox.io/s/nuxtcontent-demo-mjy0s

[heliomsolivas]

I'm having the same problem, any news about this issue?

[benjamincanac]

Hey @AdrianoCahete,

At the moment, JSON arrays are not supported, you should make a file by object.

[heliomsolivas]

@benjamincanac is it possible to search inside a JSON like this?

{ "list": [ { "name": "Test0", "city": "A", }, { "name": "Test1", "city": "B", }]}

[AdrianoCahete]

At the moment, JSON arrays are not supported, you should make a file by object.

Do you have any bug id so I can track the progress?

[rajesh-h]

@benjamincanac is it possible to search inside a JSON like this?

{ "list": [ { "name": "Test0", "city": "A", }, { "name": "Test1", "city": "B", }]}

I am also stuck on the same stage. I need this filter/where desperately :(

[benjamincanac]

Hey guys,

To make sure I understand correctly, what you want is a single json file containing an array, so you can search and get a single item from it?

So flattening the array would do the trick?

[rajesh-h]

@benjamincanac in my case i have list of json documents( different_different_articles_slug.json ) inside content folder.

These json files have one attribute called categories. this is a array with objects.
categories = [ {'slug':'123', category:'1 2 3'}, {'slug':'ABC', category:'A B C'}, {'slug':'XYZ', category:'X Y Z'}]

I want to send a where query where it should bring all posts which has categories.slug = 'ABC'

It should return the lists of articles matching his category slug.
qry = this.$content().where({ categories: { $contains : 'How To Filter/Match category slug Here' } })

as you would have guessed this.$content() all the articles inside content folder in json format.

Earlier I had categories in a flattened list like
categories = ['A B C', '1 2 3', 'X Y Z']
so I queried like this.
qry = this.$content().where({ categories: { $contains : 'A B C' } })

This having space in the category names and referencing that as kind of slug resulted in lot of 404 errors when I generate static website using nuxt export. I have raised this here

[AdrianoCahete]

what you want is a single JSON file containing an array, so you can search and get a single item from it?

The original problem that I had was one file, yes.

This comes from a JSON result from Github API. I'm filtering to get all the values inside the tree (using your repo as example):
https://api.github.com/repos/nuxt/content/git/trees/bef85f4bf2018cf59ada8188bb65dc05feb313a2

{
  "sha": "bef85f4bf2018cf59ada8188bb65dc05feb313a2",
  "url": "https://api.github.com/repos/nuxt/content/git/trees/bef85f4bf2018cf59ada8188bb65dc05feb313a2",
  "tree": [
    {
      "path": ".editorconfig",
      "mode": "100755",
      "type": "blob",
      "sha": "9142239769f522e59cfcebe8ae5d57dc4dc90822",
      "size": 207,
      "url": "https://api.github.com/repos/nuxt/content/git/blobs/9142239769f522e59cfcebe8ae5d57dc4dc90822"
    },
    {
      "path": ".eslintignore",
      "mode": "100644",
      "type": "blob",
      "sha": "5588d5dbcc3e98d2e32f89dfe9ec6349ef2a9ac8",
      "size": 67,
      "url": "https://api.github.com/repos/nuxt/content/git/blobs/5588d5dbcc3e98d2e32f89dfe9ec6349ef2a9ac8"
    },
    {
      "path": ".eslintrc.js",
      "mode": "100644",
      "type": "blob",
      "sha": "52893a992e1b94f2706880e867e2eab96f4be00a",
      "size": 321,
      "url": "https://api.github.com/repos/nuxt/content/git/blobs/52893a992e1b94f2706880e867e2eab96f4be00a"
    },
(...)
],
  "truncated": false
}

I'm filtering to get all the types = blob and everything that is inside of the tree key.
This gives me something like this:

[
    {
      "path": ".editorconfig",
      "mode": "100755",
      "type": "blob",
      "sha": "9142239769f522e59cfcebe8ae5d57dc4dc90822",
      "size": 207,
      "url": "https://api.github.com/repos/nuxt/content/git/blobs/9142239769f522e59cfcebe8ae5d57dc4dc90822"
    },
    {
      "path": ".eslintignore",
      "mode": "100644",
      "type": "blob",
      "sha": "5588d5dbcc3e98d2e32f89dfe9ec6349ef2a9ac8",
      "size": 67,
      "url": "https://api.github.com/repos/nuxt/content/git/blobs/5588d5dbcc3e98d2e32f89dfe9ec6349ef2a9ac8"
    }
]

It is not a problem to do another filter, but I need to know what I need to filter/remove to content works.

[benjamincanac]

Hey,

I just made a PR to allow nested properties with dot-notation (#60).

This will allow you to make queries like:

this.$content().where({ 'categories.slug': { $contains : 'A B C' } })

[rajesh-h]

@benjamincanac apologies for my limited knowledge. How do I update my package to your PR?

I did the below on my project home holder.
yarn add https://github.com/nuxt/content.git#feat/nested-properties

then yarn dev Am I missing something? I could not filter as expected.

my Github Repo is here
SandBox - Here

Clicking on category say 'Cakes & More' should take to category page with related articles.

Category Logic is present here

[benjamincanac]

Hey @rajesh-h

You can check the NPM documentation on GitHub URLs.

In this case, I think you could do:

{
  "dependencies": {
      "@nuxt/content": "nuxt/content#feat\/nested-properties"
   }
}

Then install it with yarn.

Hope this helps!

[benjamincanac]

@rajesh-h In your example, did you defined the nestedProperties option?

In your nuxt.config.js you need to add:

content: {
  nestedProperties: ['categories.slug']
}

[rajesh-h]

@benjamincanac Thank you for the yarn tip.

content: {
nestedProperties: ['categories.slug']
}

This did the trick. Thank you very much. You saved me from changing my backend structure.