How to append Ajax Json respond to html?
Question
I use ajax get a json like this:
{"dataStore":"[{\"delete_flag\":\"false\",\"id\":\"74\",\"icon_img\":\"img/a5.jpeg\"}]"}
How to append "delete_flag" , "id" , "icon_img" to 3 different places on html ?
5 answers
solution1
8 ACCPTED 2019-03-05 01:00:52
You can use this pure javascript method like below.
The code basically uses document.getElementById() to get the element, and .innerHTML to set the inside of the element to the value of the object.
This code (and the code using jQuery) both use JSON.parse() to parse the data into the correct object that our code can read. The [0] at the end is to select the object we wanted since it would give us an array (and we want an object).
const result = {"dataStore":"[{\\"delete_flag\\":\\"false\\",\\"id\\":\\"74\\",\\"icon_img\\":\\"img/a5.jpeg\\"}]"}; const parsedData = JSON.parse(result.dataStore)[0]; document.getElementById("delete_flag").innerHTML = parsedData.delete_flag; document.getElementById("id").innerHTML = parsedData.id; document.getElementById("icon_img").src = parsedData.icon_img;
<div id="delete_flag"></div> <div id="id"></div> <img id="icon_img">
Or you can use jQuery (which in my opinion, is much simpler). The code below uses .html() to change the inside of the divs to the item from the object, and .attr() to set the attribute src to the image source you wanted.
const result = {"dataStore":"[{\\"delete_flag\\":\\"false\\",\\"id\\":\\"74\\",\\"icon_img\\":\\"img/a5.jpeg\\"}]"}; const parsedData = JSON.parse(result.dataStore)[0]; $("#delete_flag").html(parsedData.delete_flag); $("#id").html(parsedData.id); $("#icon_img").attr("src", parsedData.icon_img);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="delete_flag"></div> <div id="id"></div> <img id="icon_img">
solution2
2 2019-03-05 00:59:45
you can use jQuery .html() or .text()
For example:
var json = {"id" : "74"}; $( "#content" ) .html( "<span>This is the ID: " + json.id + "</span>" );
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div id="content"></div> </body> </html>
solution3
2 2019-03-05 01:05:49
Just use some simple JavaScript parsing:
const jsonData = {"dataStore":"[{\\"delete_flag\\":\\"false\\",\\"id\\":\\"74\\",\\"icon_img\\":\\"img/a5.jpeg\\"}]"}; const parsedData = JSON.parse(jsonData.dataStore)[0]; document.getElementById("delFlag").textContent = "Delete Flag: " + parsedData["delete_flag"]; document.getElementById("id").textContent = "ID: " + parsedData["id"]; document.getElementById("img").textContent = "Image: " + parsedData["icon_img"];
<p id="delFlag"></p> <p id="id"></p> <p id="img"></p>
Note that you can't parse the full object jsonData because it's not JSON - only the data inside it is JSON.
solution4
1 2019-03-05 01:04:44
I've upvoted the other answers, but maybe this will help someone else. On your ajax success function, do something like this:
success: function(data){
// console.log('succes: '+data);
var delete_flag = data['delete_flag'];
$('#results').html(delete_flag); // update the DIV or whatever element
}
if you got real fancy, you could create a for loop and put all the json variable you need into an array and create a function to parse them all into their proper elements; you could learn this on your own fairly easily.
solution5
1 2019-03-05 01:08:36
var data = { "dataStore": { "delete_flag": "false", id: "74" } } $('.flag').html(data.dataStore.delete_flag); $('.id').html(data.dataStore.id);
span { color: red }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Flag: <span class="flag"></span> <hr /> ID: <span class="id"></span>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.