Using JSON data source for offline pages

I really need to know more about using a JSON file to do simple elements replacements on many pages. For instance. if I place the same card in same place with a different image and title on each new page, how do I go about it?
Thanks,
John

Hi John,
As shown in the docs, you replace static content on your page with the data coming from from the JSON file.

Hi Teodor,

Yes, I understand the process and what I need to do. However, when I attempt to go through the steps outlined in the document: Working with JSON Data, I can’t figure out how to do the last few steps in building the file.

I would like to see an article on the specific steps on a specific project using cards.

Thanks,

John

It would really be useful if you can explain which steps exactly are unclear for you, so that we can help.
It does not matter if it is cards, divs, tables - it’s always the same.

Hi Teodor,
I’ll give it a shot.

First of all, my JSON file is empty.

Next - here is a screenshot of as far as I get in replicating the example in the model,

Next - there is a screenshot of where I leave the example?

There seems to be a missing step. I never get to see the page with the items on it that I am replicating. And the article talks about seeing the items I am replicating, and I do not see them. Nor does it tell me how to get them into the JSON file??

Sure hope this helps.
John

John,
You cannot use an empty JSON file!
It’s like trying to pull data out from a database which has no tables in it.

Your JSON file must contain your data in order to use it.

OK. That explains a lot. But I don’t know what the data needs to look like. I thought that the Wappler was inserting the data into the JSON file? I’ll be glad to build the file, but what is the format?

Wappler does not insert data into JSON files. The JSON Data Source component in Wappler reads the data from JSON files.
You should have at least some basic knowledge in order to create your json files. I suggest you to start from the very basics:

https://www.w3schools.com/whatis/whatis_json.asp
https://www.w3schools.com/js/js_json_syntax.asp

However i am not sure if you will be able to advance much easily, if you know nothing about JSON/data.

Hi Teodor,
What does the JSON file for your example look like? I tried to use a sample from the Real Estate Demo, but I didn’t know how to format the information that I had placed into my prototype.

It seems like using a paragraph is about as simple JSON as I need to learn on.

Please refer to the links i provided. I think they explain the basics of JSON data and formatting it pretty well. That’s not really related to Wappler, as like designing your Database tables is not.

Can someone in the community send me a sample JSON file so that I can get on with trying to learn rest of the steps in your article.

As pointed out in the url which was provide the below is a small sample of what a json file might look like and contain:

{
“employees”:[
{“firstName”:“John”, “lastName”:“Doe”, “Age”: 23, “Gender”: “Male”},
{“firstName”:“Anna”, “lastName”:“Smith”, “Age”: 27, “Gender”: “Female”},
{“firstName”:“Peter”, “lastName”:“Jones” , “Age”: 43, “Gender”: “Male”}
]
}

You would just name the file: employees.json

To be honest I’m not sure you should be manually producing a json file unless it was huglely simple because if its not constructed properly your page will break. Its ok for testing purposes.

The idea is that the json file formatting is automatically produced via a database where there is less lilley that the information could be badly formatted.

You can generate a JSON file here: https://mockaroo.com/

However i still recommend learning the basics as otherwise this will lead to more troubles.

I’m not trying to build the final product here! I’m trying to determine whether Wappler is the correct tool for a new product in new business. To do that, I must develop an opinion whether the company is firmly committed to this type of application. And, to form an opinion, I need to see it in action. So, I have built a page that has a picture on it. There will be hundreds of pages exactly like it, except for the picture and a title and a description about the photo. It seems to me that this is just what the JSON file was intended for. But, so far I cannot get the Wappler work with it. I understand that I will need to hire a JSON expert to efficiently create the files, either from a database or labor. I already have a database with thousands of photos. I just need to get a full understanding of whether (and how) the Wappler will work for us.

Hi the_coder… Thanks for the sample. I’ll see if I can get it converted to work on my prototype.

@jaydigital yes, the JSON data tools supplied in Wappler do exactly what you need. This can be seen in the docs i already sent you in a couple of your topics. This can be seen in the dynamic Real Estate demo.

However Wappler has nothing to do with HOW your data gets into the JSON - whether you will be dynamically generating it via some PHP code or exporting it from your hosting control panel… or manually entering it.

I am just not sure how familiar are you with web development, as the way you ask your questions it seems to me you expect that Wappler will magically get data from somewhere and place it in the JSON. No, that is not the case, the same way as your Adobe PDF reader does not put the data in your PDF files. It just reads the data from there.

Hi Teodor,
I believe that I told this community I do not possess software development skills in one of my first posts. But I have been designing websites with tools like Dreamweaver, Magento and BroadVision for a long time. But Magento and Broadvision had databases. I have been a DMXzone customer for years. I have designed, built and hosted over 200 e-commerce sites in the cloud for large manufacturing dealerships and my first was in 1994. I started up the first Application Service Provider in Minneapolis in 1999. I am a one-man business and have made a living with software tools for 35 years. But, I did not know that software-developer credentials were a requirement for being a Wappler subscriber. I thought it was a leading edge tool for DESIGNERS. Not all designers are coders or DBAs. Wappler promotions emphasize that the Community is here to help people learn to use Wappler and apply it to our needs. That’s what I am trying to do. Please be patient with my shortcomings. I will overcome them!

I was just trying to explain that dealing with this specific task (JSON files) requires you to have at least basic knowledge of what the JSON format is and how to create/generate/fill your files with your data, before starting to use these JSON files in Wappler.

Basic knowledge of JSON files is exactly what I’m trying to get! I’m actually learning pretty fast since I never heard of them before the weekend.:sweat_smile:

1 Like

As you’re not familiar with JSON, it may not be obvious that a file in JSON format is just plain text - ie you can open it in any text editor (including Wappler) and see exactly how it’s structured. You will then be able to decide how to create similarly-structured files for your own purposes.

If you’ve managed to set up the Dynamic Real Estate demo then you should well on the way to getting to grips with how it works. You can view the formatted HTML in one tab and the JSON data in another.

Amazing resource that mockup json generator! Cool thank you!

1 Like