Append JSON data to jquery div object

JavaScript
1

Hello Folks,

Below is sample JSON data:

   {[
    {storename: "abc", loc: "xyz", distance: "2", time: "00:00"},
    {storename: "abc", loc: "xyz", distance: "2", time: "00:00"},
    {storename: "abc", loc: "xyz", distance: "2", time: "00:00"},   
    {storename: "abc", loc: "xyz", distance: "2", time: "00:00"},
    {storename: "abc", loc: "xyz", distance: "2", time: "00:00"},
    {storename: "abc", loc: "xyz", distance: "2", time: "00:00"},
    {storename: "abc", loc: "xyz", distance: "2", time: "00:00"}
]};

Below is Div structure:

<div class="pane">
<h3>Test</h3>
<p><span class="logo">test</span> 3 mi</p>
<p class="stores-desc">Testing</p>
<p class="stores-timing"><strong> Test &nbsp;</strong>  0:00 am - 0:00 pm &nbsp;<strong>tst</strong>  0:00 pm  &nbsp;<strong> tstnbsp;</strong>  0:00 am - 0:00 pm</p>
<div class="store-checkin">Click here</div>
</div>

Now I have to create a div object in jquery with above structure and as well as need to append the JSON data in the appropriate tags. Does anyone have any idea on this implementation.

As simple need to create a div Object in jquery and append/pass the JSON data into it(appropriate tags).

Thanks.

2

that JSON is invalid. an object must have a key.

3

Know that just on the fly I had mention the sample one(forgot about valid or invalid), it’s not the final and appropriate one, just I wanted to know how to pass the values to jquery div object and how can we create jquery div object.

4

first thing were to think of how you want to display your JSON data using HTML elements.

http://api.jquery.com/jquery/

5

I am new to this may be I am confusing anyhow leave about JSON data fir the time being, can you help out how to create the div structure usign jquery chaning and with minimal number of line of code.

6

have a look at the examples given in the link.

7

First, let’s assign your data structure to a variable, with some different values so that we can tell that it’s working:

var storesInfo = [
    {storename: "abc", loc: "zyx", distance: "2", time: "00:10"},
    {storename: "def", loc: "wvu", distance: "3", time: "00:20"},
    {storename: "ghi", loc: "trs", distance: "4", time: "00:30"},   
    {storename: "jkl", loc: "qpo", distance: "5", time: "00:40"},
    {storename: "mno", loc: "nml", distance: "6", time: "00:50"},
    {storename: "pqr", loc: "kji", distance: "7", time: "01:00"},
    {storename: "stu", loc: "hgf", distance: "8", time: "01:10"}
];

You can use template literals as a solution, where ${storeInfo.storename} is used within the literal (contained within ` quotes).

A getStoreDetails() function will take one of those arrays, and return the div structure with the desired store info plugged in to it:

function getStoreDetails(storeInfo) {
    return `<div class="pane">
<h3>${storeInfo.storename}</h3>
<p><span class="logo">${storeInfo.loc}</span> ${storeInfo.distance} mi</p>
<p class="stores-desc">Testing</p>
<p class="stores-timing"><strong> Test &nbsp;</strong>  
  0:00 am - 0:00 pm &nbsp; <strong>tst</strong>  ${storeInfo.time} pm  &nbsp;
  <strong> tst&nbsp;</strong>  0:00 am - 0:00 pm</p>
<div class="store-checkin">Click here</div>
</div>`;
}

Alternatively you could also do this using "<h3>" + storeInfo.storename + "</h3>" etc.

We’ll want to show those stores somewhere:

<div class="stores">
</div>

function showStore(storeDetails) {
	document.querySelector(".stores").innerHTML += storeDetails;
}

We can now connect this all together by using the array info to create the store details, and send them to the showStore function.

storesInfo.map(getStoreDetails).forEach(showStore);

You can see a working example at https://jsfiddle.net/pmw57/ancj4L05/

8

@Paul_Wilkins: Appreciate your help and patience as well :wink:.

You have solved half of my task.

Thanks once again.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.