Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How add array of images (Flat Json) into data detail formatter? #5143

Closed
typo3ua opened this issue Jul 5, 2020 · 11 comments
Closed

How add array of images (Flat Json) into data detail formatter? #5143

typo3ua opened this issue Jul 5, 2020 · 11 comments
Labels
help-wanted Issues we need or would love help from the community to resolve.

Comments

@typo3ua
Copy link

typo3ua commented Jul 5, 2020

I need to add images into detail formatter but i do not know, how to do it.

І created my example here https://live.bootstrap-table.com/code/typo3ua/3780

I know that i can to add + row.images[1] + but I need to add formatted array something like <img src="' + row.images[...all images...] + '" alt="image"> if image is there...

I need your help...

thank you for advance

@typo3ua typo3ua added the help-wanted Issues we need or would love help from the community to resolve. label Jul 5, 2020
@UtechtDustin
Copy link
Collaborator

UtechtDustin commented Jul 5, 2020

but I need to add formatted array something like image if image is there...

Im not sure what do you mean with that.

If you try to display all images in the array, then just use a for each on row.images and build(+append) the img tags.

@typo3ua
Copy link
Author

typo3ua commented Jul 5, 2020

Thank you for reply...
now I can to display images as each separately

<img src=" + row.images[1] + " alt="image">
<img src=" + row.images[2] + " alt="image">
<img src=" + row.images[3] + " alt="image">

when i to add just

<img src=" + row.images + " alt="image">

OR

+ row.images + 

I get nothing

I just see only [object Object]

@UtechtDustin
Copy link
Collaborator

UtechtDustin commented Jul 5, 2020

row.images is an object so it makes sense that you get [object Object], you cant convert a object to a string.
That is the reason why i said you should use a for each e.g. https://live.bootstrap-table.com/code/UtechtDustin/3782

@typo3ua
Copy link
Author

typo3ua commented Jul 5, 2020

Yes it is already better but I get problem if images is not existing
image_detail
as in your example so as and in my example
image_detail_0

@UtechtDustin
Copy link
Collaborator

This was just a example..

If you need help then please describe exactly what you need and what you tried.

The issues above are simple to solve, just replace the images which not exists with the urls which i added on the first row...
for the rows without images you just have to check if there are images or not, if there are image use my example and if there are no images skip the image part..

@wenzhixin
Copy link
Owner

Working example: https://live.bootstrap-table.com/code/wenzhixin/3783

@typo3ua
Copy link
Author

typo3ua commented Jul 5, 2020

If images exists then there need to add if not exists then do not add? for example

If images not exists

 '<p><strong>ID</strong>: ' + row.id + '</p>',
 '<p><strong>Name</strong>: ' + row.name + '</p>',
 '<p><strong>Price</strong>: ' + row.price + '</p>',

### Add images after this line... ###

 '<hr>',
 '<span class="row">',
    '<span class="col"><img src="' + row.images[all] + '" alt="image"></span>',
 '</span>',

If images exists

 '<p><strong>ID</strong>: ' + row.id + '</p>',
 '<p><strong>Name</strong>: ' + row.name + '</p>',
 '<p><strong>Price</strong>: ' + row.price + '</p>',

@typo3ua
Copy link
Author

typo3ua commented Jul 5, 2020

yes it іs already closer .. but ,,, If images not exists .... blank tags remain
image_detail_1

@wenzhixin
Copy link
Owner

https://live.bootstrap-table.com/code/wenzhixin/3784

@UtechtDustin
Copy link
Collaborator

UtechtDustin commented Jul 5, 2020

@typo3ua
Maybe you should read the basiscs of html and javascript, before you try to use libraries.
This is no issue of the bootstrap-table, the problems which appears are easy to fix (as i already told).
Just use a if and if there are no images in the data dont append the images AND the <hr> tag to the html.

@typo3ua
Copy link
Author

typo3ua commented Jul 5, 2020

Yes I know ... you are right i do not have deep knowledge in JS ...but I thank all so much

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help-wanted Issues we need or would love help from the community to resolve.
Projects
None yet
Development

No branches or pull requests

3 participants