當前位置:首頁 » 網頁前端 » 前端json展示框
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端json展示框

發布時間: 2023-08-01 03:59:34

1. 前端js把json字元串轉json對象 java對象轉json對象命令

最近在逛編程問題解答的時候,看到這樣的提問:如何將一個JSON數組類型的字元串轉換為JSON數組,然後遍歷數組取出JSON對象,最後在JS中取出裡面的屬性。在這里給同樣有疑問的朋友做下解答,

首先我們追本溯源問一下,JSON究竟是什麼東西?為什麼JSON就是易於數據交換?本文將從以下幾個方面去理解JSON:

首先是對「JSON是一種輕量的數據交換格式」的理解;

然後來看經常被混為一談的JSON和JS對象的區別;

json字元串轉換成json數組並遍歷屬性值;

什麼是JSON? JSON是一種輕量級的數據交換格式。

如果沒有去過JSON的官方介紹可以去一下這里,官方介紹已經很清楚地表述了JSON是什麼,我將JSON是什麼提煉成以下幾個方面:

1. 一種數據格式

什麼是格式?就是規范你的數據要怎麼表示,舉個栗子,有個人叫「二百六」,身高「160cm」,體重「60kg」,現在你要將這個人的這些信息傳給別人或者別的什麼東西,你有很多種選擇:

以上所有選擇,傳遞的數據是一樣的,但是你可以看到形式是可以各式各樣的,這就是各種不同格式化後的數據,JSON是其中一種表示方式。

2. 基於文本的數據格式

JSON是基於文本的數據格式,相對於基於二進制的數據,所以JSON在傳遞的喚老時候是傳啟宏遞符合JSON這種格式(至於JSON的格式是什麼我們第二部分再說)的字元串,我們常會稱為「JSON字元串」。

3. 輕量級的數據格式

在JSON之前,有一個數據格式叫xml,現在還是廣泛在用,但是JSON更加輕量,如xml需要用到很多標簽,像上面的例子中,你可以明顯看到xml格式的數據中標簽本身占據了很多空間,而JSON比較輕量,即相同數據,以JSON的格式占據的帶寬更小,這在有大量數據請求和傳遞的情況下是有明顯優勢的。

4. 被廣泛地用於數據交換

輕量已經是一個用於數據交換的優勢了,但更重要的JSON是易於閱讀、編寫和機器解析的,即這個JSON對人和機器都是友好的,而且又輕,獨立於語言(因為是基於文本的),所以JSON被廣泛用於數據交換。

以前端JS進行ajax的POST請求為例,後端PHP處理請求為例:

可以看到,相同的數據在這里有3種不同的表現形式,分別是前端的JS對象、傳輸的JSON字元串、後端的PHP對象,JS對象和PHP對象明顯不是一個東西,但是由於大家用的都是JSON來傳遞數據,大家都能理解這種數據格式,都能把JSON這種數據格式很容易地轉化為自己能理解的數據結構,這就方便啦,在其他各種語言環境中交換數據都是如此。

經常被混為一談的JSON和JS對象很多時候都聽到「JSON是JS的一個子集」這句話,而且這句話我曾經也一直這么認為,每個符合JSON格式的字元串你解析成js都是可以的,直到後來發現了一個奇奇怪怪的東西…

1. 兩個本質不同的東西為什麼那麼密切

JSON和JS對象本質上完全不是同一個東西,就像「斑馬線」和「斑馬」,「斑馬線」基於「斑馬」身上的條紋來呈現和命名,但是斑馬是活的,斑馬線是非生物。

同樣,」JSON」全名」JavaScript Object Notation」,所以它的格式(語法)是基於JS的,但它就是一種格式,而JS對象是一個實例,是存在於內存的一個東西。

說句玩笑話,如果JSON是基於PHP的,可能就叫PON了,形式可能就是這樣的了[『propertyOne』 => 『foo』, 『propertyTwo』 => 42,],如果這樣,那麼JSON可能現在是和PHP比較密切了。

