By soulsesa on

Hi ! I wish to display on my drupal 10 website : JSON data coming from another external web site.

http://url/sim2g/api/companies/all

I enabled JSON API module, and I installed Views Json Source module,  and I created a Views :

in Advanced section in views interface :  in the "Query settings: settings"

in JSON url field : I put the exetrnal json url

in the Row Apath field : I don't know what to put there

The purpose is to get the company information  and display them in a page on my drupal website using view.

I am not a coder !

someone can help?

⋅ Categories: Drupal 10.x

Comments

dan612’s picture

dan612 commented

Here is the help text for row apath:

Apath is just a simple array item find method. Ex:

['data' => 
	['records' => 
		[
			['firstname' => 'abc', 'lastname' => 'pqr'],
			['firstname' => 'xyz', 'lastname' => 'aaa']
		]
	]
]

You want 'records', so Apath could be set to 'data/records'.
Notice: Use '%' as wildcard to get the child contents - EG: '%/records', Also add the contextual filter to replace the wildcard('%') with 'data'.

So the apath depends on what your JSON data structure looks like and is used to drill into the array of objects you want to display. Once you have the target specified, you need to add JSON Fields to the view that match the KEY for each object. So in the above example with the apath set as either data/records or %/records, i would add JSON Fields for firstname and lastname which would get rendered in the view output.

soulsesa’s picture

soulsesa commented

Hi I will try it ! thank you

soulsesa’s picture

soulsesa commented

here is the structure : [
   {
      "id": 3082,
      "companycode": "0598",
      "companyregno": "2880598",
      "companyname": "SMARTINK LIMITED COMPANY",
      "country": {
         "id": 16,
         "cid": 6,
         "countrycode": "288",
         "ecoCountry": "Ghana",
         "abrev": "GH",
         "population": 27409000,
         "landsize": "238,535 km²",
         "gdp": "",
         "flag": "ghana.png",
         "currency": "GH₵",
         "slangid": 1,
         "langid": 1
      },
      "address": "Plot No.Ind/H1/68A/10, Zion city junction, community 26,Tema",
      "town": "Tema",
      "telephone": "243006955",
      "faxNo": "243006955",
      "email": "finance@smartinkltd.com",
      "website": "",
      "dateP": "2024-11-14",
      "staffid": 0,
      "active": false,
      "deleted": false,
      "realtime": "2025-01-06T18:57:50.000+00:00"
   },
   {
      "id": 3081,
      "companycode": "0596",
      "companyregno": "2880596",
      "companyname": "ROOFFA MANUFACTURING BUILDING MATERIALS LIMITED",
      "country": {
         "id": 16,
         "cid": 6,
         "countrycode": "288",
         "ecoCountry": "Ghana",
         "abrev": "GH",
         "population": 27409000,
         "landsize": "238,535 km²",
         "gdp": "",
         "flag": "ghana.png",
         "currency": "GH₵",
         "slangid": 1,
         "langid": 1
      },
      "address": "Mpintsin Sekondi , western region, opp Paco gas, P.O Box CT 1883, Cantonement",
      "town": "Sekondi ",
      "telephone": "245706723",
      "faxNo": "245706723",
      "email": "cudjoedaniel.13@yahoo.com",
      "website": "",
      "dateP": "2024-11-14",
      "staffid": 0,
      "active": true,
      "deleted": false,
      "realtime": "2024-12-17T07:02:21.000+00:00"
   },

.Hi want the : companyname and the ecoCountry (in country), the address  and the town

soulsesa’s picture

soulsesa commented

Also add the contextual filter to replace the wildcard('%') with 'data'?

how to do this ??

wombatbuddy’s picture

wombatbuddy commented

Also add the contextual filter to replace the wildcard('%') with 'data'?

how to do this ??

This cannot be applied to your JSON structure because:
1. No nested structure - data is directly in the root array.
2. No different "categories" of data - all objects are the same type (companies).
3. No alternative paths - there's only one path to the data.

The wildcard would be useful if your JSON looked like this: 

{
  "ghana": [
    {"companyname": "Company of Ghana 1"},
    {"companyname": "Company  of Ghana 2"}
  ],
  "nigeria": [
    {"companyname": "Company of Nigeria 1"},
    {"companyname": "Company of Nigeria 2"}
  ]
}

In this case we could set the following values:

Path: /companies/%
Apath: %
Contextual filter: Apath Replacement.

After that, if you enter path "/companies/ghana", you will get a list of companies in Ghana, and if you enter path "/companies/nigeria", you will get a list of companies in Nigeria.

But for your structure, a context filter called "JSON Field" (Name of the key in the JSON) can be used.
Let's say you want to filter companies by countrycode. Below are the settings to achieve this:

Path: /companies/%
Row Apath: /
Contextual filter (JSON Field): /country/countrycode

After that if you enter the path "/companies/288", you will get a data of a company with a countrycode 288.

soulsesa’s picture

soulsesa commented

Thank you so much !

I will follow the instruction 

soulsesa’s picture

soulsesa commented

Hi ! thank you for your help ! i tried the solution : but it doesn't work :

with your explanation I understand that the structure of the initial data is not well done .

But my question is there any solution to just display the list of companies without any contextual filter.

just to display them in a table: Country | Company Name| town | address. 
just display in a page without any contextual filter?

wombatbuddy’s picture

wombatbuddy commented

But my question is there any solution to just display the list of companies without any contextual filter.

just to display them in a table: Country | Company Name| town | address. 
just display in a page without any contextual filter?

The following settings should work for your JSON:

Since your JSON represents an array of objects at the root level, the Apath should be "/" (a simple slash):
Apath: /

After setting the correct Apath, you will be able to add the following JSON Fields to your view:

companyname - Key Chooser: companyname
ecoCountry - Key Chooser: country/ecoCountry
address - Key Chooser: address
town - Key Chooser: town.

soulsesa’s picture

soulsesa commented

Yes I do so : But I will check again

wombatbuddy’s picture

wombatbuddy commented

Since your JSON represents an array of objects at the root level, the Apath should be configured as follows:
Apath: /

After setting the correct Apath, you will be able to add the following JSON Fields to your view:

companyname - Key Chooser: companyname
ecoCountry - Key Chooser: country/ecoCountry
address - Key Chooser: address
town - Key Chooser: town.

soulsesa’s picture

soulsesa commented

I will try all this ! Thank you for the explanation!

ressa’s picture

ressa
he/him
commented

Thanks @wombatbuddy for your answers, as always they are very helpful.

I have tried to use them with an existing feed. There is https://www.jsonfeed.org/version/1/ with links to a few example feeds, such as http://shapeof.com/feed.json which can work well. The only difference is that those feeds all have /items as grouping element.

Here I am using both a standard filter, and contextual filter.

  1. Set feed

    Advanced > Other >  Query settings:

    JSON File
    http://shapeof.com/feed.json

    Row Apath
    /items

  2. Add Fields

    JSON: JSON Field (id)
    JSON: JSON Field (title)

  3. Filter criteria

    x Expose this filter to visitors, to allow them to change it

    Key Chooser
    title

    Filter identifier
    title

    Now you can search for "Acorn" and it shows items with that title.
    Bonus: Use Ajax under Advanced > Other for no reloads.

  4. Contextual filter

    Add JSON: JSON Field

    Key Chooser
    /title

    Under the Views' Path (use /shape/% if you require a value, otherwise show them all)
    /shape

    If you visit /shape all articles are listed, but under /shape/Say Hello to Acorn 8 just a single article is listed.