How can I append json object to <a HTML element as list?

Question

0.00/5 (No votes)

See more:

Inside html view page there is two div.

HTML

<div id="divbindProject" class="col-sm-2"></div>
                           <div id="divbindProjectlist" style="display:none" class="col-sm-3">
                               <div>
                                   <a class="list-group-item active left-menu-head">Projects List</a>

                                   <a href="#" id="idProject" class="list-group-item"></a>

                               </div>
                           </div>

How can I append list of 'proejctname' from json object in to the <a id="idProject" as show below ?

[^]

What I have tried:

JavaScript

$("#btnAddProject").click(function (e) {
    var json = {};

    debugger;
    $.each($('#frmSubmitPremUserProject').serializeArray(), function (i, field) {
        json[field.name] = field.value || '';
    });

    $("#divbindProject").hide();
    $("#divbindProjectlist").show();

    $.each(json, function (i, field) {
        $("#idProject").append(field.name + ":" + field.value + " ");
    });
  
    var str = JSON.stringify(json);
    $("#hdPremUserProject").val(str);

});

After implement this code look like, but here inside list I want to bind list of Projectname from json object:-

[^]

How can I do this? please help me...

Posted 14-Mar-17 20:10pm

Rajesh Kumar 2013

Updated 14-Mar-17 20:35pm

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2017-03-14T20:35:00

Solution 1

use this

for (var i in json) {
             $("#idProject").append(i+ ":" + json[i]+ " ");
         }

instead of

$.each(json, function (i, field) {
       $("#idProject").append(field.name + ":" + field.value + " ");
   });

Posted 14-Mar-17 20:35pm

Karthik_Mahalingam

Comments

Rajesh Kumar 2013 15-Mar-17 3:34am

Sir, after implement your code, now its showing all json data. Please look below image. But I want to show only projectname inside <a html.

https://ibb.co/b4aJLa

Karthik_Mahalingam 15-Mar-17 4:00am

show some sample

Rajesh Kumar 2013 15-Mar-17 4:04am

Sir, this url showing json content. please look. Is it enough?

https://s7.postimg.org/n81g2vmgb/jsonnn.png

https://ibb.co/b4aJLa

Karthik_Mahalingam 15-Mar-17 4:09am

what is your expected output

Rajesh Kumar 2013 15-Mar-17 4:15am

Output is simple. Just show list 'Projectname'from json object. Everytime click on $("#btnAddProject") getting project details from $('#frmSubmitPremUserProject') this form. Then I am adding this json data to Hiddenfield and bind 'Projectname' inside <a each time. This is the plan.

Karthik_Mahalingam 15-Mar-17 4:16am

what is your expected output format.

Rajesh Kumar 2013 15-Mar-17 4:24am

<heading>Project List<heading>
Project1
Project2
Project3
Project4

Karthik_Mahalingam 15-Mar-17 4:31am

enclose the txt with pre tag < pre >

Rajesh Kumar 2013 15-Mar-17 4:35am

Excuse me sir, I can't understand. Actually json object contain list form items like Projectname , Projectlocation , etc. From the json object, how can I get Only 'Projectname'

Karthik_Mahalingam 15-Mar-17 4:37am

  for (var i in json) {
           if(i == 'Projectname')
            $("#idProject").append(i + ":" + json[i] + " ");
        }

Karthik_Mahalingam 15-Mar-17 4:33am

 $("#idProject").append( '<a herf="#" >' +  i + ":" + json[i] + " " + '</a>');

Rajesh Kumar 2013 15-Mar-17 4:39am

thanks sir, I will try and reply you.

Karthik_Mahalingam 15-Mar-17 4:39am

sure.

Rajesh Kumar 2013 15-Mar-17 4:49am

Thank you sir, Its working fine.

Karthik_Mahalingam 15-Mar-17 4:51am

cool :)