此外,JSON是可以傳輸的,因為它是文本格式,但是JS對象是沒辦法傳輸的,在語法上,JSON也會更加嚴格,但是JS對象就很鬆了。

那麼兩個不同的東西為什麼那麼密切,因為JSON畢竟是從JS中演變出來的,語法相近。

2. JSON格式別JS對象語法表現上嚴格在哪

先就以「鍵值對為表現的對象」形式上,對比下兩者的不同,至於JSON還能以怎樣的形式表現,對比完後再羅列。

可以看到,相對於JS對象,JSON的格式更嚴格,所以和旁升大部分寫的JS對象是不符合JSON的格式的。

json字元串轉換成json數組並遍歷屬性值方式一:使用Iterator迭代器遍歷取值

方法二:使用for循環

2. json數據在頁面中格式化展示

做項目時候,後端返回json數據要求前端在頁面上展示格式化的數據,查了半天的資料,學到了

方法:
JSON.stringify(value, replacer, space)

我們在控制台中列印出來是這樣的

但是我們在頁面中直接展示的話

但是在頁面中展示,他還是一坨,根本不是json格式化後的數據
我們直接在裡面添加'<pre>'就可以了

pre 元素可定義預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。

你看,頁面中,數據展示出來的就是 json格式化的數據

3. 數據可視化,前台已json格式接收數據後,怎麼讓數據已思維導圖的形式展示出來,各位幫幫忙,給個思路

一般用ajax就可以簡單實現,另外看看你用什麼框架,angularJS也可以怎麼調用後台返回的JSON格式數據展示到前台已經做

4. 前端頁面顯示帶格式的json數據

首先後台返回數據格式形如下面:

var jsonData = '{↵↵ "reason": "成功",↵↵ "result": {↵↵ "realname": "董**",/*真實姓名*/↵↵ "idcard": "330329199******12",/*身份證號碼*/↵↵ "res": 1 /*1:匹配 2:不匹配*/↵↵ },↵↵ "error_code": 0↵↵ }';

然後JS處理如下:

jsonData = jsonData .replace(/↵/g,"").replace(/ /g," ");

或者下面這種

jsonData = jsonData .replace(/\n/g,"").replace(/ /g," ");

頁面上如果是框架的話 使用v-html 或者ng-html等,否則使用<pre></pre>也可以。

5. 前端獲得的json數據怎麼展示

把前端獲取的json數據轉換為json對象,如果再根據json對象數據在html頁面展示。如:

varjosn=[{'name':'z','age':18},{'name':'li','age':19}];//json對象
//我這里josn對象是數組,可以遍歷,用table去顯示
varhtml='<tableid="tab"><tr><td>姓名</td><td>年齡</td></tr>';//html字元串
for(vari=0;i<json.length;i++){
varobj=json[i];
html+='<tr><td>'+obj.name+'</td><td>'+obj.age+'</td></tr>';//拼接html字元串
}
html+='</table>';//table結尾
$(document.body)append(html);//利用jQuery把table追加在body標簽的最後

6. PHP中如何讀取遠程網頁中json的對應內容並轉換為前端顯示

你先定義好前端展示的位置,然後通過訪問url獲得json數據,用php解析json,對號入座就可以了。

7. 前端js訪問本地json文件怎麼訪問啊 訪問成功後怎麼在前端顯示

問題1:js訪問本地json

如果可以這樣隨意訪問,你打開的任何網站不就可以通過js把你本地文件全部獲取到了嗎,這是非常危險的;這個不是技術上的能不能,而是安全策略問題,解決方法肯定有,大概是給瀏覽器某種授權。

我比較推薦換一種方式來解決這個問題,你要的結果是訪問json文件,如果json文件不是很大的話,何不直接用個js變數保存它的值;

另外可以考慮部署到伺服器,通過ajax請求獲取,通過jquery可以如下寫:

$.get('/content/test.json',function(data){
alert(data);});

問題2:如何在前端顯示

js操縱DOM,可以簡單粗暴地加到body里,當然有更好展現方式,推薦單獨寫個div:

$('body').append(data)